静的サイトの問い合わせフォーム　GitHub Pages・Cloudflare Pages

HTML の<form>は入力欄と送信のボタンを表示するだけで、送られた内容を受け取ってメールにしたり保存したりするのは、送信先のサーバーで動くプログラムです。GitHub Pages は、公式のドキュメントで「HTML、CSS、JavaScript ファイルを」リポジトリから取得して発行する静的サイトのホスティングサービスと説明されています。こうした置き場所には、送信を受け取るプログラムを自分で置けません。

LEXORA Forms のフォームを貼ると、送信を受け取る・保存する・メールで知らせるところまでを LEXORA Forms が受け持ちます。サイトの側に置くのは、表示のための短いコードだけです。

1. 1

   フォームを作り、通知を設定して公開する

   メールアドレスか Google アカウントで登録し、お問い合わせフォームなどのテンプレートから作ります。上部のバーの「通知設定」で、回答が届いたときのメールと自動返信メールをオンにし、「公開する」を押します（新しいフォームは非公開で作られます）。
2. 2

   「共有」の画面で埋め込みのコードをコピーする

   「ホームページに埋め込む」に2つのコードがあります。自分で HTML を書いているなら「高さを自動で合わせる（おすすめ）」を、スクリプトを置けないときは「iframe のみ（スクリプトを貼れない場合）」を使います。
3. 3

   お問い合わせのページの HTML に貼る

   フォームを出したい場所に、コピーしたコードをそのまま貼ります。サイトを作る道具（静的サイトジェネレーター）を使っている場合は、ページのもとになるファイルに貼ります。
4. 4

   公開し直して、1件送ってみる

   置き場所に上げ直したら、公開中のページを開き、フォームが表示されることと、送ったあとにお知らせと自動返信のメールが届くことを確かめます。スマホの幅でも、フォームの下が切れていないかを見ておきます。

「高さを自動で合わせる」のコードは、フォームを表示する枠（iframe）と、枠の高さをフォームの長さに合わせるスクリプトでできています。設問を進めて長さが変わっても、枠の中に二重のスクロールが出ません。「iframe のみ」のコードは高さが固定なので、フォームの下が切れるときは height の値を大きくします。

CSP を設定しているとき

サイトの安全のために、CSP（Content-Security-Policy）のヘッダーで「読み込んでよい先」を決めている場合は、LEXORA Forms の住所を許可に足します。足さないと、フォームの枠が空のまま表示されません。手元の検証用のページで試した結果は次のとおりです。

「iframe のみ」のコードを使うなら、frame-src に足すだけで済みます。コードの中の style の指定（枠線を消す）は、style-src でインラインのスタイルを止めていると効かず、枠に線が出ることがあります。その場合は、サイトの CSS で枠線を消してください。

• 届いた問い合わせを一覧で管理する。回答の一覧で読め、回答ごとに対応状況とメモを付けられます。CSVは Excel 向けの文字コード（Shift_JIS）でも出せます
• いたずらの送信を気にしなくてよい。ボット対策と送信回数の制限が最初から入っています。静的サイトの側で設定することはありません
• 申込の受付にも使える。日程ごとに人数を決める選択肢ごとの定員や、定員と締め切りで自動終了は無料プランでも使えます。セミナーならセミナー・イベント申込フォームから始められます
• どのページから送られたかを残す。名前を「from」にした隠しフィールドを足し、コードの URL の ?embed=1 のあとに &from=top のように書き足すと、回答と一緒に記録されます

• サイトとまったく同じ見た目にはなりません。フォームは枠（iframe）の中に表示されます。ボタンの色や角の丸みはデザインで合わせられますが、書体や細かな飾りまでそろえたいときは向きません
• 無料プランでは、埋め込んだフォームにも LEXORA の表示が入ります。消せるのは Light プランからです（LEXORA の表示）
• 回答は LEXORA Forms のサーバーに保存されます。送られた内容を自分の管理する場所だけに置きたい場合は合いません
• お知らせのメールは、LEXORA Forms に登録したメールアドレスに届きます。宛先を複数にはできないので、チームで受けるときは転送するか、Google スプレッドシートへの追記を使います
• 無料プランには上限があります。フォームは5個まで、回答はアカウント全体で月100件までです。ファイルを添付してもらう設問は Light プランです。詳しくは料金プランをご覧ください

相談の受付なら無料相談の申込フォームからも始められます。