HTML Form to Email

Overview

This guide shows the simplest way to add a working contact form to any static site. No JavaScript, no build step, no backend infrastructure — just plain HTML.

Step 1: Create a Form

Sign up for a free CatchForm account (no credit card required). You'll get a unique token for each form. Keep this token private — anyone with it can submit to your form.

During setup, provide the email address where you'd like to receive submissions. We'll send you a confirmation link.

Step 2: Add the HTML Form

Paste this code into your HTML page where you want the form to appear:

<form action="https://catchform.dev/f/YOUR-TOKEN"
      method="POST"
      style="display: flex; flex-direction: column; gap: 1rem; max-width: 400px;">

  <input type="hidden" name="_gotcha" value="">

  <div>
    <label for="email" style="display: block; margin-bottom: 0.25rem; font-weight: 500;">
      Email
    </label>
    <input type="email" id="email" name="email" required
           style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px;">
  </div>

  <div>
    <label for="message" style="display: block; margin-bottom: 0.25rem; font-weight: 500;">
      Message
    </label>
    <textarea id="message" name="message" required rows="5"
              style="width: 100%; padding: 0.5rem; border: 1px solid #ddd; border-radius: 4px; font-family: inherit;"></textarea>
  </div>

  <button type="submit"
          style="padding: 0.5rem 1rem; background-color: #4f46e5; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 600;">
    Send
  </button>

</form>

Replace YOUR-TOKEN with the token from your form's settings.

Step 3: What Happens Next

When someone submits the form:

1. Their browser sends the form data to CatchForm
2. We validate the submission and check your plan's submission limit
3. An email is sent to your inbox with all the form data
4. The submitter's browser refreshes or redirects (if you configured a success page)

Customization

Custom Field Names

Change the name attribute on any input to customize what you see in your email. Add as many fields as you need:

<input name="phone" type="tel">
<input name="company" type="text">
<textarea name="comments"></textarea>

Success Redirect

By default, the form submission redirects to a success page of your choosing. Configure this in your form's settings on CatchForm. If you want to override it per-submission (for A/B testing or multiple forms on one page):

<input type="hidden" name="_redirect" value="/thank-you">

The redirect URL must be on the same domain as your form's configured redirect URL. This protects against using CatchForm as a redirect service.

Spam Protection

The line <input type="hidden" name="_gotcha" value=""> is a honeypot field. Bots will try to fill it; if they do, we reject the submission as spam. Keep it in your form.

Common Patterns

Newsletter Signup

<form action="https://catchform.dev/f/YOUR-TOKEN" method="POST">
  <input type="hidden" name="_gotcha" value="">
  <input name="email" type="email" placeholder="your@email.com" required>
  <button type="submit">Subscribe</button>
</form>

Contact Form with File Upload

<form action="https://catchform.dev/f/YOUR-TOKEN" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="_gotcha" value="">
  <input name="name" type="text" required>
  <input name="email" type="email" required>
  <textarea name="message" required></textarea>
  <input name="file" type="file" accept=".pdf,.jpeg,.png,.gif">
  <button type="submit">Send</button>
</form>

File uploads are only available on the Pro plan. Remember to use enctype="multipart/form-data" when uploading files.

Get Started

Ready to add a contact form? Sign up for free and get your first 100 submissions included.