Send a website form to Gmail (and why mailto: fails)

Post the form to a form backend and add your Gmail address as the recipient; don't use a mailto: action, which only opens the visitor's mail app. Then add a Gmail filter for the sender so submissions skip spam and get their own label. Pressing Reply in Gmail writes to the visitor, from your own address.

What's different here

Gmail is a mailbox, not a sending service for your site. It has no URL a form can post to, so every route to Gmail goes through something else. The first thing most people try is mailto::

<form action="mailto:you@gmail.com" method="post" enctype="text/plain">
  <input name="name" />
  <input name="email" type="email" />
  <textarea name="message"></textarea>
  <button>Send</button>
</form>

It does work, on your machine. You press Send, your mail app opens with the fields in the body, and you send it to yourself. A visitor's experience is different:

When a message does get through, the body is raw name=value lines, because that's what text/plain encoding produces:

name=Ada Lovelace
email=ada@example.com
message=Hi, do you take on small bathroom jobs in March?

The other routes to Gmail work, but each needs a server you run:

Apps Script deserves a closer look, because it's the route most tutorials suggest. You write a doPost function, deploy it as a web app that anyone can call, and point the form at its URL. It works, but a plain form post leaves the visitor on a page served from Google's domain rather than yours, every bot that finds the URL can use up the day's quota, and the script runs as you, so a bug in it can email anyone from your account. You also own every change to the form's fields from then on.

Send the form to Gmail

Here's a form for a small trade business. The job field makes the inbox easy to scan, and email is named so replies go to the visitor:

<form action="https://ikiform.com/f/frm_xxxxxxxxxxxxxxxx" method="post">
  <label for="name">Your name</label>
  <input id="name" name="name" autocomplete="name" required />

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

  <label for="job">What do you need?</label>
  <select id="job" name="job" required>
    <option value="">Choose one</option>
    <option value="repair">A repair</option>
    <option value="quote">A quote for a new job</option>
    <option value="other">Something else</option>
  </select>

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

  <input name="_gotcha" type="text" tabindex="-1" autocomplete="off" hidden />
  <button>Send to our inbox</button>
</form>

1. Create a form in Ikiform and replace frm_xxxxxxxxxxxxxxxx with its id.
2. If you signed up with your Gmail address, you already get the emails as the workspace owner. Otherwise open the form's Notifications settings, enter the Gmail address under Add someone outside the workspace and press Send link.
3. Open the confirmation email in Gmail and confirm. Until then the address shows Waiting for confirmation and gets nothing.
4. Add your domain under the form's Allowed domains, publish the page and send a test.

Keep it out of spam with a Gmail filter

The first email from a new sender can land in Spam or Promotions. A filter on the sender fixes that for good. In Gmail, open the search options, put notifications@ikiform.com in From, press Create filter, then tick Never send it to Spam, Apply the label, Always mark it as important and Categorize as: Primary, which keeps it out of Promotions.

Or import the filter. This is the format Gmail's own filter Export writes; Google doesn't document it separately, so if an import fails, create the filter by hand as above. Save it as mailFilters.xml, then go to Settings, See all settings, Filters and Blocked Addresses, Import filters:

<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom" xmlns:apps="http://schemas.google.com/apps/2006">
  <title>Mail Filters</title>
  <entry>
    <category term="filter"></category>
    <title>Mail Filter</title>
    <content></content>
    <apps:property name="from" value="notifications@ikiform.com"/>
    <apps:property name="label" value="Website"/>
    <apps:property name="shouldNeverSpam" value="true"/>
    <apps:property name="shouldAlwaysMarkAsImportant" value="true"/>
    <apps:property name="smartLabelToApply" value="^smartlabel_personal"/>
  </entry>
</feed>

Create the Website label first, or rename it in the file. One filter covers every form, because all notifications come from the same address. To split forms into different labels, filter on the subject instead, such as subject:("New submission: Quote request").

Replying from Gmail

Gmail honours the reply-to header, so Reply addresses the visitor. Your answer goes out from your Gmail address, with Ikiform nowhere in the thread.

• To answer from your business address instead, add it under Settings, Accounts and Import, Send mail as, and pick it in the From line when you reply.
• Gmail may group notifications with the same subject into one conversation, because the subject is always New submission: and the form's name. Turn off Conversation view in Gmail's settings if you'd rather see one row per message.
• Hourly digests have no reply-to, since they cover many visitors. Reply to those from the dashboard's links.

Check it works

1. Fill in the form on your page and submit it. You land on your thank-you page, or Ikiform's hosted one.
2. Find the email in Gmail. It has your label and isn't in Spam or Promotions.
3. Press Reply. The To line is the address typed in the form.
4. Post with the honeypot filled in, _gotcha=bot. It still gets a success answer, but the submission is stored as spam and sends no email or webhook.
5. Nothing arrived? Switch the dashboard's status filter to Spam. Spam gets the same success answer as a real submission.

Gotchas

• Google Workspace aliases. If the recipient is an alias or a Google Group, the group's own settings decide whether outside senders are allowed. Send a test before you rely on it.
• Confirmation goes to spam. The confirmation link email comes from Ikiform too. If it doesn't show up, look in Spam and mark it as not spam.
• Several Gmail addresses. Each form emails up to 10 addresses in all, and each outside address confirms separately.
• Old mailto: links elsewhere. A mailto: link in your footer is fine as a link. The problem is only mailto: as a form's action.

Questions