Web サイトのフォームを Gmail に送る（mailto: がうまくいかない理由も）

フォームをフォームバックエンドに送信し、Gmail のアドレスを受信者に追加します。訪問者のメールアプリを開くだけの mailto: の action は使いません。次に送信元に対する Gmail のフィルターを追加すれば、送信データは迷惑メールを避けて専用のラベルが付きます。Gmail で Reply を押すと、自分のアドレスから訪問者宛てに返信できます。

ここが違う

Gmail はメールボックスであって、サイト用の送信サービスではありません。フォームが送信できる URL がないので、Gmail へのどの経路も何か別のものを経由します。多くの人が最初に試すのが 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>

自分のマシンでは確かに動きます。Send を押すとメールアプリが開き、本文にフィールドが入っていて、それを自分宛てに送ります。訪問者の体験は違います:

メッセージが届いたとしても、本文は生の name=value の行です。text/plain のエンコードではそうなるからです:

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

Gmail へのほかの経路は動きますが、どれも自分で動かすサーバーが必要です:

Apps Script は多くのチュートリアルが勧める経路なので、詳しく見ておきます。doPost 関数を書き、誰でも呼び出せる Web アプリとしてデプロイし、フォームの送信先をその URL にします。動きはしますが、通常のフォーム送信だと訪問者はあなたのドメインではなく Google のドメインから配信されるページに残され、URL を見つけたボットは誰でもその日の割り当てを使い切れ、スクリプトはあなたとして実行されるので、バグがあればあなたのアカウントから誰にでもメールを送れてしまいます。さらに、以降のフォームのフィールド変更もすべて自分で対応することになります。

フォームを Gmail に送る

小規模な施工業者向けのフォームの例です。job フィールドがあると受信トレイを見渡しやすく、email という名前にしているので返信は訪問者に届きます:

<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. Ikiform でフォームを作成し、frm_xxxxxxxxxxxxxxxx をその ID に置き換えます。
2. Gmail のアドレスで登録していれば、ワークスペースのオーナーとしてすでにメールを受け取れます。そうでなければフォームの Notifications 設定を開き、Add someone outside the workspace に Gmail のアドレスを入力して Send link を押します。
3. Gmail で確認メールを開いて確認します。それまでアドレスには Waiting for confirmation と表示され、何も届きません。
4. フォームの Allowed domains に自分のドメインを追加し、ページを公開してテストを送信します。

Gmail のフィルターで迷惑メールを避ける

新しい送信元からの最初のメールは、Spam（迷惑メール）や Promotions（プロモーション）に入ることがあります。送信元に対するフィルターを作れば、これを恒久的に防げます。Gmail で検索オプションを開き、From に notifications@ikiform.com を入れて Create filter を押し、Never send it to Spam、Apply the label、Always mark it as important、Categorize as: Primary にチェックを入れます。最後の設定で Promotions に入らなくなります。

またはフィルターをインポートします。これは Gmail 自身のフィルターの Export が書き出す形式です。Google はこれを別途ドキュメント化していないので、インポートに失敗したら上記のとおり手動でフィルターを作ってください。mailFilters.xml として保存し、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>

先に Website ラベルを作るか、ファイル内でラベル名を変えてください。通知はすべて同じアドレスから届くので、フィルター 1 つですべてのフォームをカバーできます。フォームごとにラベルを分けるなら、subject:("New submission: Quote request") のように件名でフィルターします。

Gmail から返信する

Gmail は Reply-To ヘッダーに従うので、Reply は訪問者宛てになります。返信はあなたの Gmail アドレスから送られ、スレッドに Ikiform は一切現れません。

• 代わりに仕事用のアドレスから返信するには、Settings、Accounts and Import、Send mail as でそのアドレスを追加し、返信時に From 欄で選びます。
• 件名は常に New submission: とフォーム名なので、Gmail は同じ件名の通知を 1 つのスレッドにまとめることがあります。メッセージごとに 1 行で表示したいなら、Gmail の設定で Conversation view（スレッド表示）をオフにしてください。
• 1 時間ごとのダイジェストは多くの訪問者をまとめたものなので、返信先がありません。ダイジェストにはダッシュボードのリンクから返信してください。

動作を確認する

1. ページのフォームに入力して送信します。自分のサンクスページか、Ikiform のサンクスページに移動します。
2. Gmail でメールを探します。ラベルが付いていて、Spam や Promotions には入っていません。
3. Reply を押します。To 欄はフォームに入力されたアドレスです。
4. ハニーポットを埋めて _gotcha=bot で送信します。成功の応答は返りますが、送信データはスパムとして保存され、メールも Webhook も送られません。
5. 何も届かない場合は、ダッシュボードのステータスフィルターを Spam に切り替えてください。スパムにも本物の送信と同じ成功の応答が返ります。

ハマりどころ

• Google Workspace のエイリアス。 受信者がエイリアスや Google グループの場合、外部の送信者を受け付けるかどうかはグループ自体の設定で決まります。頼りにする前にテストを送ってください。
• 確認メールが迷惑メールに入る。 確認リンクのメールも Ikiform から届きます。見当たらなければ Spam を確認し、迷惑メールではないと報告してください。
• 複数の Gmail アドレス。 1 つのフォームがメールを送れるのは合計 10 アドレスまでで、外部のアドレスはそれぞれ個別に確認します。
• ほかの場所に残る mailto: リンク。 フッターにある mailto: リンクは、リンクとしては問題ありません。問題なのは、フォームの action に mailto: を使う場合だけです。

よくある質問