How to Add a Contact Form to Any Website Without a Backend

Every website needs a contact form, but not every website has a backend. If you are running a static site on GitHub Pages, Netlify, Vercel, or any simple hosting provider, you have probably hit this wall: HTML can collect form data, but it cannot send it anywhere without a server.

That is exactly the problem Flowqen solves. In this tutorial you will add a working contact form to any website in under five minutes — with zero backend code.

What You Need

• A website (HTML, React, Next.js, Astro, Vue — anything that renders a <form>)
• A free Flowqen account at flowqen.com/signup

Step 1 — Create a Flowqen Form Endpoint

Sign up at flowqen.com and open your dashboard. Click "+ New Form". Flowqen instantly generates a unique endpoint URL that looks like this:

https://flowqen.com/api/f/YOUR_FORM_ID

Copy that URL. This is the only thing you need from the Flowqen side.

Step 2 — Write Your HTML Form

Paste the Flowqen endpoint URL into the action attribute of a standard HTML form. Here is a complete, working example:

<form action="https://flowqen.com/api/f/YOUR_FORM_ID" method="POST">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required />

  <label for="email">Email</label>
  <input type="email" id="email" name="email" required />

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send Message</button>
</form>

That is it. No JavaScript. No fetch calls. No API keys in the markup. When a visitor fills out this form and clicks Send Message, the data goes straight to Flowqen, which stores it in your dashboard and emails it to you.

Step 3 — Add Spam Protection

Flowqen includes a built-in honeypot system. Add one hidden field to your form and bots will fill it in automatically, allowing Flowqen to silently discard the submission:

<input type="text" name="_gotcha" style="display:none" />

Real users never see this field, so their submissions pass through normally. This technique blocks over 99% of automated spam without forcing your visitors to solve annoying CAPTCHAs.

Step 4 — Set Up a Custom Redirect (Optional)

By default, Flowqen shows a simple "Thank you" page after submission. If you want visitors to land on your own thank-you page instead, add a hidden input:

<input type="hidden" name="_redirect" value="https://yoursite.com/thank-you" />

Flowqen will capture the data and then redirect the browser to the URL you specify.

Step 5 — Enable Email Notifications

In your Flowqen dashboard, open the form settings. You can configure:

• Email notifications — get an instant email every time someone submits the form.
• Auto-reply emails — automatically send a confirmation email to the person who submitted the form.
• Webhooks — forward submission data to Slack, Discord, Zapier, or any custom URL in real time.

Using Flowqen with JavaScript (fetch)

If you prefer AJAX submissions (no page reload), Flowqen supports that too. Here is a minimal fetch example:

const form = document.querySelector("form");

form.addEventListener("submit", async (e) => {
  e.preventDefault();
  const data = new FormData(form);

  const res = await fetch("https://flowqen.com/api/f/YOUR_FORM_ID", {
    method: "POST",
    body: data,
  });

  if (res.ok) {
    alert("Message sent!");
    form.reset();
  }
});

Flowqen automatically handles CORS headers, so cross-origin requests work out of the box from any domain.

Using Flowqen with React or Next.js

In a React component, the pattern is almost identical:

async function handleSubmit(e) {
  e.preventDefault();
  const formData = new FormData(e.target);

  await fetch("https://flowqen.com/api/f/YOUR_FORM_ID", {
    method: "POST",
    body: formData,
  });
}

No backend route, no API middleware, no environment variables to manage. Just point to your Flowqen endpoint and submit.

What Happens Behind the Scenes

When a submission arrives, Flowqen does the following in under 400 milliseconds:

1. Validates the payload and checks for spam using server-side pattern recognition.
2. Stores the clean data securely in your dashboard.
3. Sends you an email notification (if enabled).
4. Fires any configured webhooks.
5. Redirects the user to your thank-you page or shows a default confirmation.

Wrap Up

Adding a contact form to a static website used to mean spinning up a server, configuring SMTP, and writing validation logic. With Flowqen, you write one HTML form, paste one URL, and everything else is handled for you — spam filtering, email delivery, data storage, and integrations.

Create your free account at flowqen.com/signup and have your first form running in 30 seconds.