最小の問い合わせフォーム
ラベルと3つの項目とボタンだけです。スタイルはありません。描画はブラウザがします。送信の仕組みは他のスターターと同じです。
コピーする内容
このスターターは、スタイルブロックもユーティリティクラスもない問い合わせフォームです。ブラウザがコントロールを既定の見た目で描きます。
リクエストをはっきり見たいとき、または自分のスタイルシートに描画を任せるときに向いています。
欄はこれまでどおり、名前、メール、任意の電話、メッセージです。ボタンは通常の POST を送信します。
フレームワークも、フォントも、スクリプトもありません。サイト全体の CSS が入力欄を装飾していれば、その CSS が適用されます。このファイルはそれと争いません。
このページのプレビューも、ほかのスターターが使うカードのスタイルを外しているため、コントロールはスタイルのないフォームに近く見えます。
それでも必要なもの
飾りのないフォームにも access_key、_lang、botcheck は必要です。Formgong はこれらでフォーム、言語、ハニーポットを見分けます。
ハニーポットは、包む要素の短い style 属性で隠しています。スニペットの中でスタイルはこれだけです。これがないと、人が罠を埋めてしまうことがあります。
Turnstile はコメントの中にあります。追加スニペットは同じフォームで、それらの行のコメントを外したものです。YOUR_TURNSTILE_SITE_KEY は、まだ置き換えが必要です。
行のコメントを外してもキーは作られません。Cloudflare でウィジェットを作成し、フォームで Turnstile を有効にしてから、サイトキーを貼り付けてください。
コメントアウトされたスクリプトは実行されません。ウィジェットが本当に必要になるまで、コメントはそのままにしてください。
装飾つきスターターと同じ配信
Telegram はフィールド名を太字で表示します。短く保ってください。翻訳するのは、訪問者が読む文言だけにしてください。
_redirect がない場合、Formgong は独自のサンクスページを表示します。_redirect を足すときは、ご自身が所有する絶対 https URL だけにしてください。
無料プランには、月 300 件の送信、30 日の保存、即時の Telegram、日次のメールダイジェストが含まれます。
データは EU に保存されます。サービスを運営しているのは Formgong です。サポートの宛先は support@formgong.com です。
飾りのないフォームが動いたら、自分のレイアウトで包めます。装飾つきのスターターから始める必要はありません。
プレビュー
フォームのコード
<form action="https://formgong.com/submit" method="POST"> <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>
Turnstile の行をコメント解除した同じフォーム
<form action="https://formgong.com/submit" method="POST"> <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>
よくある質問
ハニーポットにまだスタイルがあるのはなぜですか？
罠を画面の外に残すためです。それ以外は、意図してスタイルがありません。この一つの規則を外すと、罠が見えるようになります。
サイトの CSS は POST を壊しますか？
CSS は POST を変えません。スタイルで送信ボタンが隠れることはありますが、重要なのはフィールド名と action の URL です。
小さいのには理由がありますか？
はい。同じリクエストをより少ない装飾で表したものなので、すでにデザインのあるページへ置けます。
電話の欄は必要ですか？
いいえ。電話番号が不要なら、そのラベルを削除してください。受信箱に返信先が必要なら email は残してください。