SSGformを静的LPに使う：action URLとサンキューページの注意点
この記事には広告リンクを含みます。紹介している商品・サービスの一部はアフィリエイトプログラムを利用しています。 商品・サービスの選定はご自身の判断でお願いいたします。
静的LPにフォームを実装するとき、バックエンド不要で使えるSSGformは有力な選択肢だ。
ただし「actionにURLを貼ったのに送信できない」「サンキューページに飛ばない」という詰まりがある。
原因の多くは、Contact Form 7とは異なるURL指定ルールを知らずに進めることだ。
自分も過去の静的LP案件でここに時間を取られた。
どの場面でSSGformを選ぶか、action URLとサンキューページの注意点を一次情報で整理する。
どの場面でSSGformを選ぶか——Contact Form 7との違い
自分がSSGformを選ぶのは、静的ビルドでフォームのバックエンドを持たない案件だ。
Contact Form 7はWordPress上でPHPが動く前提で設計されているため、静的サイト（Astro・純HTML LP）では選択肢に入らない。
代わりに選ぶのが、フォームのバックエンドをSaaS側に委譲するSSGformのようなサービスだ。
具体的には次の条件が重なる案件で採用することが多い。
- 既存のCSSでフォームデザインを完全にコントロールしたい
- AstroやHugoなど静的ビルドで完結しており、バックエンドを持たない
- 月の問い合わせ件数が数十件程度に収まる小規模案件
類似サービスにFormspree・Netlify Formsがある。
Netlify FormsはNetlifyにデプロイした場合のみ有効になり、VercelやGitHub PagesではHTMLを書いても機能しない。
Formspreeは無料枠の件数制約がSSGformより早く来る。
SSGformを選ぶ最大の理由はデザイン自由度だ。
<form>タグにactionを差し込むだけで動くため、BootstrapやTailwindで組んだHTMLをそのまま使える。
formrunやGoogleフォームの埋め込みと違い、既存ページのデザインと浮かない。
Astroを使った静的LP案件でのデザイン自由度については、AstroとWordPressの使い分け：迷わない3つの判断基準も参考にしてほしい。
action URLとサンキューページ——絶対URL指定の落とし穴
SSGformのフォームは、ダッシュボードで発行された絶対URLをaction属性に指定する。
<form action=""https://ssgform.com/s/XXXXXXXX"" method="POST">
<input type="text" name="name" placeholder="お名前">
<input type="email" name="email" placeholder="メールアドレス">
<textarea name="message"></textarea>
<button type="submit">送信する</button>
</form>actionのURLは発行されたものをそのまま貼るだけなので、ここは詰まらない。
問題はサンキューページのリダイレクト先。
ダッシュボードの「送信後のリダイレクト先」に/thanks/のような相対パスを入力すると、デプロイ環境によっては遷移が壊れる。https://example.com/thanks/と絶対URLで指定する必要がある。
自分が過去の静的LP案件で経験したのは、ローカル開発中はリダイレクトが動いていても、デプロイ後に遷移が機能しなかったケースだ。
原因はサンキューページURLを相対パスで登録していたこと。
ドメインを確定してからURLをダッシュボードに登録するか、デプロイ直後に手動で送信テストを実施する習慣をつけている。
Contact Form 7では送信後の動作はWordPress管理画面で完結するため、「URLを自分で絶対指定する」感覚がない。
静的サイトに初めて移行する制作者が詰まるのはここだ。
無料枠とスパム対策——実運用での現実感
自分が関わった小規模事業者向けのLP案件では、月の問い合わせ件数が無料枠の上限100件に届いたことはない。
有料プランへの切り替えを検討した経験もなく、実際には余っている状態だ。
上限を超えるケースがあるとすれば、キャンペーンやメディア掲載で流入が集中した場合に限られる。
フォームの項目数は名前・メールアドレス・メッセージの3項目が目安だ。
入力項目が多すぎると離脱を招き、無料枠を使い切る前に問い合わせ自体が減る。
項目を絞ることで、月100件という上限が現実問題になる前に収束するケースがほとんどだ。
スパム対策は、reCAPTCHAとハニーポットの組み合わせが基本だ。
自分の案件ではこの構成で実用上のスパム問題は出ていない。
ただし、reCAPTCHAへの依存度が高い設計のため、仕様変更や有料化の動向は把握しておく価値がある。
SSGformはサーバー側に送信内容を保存しない設計で、データはメール通知として届く。
個人情報をサービス側に蓄積しない点は、クライアントへの説明がしやすい。
送信履歴が手元に残らないため、メールの見落とし対策として送信先を複数設定するかSlack通知と併用するとよい。
フォーム送信後のメール受信まわりが不安な場合は、問い合わせフォームの返信メールが届かない時にまず疑う3つも参考にしてほしい。
他サービスとの比較まとめ
比較軸 | SSGform | Formspree | Netlify Forms |
|---|---|---|---|
デザイン自由度 | 高い（既存HTML/CSS） | 高い | 高い |
デプロイ依存 | なし | なし | Netlify限定 |
無料枠 | 100件/月 | SSGformより少ない | 要確認 |
送信後リダイレクト | 絶対URL指定必須 | 設定可 | 設定可 |
送信履歴 | なし（メールのみ） | 管理画面あり | 管理画面あり |
静的LP案件でフォームを実装するなら、まずSSGformを試すのが自分のデフォルトになっている。
ダッシュボードでフォームURLを発行し、サンキューページには絶対URLを登録してからデプロイ、その後すぐ送信テストを実施する。
このフローで進めれば、WordPress案件と同じ品質のフォームが短時間で実装できる。
コーディング代行・実装判断で詰まったら Build に振ってください。
HP制作・保守・改修で悩んでいる方は一度 Build にご相談ください。
