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

Nikhil Nagar — Thu, 02 Apr 2026 09:52:47 +0000

title: How to Add a Contact Form to Any Website Without a Backend
published: true
tags: tutorial, html, contact form, static site

canonical_url: https://rowen.in/blog/add-contact-form-without-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 Rowen 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 Rowen account at rowen.in/signup

Step 1 -- Create a Rowen Form Endpoint

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

https://rowen.in/api/f/YOUR_FORM_ID

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

Step 2 -- Write Your HTML Form

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

<form action="https://rowen.in/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 Rowen, which stores it in your dashboard and emails it to you.

Step 3 -- Add Spam Protection

Rowen includes a built-in honeypot system. Add one hidden field to your form and bots will fill it in automatically, allowing Rowen 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, Rowen 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" />

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

Step 5 -- Enable Email Notifications

In your Rowen 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 Rowen with JavaScript (fetch)

If you prefer AJAX submissions (no page reload), Rowen 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://rowen.in/api/f/YOUR_FORM_ID", {
    method: "POST",
    body: data,
  });

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

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

Using Rowen 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://rowen.in/api/f/YOUR_FORM_ID", {
    method: "POST",
    body: formData,
  });
}

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

What Happens Behind the Scenes

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

Validates the payload and checks for spam using server-side pattern recognition.
Stores the clean data securely in your dashboard.
Sends you an email notification (if enabled).
Fires any configured webhooks.
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 Rowen, 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 rowen.in/signup and have your first form running in 30 seconds.

DEV Community: Nikhil Nagar