静的サイトはWordPressなどのCMSと比べて表示速度も速く安全ですが、お問い合わせフォームの実装が一手間です。
（WordPressならcontact form7などのプラグインがありますが、静的サイトではなかなかありません。）
そこで今回は、Astroで制作している当方事業所サイトの方に、SSGformを試してみました。
本記事では、選んだ理由と使用してみた感想、簡単な実装方法をお伝えします。
静的サイトの実装・運用でお問い合わせフォームの実装に悩んでいる方の助けになれば幸いです。
SSGformとは？
SSGformは、静的サイトやSSG向けのフォーム送信サービスです。
バックエンドを用意せずにHTMLフォームのactionを専用URLに差し替えるだけで運用できるのが特徴です。
送信されたデータはメールで送られてくるため、サーバー側での保存や管理画面構築は不要です。
また、reCAPTCHA対応や自動返信メール機能、Slack通知などにも対応しています。
無料プランでも月100件まで利用でき、小規模なサイトやポートフォリオ、企業の問い合わせフォームには十分なスペックです。
特別なJavaScriptやライブラリの導入も不要で、HTMLの基本知識さえあれば導入できます。
SSGformを選んだ理由
静的サイトに簡単に取り入れられるフォームとして、よくあげられるのは以下の3つです。
- SSGform
- formrun
- Googleフォーム
簡単な特徴をまとめてみました。
| 比較観点 | SSGform | formrun | Googleフォーム |
|---|---|---|---|
| 実装方法 | actionを専用URLに差し替え | 埋め込み | 埋め込みまたはリンク設置。 |
| デザイン自由度 | 既存マークアップとCSSをそのまま適用しやすい。 | 豊富なテンプレートの中から選択。 | テーマから選択。細かい設定は不可。 |
| バックエンド | 不要 | 不要 | 不要 |
| データ保存 | メールのみ | 管理画面で一覧管理 | Googleドライブ内で保存 |
| スパム対策 | reCAPTCHA対応 ハニーポット等の軽量対策 | reCAPTCHA対応 独自スパムフィルタ | Google側の保護 |
| 自動返信 | 制限有 | 制限有 柔軟な設定が可能 | 自動返信は基本なし 回答コピー送付程度 |
| 送信後の遷移 | 設定可能 | 設定可能 | 既定ページへ自動遷移 |
| 料金 | 基本機能だけなら無料 | 基本機能だけなら無料 | 無料 |
当方の事業サイトはAstro＋Bootstrapで構築しています。
そのため、既存のデザイン性を崩さずに、自由にBootstrapのコンポーネントを当てられる点を優先しました。
formrun、Googleフォームも使いやすいサービスではありますが、デザインの自由度の面から今回は見送りとなりました。
無料枠でも制限こそあるものの、提供している全ての機能が使えるのは魅力的です。
また、reCAPTCHAに対応しておりスパムも最低限カバーできるのも良かったです。
SSGformのメリット・デメリット
SSGformのメリット
SSGformを使ってみて感じた主なメリットは以下のとおり。
- デザインの自由度が高い
- 実装が非常に簡単
- 無料プランで十分
- 基本的なスパム対策も充実している
- データ管理リスクが低い
詳しく説明していきます。
デザインの自由度が高い
既存のHTMLとCSSをそのまま使えます。
例えば今回のようなAstro＋Bootstrap構成でもform-controlやbtnなどのクラスを自由に指定でき、細かい部分まで好みのデザインにカスタマイズできます。
実装が非常に簡単
HTMLフォームのactionを発行URLへ差し替えるだけで機能します。
バックエンドやAPIエンドポイントなどの用意が不要なので非常に簡単です。
細かい部分の設定方法も公式サイトに詳しく掲載されているので簡単に実装できます。
無料プランで十分
無料プランで自動返信が月100件まで使えます。
毎日3件までお問い合わせが来ても耐えられる計算です。
それ以上のお問い合わせが来るようになってもプランを変更すれば良いだけなので、料金こそ発生しますが更新も簡単です。
また、スパムで弾いたメールはこの件数にカウントされないので、悪意のある攻撃によって使えなくなる心配もありません。
なおかつ、無料プランで全ての機能が使えるのも◎。
基本的なスパム対策も充実している
reCAPTCHAに対応しており、導入手順がシンプルです。
ハニーポットやNGワードなどの軽量対策を併用すれば、静的サイトでも実用的な防御が可能です。
過剰なJSや外部サービス連携に頼らず、必要最低限で効果を出せます。
データ管理リスクが低い
SSGformはサーバー側に送信内容を保存しない仕様です。
個人情報を保管しないため、漏えいのリスクなどがありません。
データ容量を機にする心配もありません。
SSGformのデメリット
SSGformを使って見て感じたデメリットは以下のとおり。
- 送信履歴が残らない
- 高機能な管理・分析がない
- 自動返信の上限がある
- スパム対策の範囲が限定的
詳しく説明していきます。
送信履歴が残らない
「データ管理リスクが低い」というメリットをあげましたが、逆にいうとデータ保存がないということです。
万が一メールが届いていない場合などに確認する手段がありません。
対策としてメールの送信先を複数設定したり、Slack通知など外部で補う必要があります。
高機能な管理・分析がない
ステータス管理、ダッシュボード分析、CSV一括出力などの機能はありません。
小規模な案件では問題ありませんが、マーケ用途の可視化やナレッジ化を重視する場合、別システムが必要になります。
自動返信の上限がある
無料プランは自動返信が月100件までです。
キャンペーン期やアクセス急増時は上限到達リスクがあります。
スパム対策の範囲が限定的
reCAPTCHAと簡易対策が中心です。
reCAPTCHAは最近有料化したので代替案が欲しいところ。
Cloudflare Turnstileなど設定できるとありがたいです。
とはいえ、デメリットは「こんな案件の時どうしよう。」と感じたものです。
特に採用関係の案件の時はお問い合わせの分析を求められることもあるので。
小規模な、シンプルなお問い合わせ実装の際には特にデメリットを感じることもなく使用できるのではないかと思います。
SSGformの実装方法
これまで説明したとおり、SSGformの実装方法は単純です。
新規登録してURLを発行し、既存フォームのactionに貼り付けるだけです。
一応、詳しい解説は下記サイトが参考になりました。
- しばらく更新されていませんでしたが仕様は同じです。
その他、使用言語ごとの詳しい実装方法は公式サイトにも掲載されています。
参考はAstroですが他の言語も掲載されています。
おわりに
静的サイトは表示が速く安全ですが、問い合わせフォームの実装は一手間かかります。そこでSSGformを使うと、フォームのactionを専用URLに差し替えるだけで動作し、既存のHTMLやCSSをそのまま活かせるのでデザインを崩しません。通知はメール中心で、自動返信は無料でも月100件まで使えます。フォーム送信自体は無制限です。
小〜中規模の問い合わせや、個人情報をサイト側に保存したくない運用に向いています。一方で送信履歴が残らず、管理や分析の機能も多くはありません。未達や見逃しを避けるために複数宛先やSlack通知を併用し、必要に応じてCRMや分析基盤を組み合わせるのが現実的です。
まとめると、軽さと自由度を重視する静的サイトにはSSGformがちょうどよい選択だと感じます。
