How to Add an Email Capture Form to Your Landing Page Without a Backend

You built a landing page. It looks great. But when someone fills out your contact form and clicks submit, nothing happens.

That is because HTML forms need a server to process submissions. And setting up a server just to collect email addresses is overkill for most landing pages.

In this guide, you will learn exactly how to add a working email capture form to any landing page without writing any backend code, using Formgrid.dev.

---

Why HTML Forms Do Not Work on Their Own

When someone submits an HTML form, the browser sends the data to whatever URL is in the action attribute:

<form action="WHERE_DOES_THIS_GO" method="POST">

On a static site, there is no server listening at that URL. So the data goes nowhere. The visitor gets an error. You get nothing.

You have three options:

Option 1: Set up your own server. Node.js, PHP, Python. Configure email sending. Handle spam. Maintain it forever. This is weeks of work for something that should take 10 minutes.

Option 2: Use a form backend service. Point your form at their endpoint. They handle everything. You get submissions in your inbox and dashboard.

Option 3: Do nothing. Lose every lead that tries to contact you.

Option 2 is the right call for 90% of landing pages.

---

The Solution: Formgrid.dev

Formgrid is a form backend that works with any HTML form on any website. Point your form's action attribute at your Formgrid endpoint and it just works.

Free plan includes:

• Unlimited forms
• 50 submissions per month
• Instant email notifications
• Spam protection built in
• Submission dashboard

---

Step by Step Setup

Step 1: Create your Formgrid account

Go to formgrid.dev and sign up with Google or Email. No credit card needed.

Step 2: Create a new form

Click New Form, give it a name like "Landing Page Leads" or Contact Form, and click Create Form.

Step 3: Copy your endpoint URL

Go to the Overview tab and copy your endpoint:

https://formgrid.dev/api/f/your-form-id

Step 4: Add the form to your landing page

Here is a complete email capture form ready to drop into any landing page:

<form 
  id="lead-form"
  action="YOUR_FORMGRID_ENDPOINT_URL" 
  method="POST"
>
  <input 
    type="hidden" 
    name="_subject" 
    value="New Lead Signup" 
  />

  <input 
    type="email" 
    name="email" 
    placeholder="Enter your email address" 
    required 
  />

  <button type="submit">
    Get Early Access
  </button>

  <!-- Honeypot spam protection -->
  <input 
    type="text" 
    name="_honey" 
    style="display:none" 
    tabindex="-1" 
    autocomplete="off" 
  />

</form>

<p id="form-status"></p>

<script>
  const form = document.getElementById('lead-form');
  const status = document.getElementById(
    'form-status'
  );

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    status.textContent = 'Submitting...';

    try {
      const res = await fetch(form.action, {
        method: 'POST',
        body: new FormData(form)
      });

      if (res.ok) {
        form.style.display = 'none';
        status.textContent = 
          'You are on the list. We will be in touch!';
      } else {
        status.textContent = 
          'Something went wrong. Please try again.';
      }
    } catch {
      status.textContent = 
        'Network error. Please try again.';
    }
  });
</script>

Replace YOUR_FORMGRID_ENDPOINT_URL with your actual endpoint from Step 3.

Step 5: Test it

Fill out the form yourself and submit. Within seconds, you should receive a notification email.

Check your Formgrid dashboard, and you will see the submission logged there too.

What If I Want to Capture More Than Just Email

You can add any fields you need. Here is a version that captures name, email, and company:

<form 
  id="lead-form"
  action="YOUR_FORMGRID_ENDPOINT_URL" 
  method="POST"
>
  <input 
    type="text" 
    name="name" 
    placeholder="Your name" 
    required 
  />

  <input 
    type="email" 
    name="email" 
    placeholder="Work email" 
    required 
  />

  <input 
    type="text" 
    name="company" 
    placeholder="Company name" 
  />

  <select name="role">
    <option value="">Select your role</option>
    <option value="developer">Developer</option>
    <option value="designer">Designer</option>
    <option value="founder">Founder</option>
    <option value="other">Other</option>
  </select>

  <!-- Honeypot -->
  <input 
    type="text" 
    name="_honey" 
    style="display:none" 
    tabindex="-1" 
    autocomplete="off" 
  />

  <button type="submit">
    Request Access
  </button>

</form>

Every field value appears in your notification email and your dashboard are automatically.

---

Spam Protection Included

Formgrid includes two layers of spam protection out of the box.

The honeypot field is invisible to real users, but bots fill it in automatically. Any submission with that field filled is rejected silently.

Rate limiting blocks the same IP address from submitting too many times in a short window. This stops bot floods before they reach your inbox.

You never see spam submissions. Only real leads.

---

Deploy Your Landing Page for Free

Once your form is working, deploy your landing page on any of these free platforms:

GitHub Pages: Push to a repo and enable Pages in settings. Free forever.

Netlify: Drag and drop your HTML file at netlify.com/drop. Goes live instantly.

Cloudflare Pages: Connect your GitHub repo and deploy on every push.

Your Formgrid endpoint works regardless of where you host. No platform lock-in.

---

Final Thoughts

Adding a working email capture form to your landing page does not require a backend. It does not require a server. It does not require any infrastructure.

Point your form at Formgrid. Get submissions in your inbox. Done.

👉 Start free at formgrid.dev

Full disclosure: I built Formgrid. This post shows the exact workflow I recommend to everyone who asks how to add a form to their landing page.