Add a Contact Form to a Static Website

How to Add a Contact Form to a Static Website (No Backend Code)

Static websites are fast, cheap to host, and easy to secure — which is exactly why so many landing pages, portfolios, documentation sites, and small business sites are built as plain HTML and deployed to GitHub Pages, Netlify, or Cloudflare Pages. The one thing a static site cannot do on its own is process a form submission. There is no server to receive the data, validate it, and email it to you. This guide shows you how to add a fully working contact form to any static site without writing a single line of backend code, using a hosted form backend.

The approach is simple: your HTML form sends its data to a hosted endpoint, and that endpoint — a service like 000form — does all the work a server normally would. Let us walk through it end to end.

Step 1: Get a Form Endpoint

Sign up for a form backend service and create a new form. The service gives you a unique endpoint URL that looks something like https://000form.com/f/your-form-id. This URL is where your form will send its data. Note the email address you want notifications sent to — you will set this in the service's dashboard.

Step 2: Write the HTML Form

Drop a standard HTML form into your page. The two critical attributes are action (your endpoint URL) and method="POST". Each input needs a name — that name becomes the field label in your email and stored record.

<form action="https://000form.com/f/your-form-id" method="POST">
  <input type="text" name="name" placeholder="Your name" required>
  <input type="email" name="email" placeholder="Your email" required>
  <textarea name="message" placeholder="Your message" required></textarea>
  <button type="submit">Send</button>
</form>

That is genuinely all the markup you need for a working form. The required attribute gives you free client-side validation in the browser before the data is ever sent.

Step 3: Add a Honeypot for Spam

Bots love public forms. The simplest defense is a honeypot — a field hidden from humans with CSS that bots fill in anyway. Add a hidden input and let the service discard any submission where it is filled:

<input type="text" name="_honeypot" style="display:none" tabindex="-1" autocomplete="off">

Combined with the rate limiting and content filtering your form backend applies automatically, this catches the overwhelming majority of automated spam. For higher-traffic forms, enable the CAPTCHA or hCaptcha option in your dashboard.

Step 4: Choose Plain POST or AJAX Submit

Plain POST is the simplest. When the visitor clicks Send, the browser navigates to the endpoint and the service redirects to a thank-you page you configure. Nothing else is required — it works even with JavaScript disabled.

AJAX submit keeps the visitor on the page and lets you show an inline success message. Intercept the submit event and post the data with fetch():

const form = document.querySelector('form');
form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const res = await fetch(form.action, {
    method: 'POST',
    body: new FormData(form),
    headers: { 'Accept': 'application/json' }
  });
  if (res.ok) form.innerHTML = '<p>Thanks! We will be in touch.</p>';
});

Use AJAX when you want polished in-page feedback; use plain POST when you want maximum reliability and simplicity.

Step 5: Configure Notifications and a Thank-You Page

In the service dashboard, set the recipient email address (or several), customize the email subject, and set the redirect URL for successful submissions — typically a thank-you.html page on your site. If you want submissions to flow into Slack, a CRM, or a spreadsheet, enable the webhook and route it through an automation tool. Now every submission lands in your inbox and wherever else you need it.

Common Pitfalls to Avoid

Missing name attributes. If an input has no name, its value is never sent. Every field you care about needs one.

Forgetting HTTPS. Always submit to an https:// endpoint so data is encrypted in transit. All reputable form backends are HTTPS-only.

No success feedback. If you use AJAX, always show the visitor a confirmation; silence makes people submit twice.

Over-collecting data. Only ask for what you need. Fewer fields mean higher completion rates and less personal data to safeguard.

When You Need More Than a Form

Hosted endpoints are perfect for contact, quote, and signup forms. If you need authenticated submissions, server-side conditional logic, payments, or data written to your own database, you have outgrown the hosted approach and want a real application backend. Our custom web development and low-code / no-code teams build that next step, and our web development services cover everything from the static front end to the full stack.

Frequently Asked Questions

Get your endpoint and ship a contact form today with 000form, and read our deeper explainer on form backend as a service to understand what happens behind the scenes.

At ESS ENN Associates, our web development services team builds static sites, JAMstack apps, and full-stack platforms with secure custom form handling. When your forms need to do more — contact us for a consultation.