Cloudflare Pagesにお問い合わせフォームを設置する方法｜SSGformで送信・受信まで確認

Cloudflare Pagesで公開しているサイトには、フォームの送信処理を外部サービスのSSGformに任せる方法で、お問い合わせ窓口を追加できます。サイトに置いた入力画面からSSGformへ内容を送り、担当者はメールで受け取る仕組みです。

この方法なら、メールを送るプログラムを一から開発する必要はありません。ただし、SSGformに登録しただけではサイトに入力画面はできず、送信ボタンが表示された段階でも完成ではありません。この記事では、サイト側とSSGform側の設定をつなぎ、社内への通知やお客さんへの自動返信まで確認する順番を説明します。

この記事で分かること

• Cloudflare PagesとSSGformが、それぞれ何を担当するか
• フォームのHTMLで設定する送信先と項目名
• 通知・自動返信・完了ページを用意する方法
• 送信テストと、メールが届かないときの見直し方

Cloudflare Pagesの画面と、SSGformの送信処理を組み合わせる

Cloudflare Pagesでページを公開し、名前やメールアドレスの入力欄を作っても、それだけでは担当者にメールは届きません。入力内容を受け付け、通知メールにして送る処理が必要です。今回は、その処理をSSGformへ任せます。

例えば、お客さんがサービスの見積もりについて相談するときは、次の分担で動きます。

Pagesが入力内容をメールにするのではなく、ブラウザーから受け取ったSSGformが通知を送ります。 この構成では、PagesにPHPのメールフォームを置いたり、別途Resendなどのメール配信サービスを契約したりする作業は必要ありません。

SSGformは、入力画面のデザインを自動で作るサービスではありません。サイトに合わせた画面は制作担当者が用意します。すでにフォームの画面があるなら、見た目を生かして送信先をつなぐ方法も取れます。

設置前に、入力項目・通知先・送信後の案内を決める

最初に決めるのは、お客さんに何を入力してもらい、誰が受け取るかです。制作担当者に設定を頼む場合も、次の内容が決まっていれば、画面づくりと送信の設定を一緒に進められます。

担当者の交代がある窓口なら、受信メールを誰が引き継ぐかも決めておきます。フォームが動いていても、通知先を見ている人がいなければ、お客さんに返事をできません。

SSGformでフォームを登録し、専用のURLを発行する

SSGformのアカウント登録とメールアドレスの確認を済ませたら、管理画面でフォームを追加します。「会社サイトのお問い合わせ」など、用途が分かる管理用の名前を付けると、専用の送信先URLが発行されます。

ここで発行されるURLは、お客さんが入力内容を送るための宛先です。SSGformの送信先URLと、社内で通知を受け取るメールアドレスは別々に設定します。 URLはサイト側のHTMLへ、メールアドレスはSSGform側の通知設定へ入れます。

Freeプランは月額0円・月100回の送信までで、登録にクレジットカードは不要です。自動返信なども無料で使えますが、本番で足りるかは送信数で判断します。料金・仕様は2026年10月19日時点です。

フォームの送信先と、入力欄のnameを設定する

サイト側では、お問い合わせページのHTMLにSSGformへの送信設定を入れます。新しく入力画面を作る場合の最小例は、次のとおりです。SSGform公式のコード例でも、同じように通常のHTMLフォームから送信する方法が案内されています。

<form action="https://ssgform.com/s/YOUR_FORM_ID" method="post">

<label for="contact-name">お名前</label>

<input id="contact-name" type="text" name="お名前" required>

<label for="contact-email">メールアドレス</label>

<input id="contact-email" type="email" name="email" required>

<label for="contact-message">お問い合わせ内容</label>

<textarea id="contact-message" name="お問い合わせ内容" required></textarea>

<button type="submit">送信する</button>

</form>

この例のhttps://ssgform.com/s/YOUR_FORM_IDは説明用です。そのままでは送信できないため、SSGformで発行した自分のフォームのURLへ置き換えてください。余白や色などのデザインは含めていません。

送信に関係する3つの設定を押さえる

コード全体を覚える必要はありません。制作担当者と確認したいのは、主に次の3点です。

postでは、入力内容をURLの末尾に並べず、送信データの本文として渡します。methodを省略すると別の送信方法になるため、この例では明示しています。

特に気を付けたいのがnameです。画面に「メールアドレス」と表示されていても、それだけで送信するデータに項目名が付くわけではありません。表示する文字はlabel、送る項目名は入力欄のnameで指定します。

SSGformの自動返信を使うメール欄は、nameをemailまたはメールアドレスにします。 例えば、見た目は同じでもname="contact_email"のままでは、SSGformの自動返信に必要な条件を満たしません。

既存の画面がある場合は、元の送信処理も確認する

通常のHTMLフォームなら、まずactionとmethod、各入力欄のnameを確認します。ただし、すでにJavaScriptで独自の送信処理をしている画面では、actionだけを変えても、そのURLへ送られない場合があります。制作担当者に「通常のフォーム送信にする」ことまで伝えましょう。

修正後は、普段の更新方法でPagesへ反映します。Git連携なら接続しているソースを更新し、直接アップロードなら修正済みのファイルをアップロードします。サイトを生成する仕組みを使っている場合は、生成済みファイルだけでなく、普段編集している元のファイルを直す必要があります。

SSGformで通知・自動返信・迷惑送信対策を設定する

画像は自動返信の設定欄です。通知先と送信後の転送先も、同じ編集画面で設定します。

サイト側から内容を送れるようにしたら、SSGformで受け付けた後の動きを設定します。社内への通知、お客さんへの自動返信、送信後の画面は、それぞれ確認が必要です。

通知先と自動返信を設定する

SSGformのフォーム編集画面で、通知先メールアドレスを設定します。社内の複数宛先にも通知できますが、誰が最初に内容を読み、誰が返事をするかは別に決めておきましょう。

お客さんへ受付メールを送りたい場合は、自動応答メールを有効にし、件名と案内文などを設定します。前の節のメール欄のnameも、この機能が動く条件です。

自動返信は「受け付けたことを知らせるメール」で、相談内容への回答は担当者が行います。 案内文には「内容を確認し、2営業日以内にご連絡します」のように、自社で守れる目安を入れます。これは文面の例なので、実際の対応体制に合わせてください。

送信後のページと、送信を制限する設定をそろえる

送信後の転送先URLを設定すると、自社の「お問い合わせありがとうございます」というページへ移動させられます。設定しない場合は、SSGform共通の完了画面が表示されます。この説明は、前の節のように通常のHTMLフォームで送信する場合のものです。

迷惑送信への対策では、許可ホストの制限やCAPTCHAを検討します。許可ホストとは、フォームを送信できるサイトのドメインを指定する設定です。Pagesのプレビュー用URLと本番の独自ドメインは別なので、テストするURLと実際に使うURLの両方に合うかを確認します。

CAPTCHAは、自動プログラムによる送信を抑える仕組みです。SSGformはreCAPTCHAやTurnstileに対応しており、サイト側に表示用の設定を加え、SSGform側に秘密鍵を登録します。HTMLの例を貼っただけで、これらの対策も有効になるわけではありません。公開前の設置作業に含めて依頼してください。

公開URLから送信し、通知と自動返信の両方を確認する

画像は2026年10月19日、Pages上の架空企業のテストフォームを送信した後に表示された完了画面です。送信先にはSSGformを使い、完了後は別に用意したデモサイトのページへ移動する設定になっています。

今回のテストでは、メールアドレスの入力・同意・送信を本人が行い、次の結果を確認できました。

これは既存のテストフォームでの1回の確認です。このフォームではTurnstileを有効にしていないため、迷惑送信対策の動作まで確かめた結果ではありません。以下の順で、ご自身の環境でも確認しましょう。

フォームが表示されたら、実際に入力して送ります。プレビューでの確認に加え、お客さんが使う本番のURLからも試してください。許可ホストや、公開されたファイルの違いで、プレビューとは結果が変わることがあります。

テストには、確認できるメールアドレスと、テストだと分かる名前・本文を使います。「送信テスト 10月19日」のように区別できる内容にしておくと、どの操作のメールかを探しやすくなります。

完了画面が出たことと、必要なメールが受信箱に届いたことは、分けて確認します。 自動返信を使わない構成なら、その項目を除き、社内への通知と完了画面を確かめます。

届かないときは、症状ごとに見直す

何度も送信を繰り返す前に、どこまで動いたかを整理します。画面のエラー、社内通知、自動返信で、確認する設定が違います。

SSGformは問い合わせ本文を保存しないため、届かなかった内容を管理画面から読み直すことはできません。通知メールが受信側のフィルターで除外される可能性もあるので、エラーが見えないことだけで受信できたとは判断しないようにしましょう。

原因を制作担当者へ伝えるときは、テストしたURL・日時・表示された画面・どちらのメールが届かなかったかをまとめます。「フォームが動かない」という伝え方より、確認してもらう場所を絞れます。

メールで対応できる窓口に使い、公開後も件数と受信を点検する

この方法は、既存のPagesサイトに合わせた入力画面を用意し、届いた問い合わせにメールで返事をする窓口に合います。送信処理を自作する作業を減らせる一方、問い合わせの保管や対応状況は自社で管理します。

SSGformは、問い合わせを保存して一覧管理する台帳ではありません。 参加者一覧を作りたい、回答を集計したい、担当者別の対応状況を管理したい場合は、保存や管理まで含めたフォームサービスも比較しましょう。担当者自身で質問を頻繁に変えたい場合も、サイトのHTMLを誰が更新するかが判断のポイントになります。

無料枠の上限と、通知を読む担当者を決めておく

月間送信数には、お客さんからの相談だけでなく、受け付けた営業連絡や迷惑送信も含まれます。SSGformは上限に達すると、その後の送信を処理せず、内容も残しません。後からプランを変更しても、その間の問い合わせを取り戻すことはできません。

上限の90％と到達時には通知メールが送られます。件数の通知を誰が読み、送信枠を増やす判断を誰がするかまで決めておきましょう。広告で問い合わせを増やす前には、残りの枠にも余裕があるかを確認します。

SSGform自体の特徴や制約を先に整理したい場合は、こちらの記事で説明しています。

メールでの対応が自社に合い、画面を修正する担当者も決まっているなら、SSGformに無料登録して送信先URLを用意するところから始められます。制作を依頼する際は、HTMLの設置だけでなく、本番URLからの送信・社内通知・自動返信の確認まで含めて相談してください。