Ein Website-Formular an Gmail senden (und warum mailto: scheitert)

Sende das Formular an ein Formular-Backend und füge deine Gmail-Adresse als Empfänger hinzu; verwende keine mailto:-action, die nur die Mail-App des Besuchers öffnet. Leg dann einen Gmail-Filter für den Absender an, damit Einsendungen den Spam umgehen und ein eigenes Label bekommen. Reply in Gmail schreibt dem Besucher, von deiner eigenen Adresse.

Was hier anders ist

Gmail ist ein Postfach, kein Versanddienst für deine Site. Es hat keine URL, an die ein Formular senden könnte, also führt jeder Weg zu Gmail über etwas anderes. Das Erste, was die meisten versuchen, ist 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>

Es funktioniert auch, auf deinem Rechner. Du klickst auf Send, deine Mail-App öffnet sich mit den Feldern im Text, und du schickst es an dich selbst. Für einen Besucher sieht das anders aus:

Wenn doch eine Nachricht durchkommt, besteht der Text aus rohen name=value-Zeilen, weil die Kodierung text/plain genau das erzeugt:

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

Die anderen Wege zu Gmail funktionieren, aber jeder braucht einen Server, den du betreibst:

Apps Script verdient einen genaueren Blick, weil die meisten Tutorials diesen Weg vorschlagen. Du schreibst eine doPost-Funktion, stellst sie als Web-App bereit, die jeder aufrufen kann, und richtest das Formular auf ihre URL aus. Das funktioniert, aber ein einfacher Formular-Post lässt den Besucher auf einer Seite von Googles Domain statt deiner zurück, jeder Bot, der die URL findet, kann das Tageskontingent aufbrauchen, und das Skript läuft in deinem Namen, ein Fehler darin kann also von deinem Konto aus jedem eine E-Mail schicken. Außerdem ist ab dann jede Änderung an den Feldern des Formulars deine Sache.

Das Formular an Gmail senden

Hier ein Formular für einen kleinen Handwerksbetrieb. Das Feld job macht das Postfach leicht überschaubar, und email ist so benannt, dass Antworten an den Besucher gehen:

<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. Leg ein Formular in Ikiform an und ersetze frm_xxxxxxxxxxxxxxxx durch seine ID.
2. Wenn du dich mit deiner Gmail-Adresse registriert hast, bekommst du die E-Mails bereits als Owner des Workspace. Andernfalls öffne die Einstellungen Notifications des Formulars, gib die Gmail-Adresse unter Add someone outside the workspace ein und klick auf Send link.
3. Öffne die Bestätigungs-E-Mail in Gmail und bestätige. Bis dahin zeigt die Adresse Waiting for confirmation und bekommt nichts.
4. Füge deine Domain unter Allowed domains des Formulars hinzu, veröffentliche die Seite und sende einen Test.

Mit einem Gmail-Filter aus dem Spam heraushalten

Die erste E-Mail von einem neuen Absender kann in Spam oder Promotions landen. Ein Filter auf den Absender behebt das dauerhaft. Öffne in Gmail die Suchoptionen, trag notifications@ikiform.com bei From ein, klick auf Create filter und hake dann Never send it to Spam, Apply the label, Always mark it as important und Categorize as: Primary an, was sie aus Promotions heraushält.

Oder importiere den Filter. Das ist das Format, das Gmails eigener Filter-Export schreibt; Google dokumentiert es nicht separat, falls ein Import also scheitert, leg den Filter wie oben von Hand an. Speichere ihn als mailFilters.xml und geh dann zu 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>

Leg zuerst das Label Website an oder benenne es in der Datei um. Ein Filter deckt jedes Formular ab, weil alle Benachrichtigungen von derselben Adresse kommen. Um Formulare auf verschiedene Labels aufzuteilen, filtere stattdessen nach dem Betreff, etwa subject:("New submission: Quote request").

Aus Gmail antworten

Gmail beachtet den Reply-To-Header, daher adressiert Reply den Besucher. Deine Antwort geht von deiner Gmail-Adresse raus, ohne dass Ikiform im Verlauf auftaucht.

• Um stattdessen von deiner geschäftlichen Adresse zu antworten, füge sie unter Settings, Accounts and Import, Send mail as hinzu und wähle sie beim Antworten in der Zeile From aus.
• Gmail fasst Benachrichtigungen mit demselben Betreff eventuell zu einer Konversation zusammen, weil der Betreff immer New submission: plus der Name des Formulars ist. Schalte Conversation view in den Gmail-Einstellungen aus, wenn du lieber eine Zeile pro Nachricht siehst.
• Stündliche Sammel-E-Mails haben kein Reply-To, weil sie viele Besucher abdecken. Antworte auf diese über die Links im Dashboard.

Prüfen, ob es funktioniert

1. Füll das Formular auf deiner Seite aus und sende es ab. Du landest auf deiner Dankeseite oder der gehosteten von Ikiform.
2. Such die E-Mail in Gmail. Sie hat dein Label und liegt nicht in Spam oder Promotions.
3. Klick auf Reply. In der Zeile To steht die Adresse, die ins Formular getippt wurde.
4. Sende einen Post mit ausgefülltem Honeypot, _gotcha=bot. Er bekommt trotzdem eine Erfolgsantwort, aber die Einsendung wird als Spam gespeichert und löst weder E-Mail noch Webhook aus.
5. Nichts angekommen? Stell den Statusfilter im Dashboard auf Spam. Spam bekommt dieselbe Erfolgsantwort wie eine echte Einsendung.

Stolperfallen

• Google-Workspace-Aliasse. Ist der Empfänger ein Alias oder eine Google Group, entscheiden die Einstellungen der Gruppe, ob externe Absender erlaubt sind. Sende einen Test, bevor du dich darauf verlässt.
• Bestätigung landet im Spam. Die E-Mail mit dem Bestätigungslink kommt ebenfalls von Ikiform. Wenn sie nicht auftaucht, schau in Spam und markiere sie als kein Spam.
• Mehrere Gmail-Adressen. Jedes Formular mailt an insgesamt bis zu 10 Adressen, und jede externe Adresse bestätigt separat.
• Alte mailto:-Links an anderer Stelle. Ein mailto:-Link im Footer ist als Link in Ordnung. Das Problem ist nur mailto: als action eines Formulars.

Fragen