How to Send HTML Form Submissions to Email

The most common reason people add a contact form to their website is to receive messages via email. But HTML forms can't send emails on their own. They need a backend to process the submission and deliver it to your inbox. This guide shows how to send any HTML form submission directly to email using a form backend service.

You won't need to write any server-side code. By the end of this guide, every form submission on your site will land in your email inbox within seconds.

Why HTML forms can't send email directly

An HTML <form> element can only do one thing: send an HTTP request (GET or POST) to a URL. It has no ability to connect to an SMTP server, authenticate with an email provider, or compose and deliver an email message. The browser packages up the form data and sends it to whatever URL is in the action attribute.

Traditionally, that URL pointed to a script running on your own server: a PHP file using mail(), a Node.js route using Nodemailer, or a Python endpoint using smtplib. That script would receive the form data, format it into an email, connect to an SMTP server, and send it. This works, but it means you need a running server, SMTP credentials, and code to maintain.

A form-to-email service eliminates all of that. You point your form's action to the service's endpoint, and it handles receiving the data, filtering spam, and delivering the email to you. No server, no SMTP setup, no backend code.

How email delivery works behind the scenes

When you use a form backend like FormWit, the email delivery process involves several steps that happen in milliseconds:

Submission received - the service accepts the HTTP POST from the browser and validates the payload (checking required fields, honeypot values, rate limits).
Outbox queue - valid submissions get written to an outbox table. FormWit uses an outbox pattern rather than sending email synchronously. The submission is saved to the database first, then a background poller picks it up for delivery. If the email provider is temporarily down, your submission data is safe and delivery retries automatically.
SMTP handshake - the service connects to its email provider (FormWit uses AWS SES) and authenticates. The email is composed with your form field data formatted into a readable layout.
Delivery and routing - the email travels from the sending server through DNS MX lookups to your inbox provider (Gmail, Outlook, Fastmail, etc). SPF and DKIM records on the sending domain tell your inbox provider the email is legitimate.

The outbox pattern is important. Services that send email synchronously during the HTTP request risk losing submissions if the email provider has a brief outage. With an outbox, submissions are persisted first, then delivered.

Common email deliverability issues

Form-to-email only works if the emails actually reach your inbox. Here are the most common problems and how to fix them:

Emails landing in spam

Form notification emails sometimes get flagged as spam, especially when you first start receiving them. A few things help:

Mark the first email as "not spam" - this trains your inbox provider to trust the sender domain.
Add the sender address to your contacts - Gmail and Outlook treat known contacts more favorably.
Check your spam folder regularly for the first week - most inbox providers learn quickly after a few "not spam" clicks.

FormWit sends from a domain with properly configured SPF, DKIM, and DMARC records. These DNS-based authentication protocols tell receiving mail servers that FormWit is authorized to send on behalf of its domain, which keeps deliverability high.

Emails not arriving at all

If you're not receiving any emails, check these things first:

Verify the recipient email in your dashboard - typos in the email address are the most common cause.
Check your spam and trash folders - some aggressive filters move emails without notification.
Check the submission dashboard - if the submission appears in FormWit but no email arrived, the issue is on the delivery side. Contact support.
Corporate email filters - some company email servers block external notifications. Ask your IT admin to whitelist the sending domain.

Delayed delivery

Most FormWit emails arrive within 30 seconds. If you're seeing delays of several minutes, the bottleneck is usually on the receiving mail server's side. Gmail and Outlook occasionally queue incoming mail during high-traffic periods. There's nothing you can do on the sending side except wait.

How an email sending form service works

The flow is straightforward:

User submits the form - the browser sends an HTTP POST request with the form data to the service's endpoint URL.
The service receives and validates the data - it checks for required fields, filters out spam using honeypot fields and rate limiting, and stores the submission.
The service sends you an email - a formatted email containing all the submitted field values is delivered to your inbox (or multiple inboxes).
The user sees a confirmation - the service redirects the user to a thank-you page or shows a default confirmation message.

You never touch the email-sending infrastructure. The service manages SMTP delivery, handles bounces, and ensures your form submissions actually reach your inbox instead of landing in spam.

Set up form-to-email with FormWit

Here's how to connect any HTML form to your email in under five minutes.

Step 1: Create a free FormWit account

Go to app.formwit.com/auth/signup and sign up. No credit card required. You'll have access to unlimited forms and 100 submissions per month on the free plan.

Step 2: Create a form and add your email as a recipient

In your dashboard, click Create Form and give it a name (e.g., "Contact Form"). Once created, add your email address as a recipient. Every submission to this form will be emailed to that address. You can add multiple recipients if you want the submissions sent to more than one inbox.

Step 3: Add the form HTML to your site

Copy the endpoint URL from your FormWit dashboard and use it as your form's action. Here's a complete contact form example:

<form action="https://app.formwit.com/api/s/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="subject">Subject</label>
  <input type="text" id="subject" name="subject" />

  <label for="message">Message</label>
  <textarea id="message" name="message" required></textarea>

  <!-- Honeypot spam protection - hidden from real users -->
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />

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

Replace YOUR_FORM_ID with the actual form ID from your dashboard. The hidden _gotcha field is a honeypot that catches spam bots. Real users never see or fill it.

Step 4: Test - submit the form and check your inbox

Open your page in a browser and submit the form with test data. Within seconds, you'll receive an email containing all the submitted fields. You can also view the submission in your FormWit dashboard, where all submissions are stored and searchable.

Configuring email recipients

Most sites start with a single recipient, but as your team grows, you'll want submissions routed to the right people.

Multiple recipients

In your FormWit dashboard, navigate to your form's settings and add as many recipient email addresses as you need. Each recipient gets a copy of every submission. Use this when multiple team members need to see incoming messages, like a shared support@ and sales@ inbox.

Per-form routing

If you have multiple forms on your site (contact, support, partnership inquiry), create a separate form in FormWit for each one. Each form gets its own endpoint URL and its own recipient list. Your contact form emails go to the marketing team. Your support form emails go to the engineering team. No cross-talk.

Handling reply-to addresses

When FormWit sends you a notification email, you'll want to hit "Reply" and respond directly to the person who submitted the form. FormWit sets the reply-to header automatically when your form includes a field named email. The notification email arrives from FormWit's sending address, but clicking "Reply" in your email client opens a new message addressed to the visitor.

For this to work, make sure your form has an input with name="email":

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

If you use a different field name like name="contact_email" or name="user_email", FormWit won't know which field contains the reply address. Stick with name="email" for automatic reply-to handling.

Email formatting tips

The notification email FormWit sends contains all your form's fields in a clean, readable format. Here are some tips to make those emails more useful:

Use descriptive field names

The name attribute on each input becomes the label in your notification email. name="message" shows up as "Message" in the email. name="msg" shows up as "Msg". Use full, readable words.

<!-- Good: clear in the notification email -->
<input name="company_name" />
<input name="phone_number" />
<input name="project_budget" />

<!-- Bad: cryptic in the notification email -->
<input name="cn" />
<input name="ph" />
<input name="pb" />

Order matters

FormWit preserves the order of fields as they appear in the form. Put the most important fields first (name, email, message) so they appear at the top of the notification email. Move optional fields like phone number or company name lower.

Use hidden fields for context

Hidden fields are included in the notification email too. Use them to add context about where the submission came from:

<input type="hidden" name="form_source" value="pricing-page" />
<input type="hidden" name="plan" value="starter" />

When the notification arrives in your inbox, you'll see "Form Source: pricing-page" and "Plan: starter" alongside the visitor's message. Useful when you have multiple forms across different pages.

Customizing the email

Custom redirect after submission

By default, the user sees a generic confirmation page after submitting. To redirect them to your own thank-you page, add a hidden redirect_to field:

<input type="hidden" name="redirect_to" value="https://yoursite.com/thank-you" />

The redirect_to value must be a valid http or https URL. It overrides any redirect URL configured in the dashboard. See the HTML contact form guide for more details on redirect setup.

CC additional recipients

If you need submissions sent to multiple email addresses, add additional recipients in your FormWit dashboard under the form's settings. Each recipient will receive a copy of every submission.

Sending form data via AJAX (no page reload)

If you want the form to submit without a full page reload, use JavaScript's fetch API:

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

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const data = new FormData(form);

  const response = await fetch(form.action, {
    method: 'POST',
    body: data,
  });

  if (response.ok) {
    alert('Message sent! We\'ll reply to your email shortly.');
    form.reset();
  } else {
    alert('Something went wrong. Please try again.');
  }
});

This submits the form data in the background and lets you handle the success and error states however you like. Swap the alert calls for inline messages, animations, or redirects.

Spam protection for form-to-email

Spam protection matters more for form-to-email than almost any other form use case. If a bot discovers your form endpoint, every spam submission becomes an email in your inbox. Without protection, you could receive hundreds of junk emails a day.

FormWit includes several layers of spam filtering built-in:

Honeypot fields - the _gotcha hidden input traps bots that auto-fill every field. If it's filled in, the submission is silently rejected. Real users never see it, so it doesn't affect their experience.
Rate limiting - FormWit limits how many submissions a single IP address can send in a given time window. Brute-force spam floods get blocked before they reach your inbox.

To use the honeypot, make sure your form includes this field:

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

The combination of honeypot filtering and rate limiting blocks the vast majority of automated spam without requiring your users to solve CAPTCHAs or jump through extra hoops.

Summary

Sending HTML form submissions to email doesn't require a backend server, SMTP credentials, or any server-side code. A form-to-email service like FormWit receives your form data, filters spam, and delivers a clean notification email to your inbox from a single HTML form.

FormWit's free plan includes unlimited forms, 100 submissions per month, email notifications, spam protection, and a submission dashboard. Create your free account and start receiving form submissions in your email in under five minutes.

Comparing form-to-email services? Our alternatives comparison covers how each service handles email delivery, spam filtering, and pricing.

Frequently asked questions

How fast are email notifications?

Most FormWit notification emails arrive within 30 seconds of submission. FormWit uses AWS SES for delivery with SPF, DKIM, and DMARC configured. Occasional delays of a few minutes are caused by the receiving mail server (Gmail, Outlook), not FormWit.

Can I send to multiple email addresses?

Yes. In your FormWit dashboard, navigate to the form settings and add as many recipient email addresses as you need. Each recipient receives a copy of every submission. You can also create separate forms with different recipient lists for routing (e.g., support vs. sales).

Can I customize the email format?

The notification email includes all form fields in the order they appear in your HTML form. Use descriptive name attributes on your inputs (e.g., name="company_name" instead of name="cn") because these become the labels in the email. Hidden fields are also included, so you can add context like page source or plan selection.