HTMLの問い合わせフォーム

Q: フィールドを追加できますか？

はい。city のような短い名前の入力欄を追加してください。Telegram はその名前を回答の上に表示します。access_key や botcheck の名前は変えないでください。

素の HTML の問い合わせフォームです。送信するのはブラウザです。バックエンドもフレームワークもフォントも要りません。

使うにはログイン

コピーする内容

このスターターは、素の HTML で書いた問い合わせフォームです。ブラウザが通常の POST で送信します。fetch の呼び出しはなく、フレームワークもなく、ビルドの手順もありません。

マークアップは、静的ページ、Webflow の埋め込み、または form 要素を受け付ける場所に貼り付けてください。ページ側にサーバーは不要です。

フォームは名前、メールアドレス、メッセージを尋ねます。電話番号は任意です。これらの語はフィールド名でもあります。

Telegram は各フィールド名を、回答の上に太字で表示します。name、email、message のような短い名前は、電話の画面でも読みやすく保たれます。

ここではファイルも、支払いも、Formgong の評価も集めません。訪問者があなたに連絡するための手段だけです。

送信の仕組み

フォームの action は、Formgong のオリジンに /submit を足したもので、method は POST です。隠しフィールド access_key がフォームを指定します。

キーは公開されており、ページに置きます。訪問者が送信できるようにするためのものです。受信者の変更や Webhook の有効化はできません。

隠しフィールド _lang はページの言語を運びます。たとえば en です。Formgong はこれを、サンクスページとエラー文に使います。

訪問者のメッセージは翻訳しません。見えるラベルはページの言語で書き、フィールド名は英語のままにしてください。

ハニーポットは botcheck という名前の入力欄です。画面の外にあり、tabindex は -1、autocomplete はオフです。人は空のままにします。

botcheck が埋まっている送信はスパムとして保存され、配信されません。訪問者には、通常どおり成功したように見えます。

Turnstile は任意です。スニペットではウィジェットをコメントの中に残しています。このテンプレートにサイトキーはありません。

フォームで Turnstile を有効にする場合は、コメント記号を外し、ご自身のサイトキーを貼り付けてください。それまでは、これらの行は何もしません。

隠しフィールド _redirect がない場合、Formgong は独自のサンクスページを表示します。追加スニペットは _redirect を https のアドレスに設定します。

https://example.com/thanks は、ご自身が管理するページに置き換えてください。相対パスは受け付けられません。

貼り付けたあと

ダッシュボードでフォームを作成するか、このページのボタンを使い、プレースホルダをコピーした場合は fk_your_access_key を置き換えてください。

メッセージを電話で受け取りたいときは、フォーム設定で Telegram を接続してください。無料プランではメールは日次ダイジェストで、Telegram はすぐ届きます。

公開したページからテストを送ってください。file:// として開いたファイルは、稼働中のフォームの信頼できるテストになりません。

無料プランは送信を 30 日保持します。有料プランでは、より長く保持できます。Formgong は EU に保存します。

無料プランには月 300 件の送信が含まれます。スパムはその件数に入りません。

クリニック、求人、見積もりのフォームが必要な場合は、このサイトの後方にある業種別テンプレートを使ってください。このページは、簡単な問い合わせのレイアウトだけです。

サービスについての質問は support@formgong.com へお送りください。サービスの運営者は Formgong です。このテンプレートは、ほかの会社を運営者として挙げていません。

プレビュー

フォームのコード

HTML

<form action="https://formgong.com/submit" method="POST" style="position:relative">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="ja">
  <label>お名前 <input type="text" name="name" autocomplete="name" required></label>
  <label>メールアドレス <input type="email" name="email" autocomplete="email" required></label>
  <label>電話番号 <input type="tel" name="phone" autocomplete="tel"></label>
  <label>メッセージ <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>この欄は空のままにしてください <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
任意です。このフォームで Turnstile をオンにしてから、このコメント記号を外し、サイトキーを貼ってください。
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="ja"></div>
-->
  <button type="submit">送信</button>
</form>

サンクスページへリダイレクトする同じフォーム

サンクスページへリダイレクトする同じフォーム

<form action="https://formgong.com/submit" method="POST" style="position:relative">
  <input type="hidden" name="access_key" value="fk_your_access_key">
  <input type="hidden" name="_lang" value="ja">
  <input type="hidden" name="_redirect" value="https://example.com/thanks">
  <label>お名前 <input type="text" name="name" autocomplete="name" required></label>
  <label>メールアドレス <input type="email" name="email" autocomplete="email" required></label>
  <label>電話番号 <input type="tel" name="phone" autocomplete="tel"></label>
  <label>メッセージ <textarea name="message" required></textarea></label>
  <div aria-hidden="true" style="position:absolute;inset-inline-start:0;top:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)">
  <label>この欄は空のままにしてください <input type="text" name="botcheck" tabindex="-1" autocomplete="off"></label>
</div>
  <!--
任意です。このフォームで Turnstile をオンにしてから、このコメント記号を外し、サイトキーを貼ってください。
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<div class="cf-turnstile" data-sitekey="YOUR_TURNSTILE_SITE_KEY" data-language="ja"></div>
-->
  <button type="submit">送信</button>
</form>

よくある質問

このフォームに JavaScript は必要ですか？

いいえ。ブラウザがフォームを単独で送信します。ページに残るのは、fetch を使う AJAX のスターターです。

メッセージはどこへ行きますか？

Formgong の受信箱へ、そして接続したときはメールと Telegram へ届きます。サービス自体についての質問は support@formgong.com へお書きください。

フィールドを追加できますか？

はい。city のような短い名前の入力欄を追加してください。Telegram はその名前を回答の上に表示します。access_key や botcheck の名前は変えないでください。

プレビューは実際のメッセージを送りますか？

いいえ。このページのプレビューは注意書きを示すだけです。本物のアクセスキーとともにスニペットを自分のサイトへ置くまで、何も送信されません。