静的HTMLサイトに、独自サーバーなしで問い合わせフォームを置く

HTMLだけでは受信処理はできない

HTMLは入力欄を表示できますが、単独で問い合わせを保存したりメールを送ったりはできません。その部分をFormgongが担当します。ポートフォリオやサービス紹介など、テキスト中心のフォームに使えます。

既存のバックエンドに業務処理があるなら、そのまま利用する方法もあります。この例はフォームのためだけに新しいサーバーを用意しない方法です。

先にメール確認とキー取得

Formgongでフォームを作り、メールを確認してサイト接続画面からキーを取得します。fk_your_access_keyを置き換えてください。公開キーなのでHTMLに置けます。メール未確認では通知が保留になる場合があります。

問い合わせ欄に入れるコード

サイトの問い合わせ部分に挿入し、CSSクラスを加えて見た目を整えます。表示ラベルは変更できますが、フィールド名は維持してください。この例はファイルではなくテキストを送ります。

<form action="https://formgong.com/submit" method="POST">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden">
  <label>Leave this field empty<input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <button type="submit">Send</button>
</form>

送信を決める三つの属性

actionが送信先、method="POST"が送信方法、nameが値の名前です。idだけでは足りません。電話番号にはname="phone"などを追加できます。

botcheckはBot対策の隠し欄です。画面外に置き、空のままにします。入力されると迷惑送信として通知されないことがあります。

送信後のページを決める

初期設定ではFormgongの結果ページに移動します。独自の完了ページを使うなら、HTTPSの完全なURLを設定してください。_redirectでも指定できますが、コード側URLを無視する設定なら管理画面が優先されます。

ページを移動せず表示を更新するにはfetchが必要です。応答確認の例を参照できます。

公開ドメインで最後の確認

見分けやすいテスト文を送り、正しいフォームの記録とメール、迷惑メールを確認します。スマートフォンで入力欄、ボタン、完了ページも確認しましょう。追加通知はTelegramガイドで設定できます。

対策を有効にしたらコードも更新

Turnstileにはウィジェットとcf-turnstile-responseが必要です。この例の隠し欄だけでは代わりになりません。最新例を管理画面から取得します。許可ドメインを設定する場合は、公開先を含めてください。編集画面のプレビューは別ドメインの場合があります。