How to Add a Contact Form to Your HTML Website

The problem with HTML contact forms

Every website needs a contact form. It's the most basic way for visitors to reach you — whether they're potential customers, collaborators, or just someone who found a broken link.

The problem? HTML alone can't send emails. A <form> tag can collect data, but it needs somewhere to send it. Traditionally, that means setting up a backend server with PHP, Node.js, or Python — configuring SMTP credentials, handling CORS, sanitizing inputs, and deploying server-side code just to receive a "Hey, I liked your portfolio" message.

If you're building a static site — a portfolio, a landing page, a small business website — that's an enormous amount of overhead for a single form. There's a simpler way.

The solution: a form backend service

A form backend service acts as the server your HTML form submits to. You point your form's action attribute at their API, include a key that identifies your account, and the service handles everything: storing the submission, sending you an email notification, filtering spam, and giving you a dashboard to manage your leads.

Optaristo is a form backend built exactly for this use case. It's free during beta, requires zero server-side code, and works with any HTML form. Let's set one up.

Step 1 — Get your access key

1. Create a free Optaristo account (no credit card required).
2. From the dashboard, click "Create Form" and give it a name like "Contact Form".
3. Copy the access key that's generated for your form.

That's your form endpoint. Every submission sent with this key will appear in your dashboard and trigger an email notification to the address you signed up with.

Step 2 — Add the HTML form

Paste the following into your HTML page. Replace YOUR_ACCESS_KEY with the key from your dashboard.

<form action="https://app.optaristo.com/api/submit" method="POST">

  <!-- Your Optaristo access key -->
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <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's a fully functional contact form. When a visitor fills it out and hits "Send Message," the data is posted to Optaristo's API. You'll receive an email with the submission details, and the data is stored in your dashboard for later reference.

Step 3 — Add spam protection

Bots love contact forms. The simplest defense is a honeypot field — a hidden input that real users never see, but bots fill in automatically. Optaristo checks for this field and flags any submission that includes a value as spam.

Add this line inside your form, right before the submit button:

<!-- Honeypot spam trap — invisible to humans -->
<input type="hidden" name="_gotcha" style="display:none">

No CAPTCHAs, no annoying puzzles for your visitors. Bots get caught; humans don't even notice it's there. Optaristo also rate-limits submissions per IP address to prevent flooding.

Step 4 — Style the form with CSS

The form above works, but it looks like it's from 1998. Here's a clean, modern version with CSS included — fully responsive and ready to drop into any page:

<style>
.contact-form {
  max-width: 480px;
  margin: 2rem auto;
  font-family: system-ui, sans-serif;
}
.contact-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  font-size: 0.875rem;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-size: 1rem;
  box-sizing: border-box;
}
.contact-form button {
  background: #6366f1;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
</style>

<form class="contact-form"
      action="https://app.optaristo.com/api/submit"
      method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="_gotcha" style="display:none">

  <label for="name">Name</label>
  <input type="text" id="name" name="name" placeholder="Jane Doe" required>

  <label for="email">Email</label>
  <input type="email" id="email" name="email" placeholder="jane@example.com" required>

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

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

Copy this entire block into your HTML file. The form is self-contained — styles, fields, and spam protection, all in one snippet.

Step 5 — Customize redirects and auto-replies

By default, after a visitor submits your form, they'll see a simple "Thank you" confirmation page from Optaristo. You can customize this behavior:

• Custom redirect URL — Add a hidden field _redirect with the URL you want visitors sent to after submission.
• Auto-responder — Configure automatic reply emails from your Optaristo dashboard so visitors get an instant confirmation that you received their message.
• Webhooks — Send submissions to Slack, Discord, Notion, or any URL you want.

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

Bonus: submit with JavaScript (AJAX)

If you want to submit the form without a full page reload — maybe to show a success message inline — use the fetch API:

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

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

  const data = new FormData(form);
  const json = Object.fromEntries(data);

  const res = await fetch(
    'https://app.optaristo.com/api/submit',
    {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(json)
    }
  );

  if (res.ok) {
    form.innerHTML = '<p>Thanks! We\'ll be in touch.</p>';
  }
});

This sends the form data as JSON and replaces the form with a success message — no page reload, no redirect. The visitor stays right where they are.

Frequently asked questions