Formclick

How to Send HTML Form Data to Email

Get HTML form submissions delivered to your email inbox — without PHP, a mail server or mailto links. Includes subject lines, reply-to, multiple recipients and auto-replies.

FFormclick Team3 min read
A close-up view of a smartphone screen displaying the email inbox, held by an adult's hand.
Photo by Solen Feyissa on Pexels
On this page
  1. Why the common approaches fail
  2. The reliable way: a form backend
  3. Making the email work for you
  4. Making sure emails arrive
  5. Beyond email
  6. Summary

"How do I make my HTML form send me an email?" is one of the most-asked web development questions. The honest answer: HTML can't send email by itself. Something on a server has to. But that something doesn't have to be your server.

Why the common approaches fail

mailto: actions

Setting action="mailto:you@example.com" asks the visitor's computer to open an email program. On phones, Chromebooks and for anyone who uses web-mail, it typically does nothing useful. You'll lose most messages.

PHP mail()

The classic solution — but it needs a PHP host, emails sent this way often land in spam because they aren't properly authenticated, and you have to write your own validation and spam protection. It also doesn't work on static hosts like GitHub Pages, Netlify or Vercel.

Calling an email API from the browser

Putting an email provider's secret API key in front-end JavaScript lets anyone copy it and send email as you. Never do this.

The reliable way: a form backend

A form backend receives the submission and sends a properly authenticated notification email to you. Here's the complete HTML using Formclick:

<form action="https://api.formclick.io/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">

  <!-- Email settings -->
  <input type="hidden" name="subject" value="New enquiry from yourwebsite.com">
  <input type="hidden" name="from_name" value="Website Contact Form">

  <!-- Spam trap -->
  <input type="checkbox" name="botcheck" style="display: none;">

  <label for="name">Name</label>
  <input id="name" name="name" required>

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>

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

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

Create a free account, create a form, set the address that should receive notifications, and paste the access key into the hidden field. Every submission now arrives in your inbox, with all fields neatly laid out.

Making the email work for you

Reply directly to the sender

Name the visitor's email field email. The notification's reply-to address is set to it, so you can press Reply and answer straight away.

Set a clear subject line

The hidden subject field becomes the email subject. Use different subjects for different forms ("New quote request", "New job application") so you can filter them in your inbox.

Want the visitor to choose? Make it a visible field instead:

<label for="subject">Subject</label>
<input id="subject" name="subject" required>

Choose the sender name

from_name controls the name shown in your inbox list, e.g. "Website Contact Form" or "Careers Page".

Send different forms to different people

Each Formclick form has its own recipient address. Create one form for sales and another for support, and each notification goes to the right inbox.

Send an automatic reply to the visitor

On Pro plans, turn on the autoresponder to email the visitor as soon as they submit — with your own from-name, subject, intro text and logo. Their replies come back to your notification address.

Making sure emails arrive

  • Add the notification sender to your contacts so your mail provider trusts it.
  • Check your spam folder after the first test.
  • Don't rely on email alone. Every submission is also stored in your Formclick dashboard, so nothing is lost if an email is filtered.
  • Watch the spam tab — suspected spam is kept separate instead of cluttering your inbox.

Beyond email

Email is great for alerts, but teams often need submissions somewhere shared. You can also send each submission to Google Sheets, Notion, Airtable, Discord, a CRM, an email marketing tool or your own database. See the integrations, or read How to Connect HTML Forms to Google Sheets.

Summary

  • HTML can't send email; a server must.
  • Skip mailto: and front-end API keys.
  • Point your form at a form backend, add your access key, and submissions are emailed to you.
  • Use email, subject and from_name to make notifications easy to act on.

Start free — 250 submissions a month, no credit card.

Found this useful? Share it.

All articles