静的化したWordPressサイトでお問い合わせフォームを使う方法

# 静的化したWordPressサイトでお問い合わせフォームを使う方法

WordPressを静的化すると、Contact Form 7のようなプラグインで作ったお問い合わせフォームは、そのままでは送信できなくなります。この記事では、なぜ動かなくなるのかという理由と、静的サイトでも動く仕組みへの置き換え方を、このサイト自身がContact Form 7からSSGformとCloudflare Turnstileへ置き換えた経験をもとに解説します。

公開前に、生成元・画像・リンクを確認してから書き出すと、後戻りを減らせます。

静的化後は、フォームや検索など動的機能の動作を必ず別途確認してください。

なぜ静的化するとフォームが動かなくなるのか

なぜ静的化するとフォームが動かなくなるのかで確認すべきポイントを整理します。

Contact Form 7のようなプラグインは、送信ボタンが押されたタイミングでPHPのプログラムが動き、入力内容をメールとして送信します。この処理には、WordPress本体とデータベースが常に動いていることが前提になっています。静的化した後のサイトは、あらかじめ用意されたHTMLファイルを配信するだけなので、PHPを実行する仕組み自体が存在しません。フォームの見た目は表示されても、送信ボタンを押した瞬間に何も起こらない、という状態になります。

静的サイトでフォームを動かす2つの方向性

静的サイトでもフォームを動かす方法は大きく2つあります。ひとつは、フォームの送信処理だけを担ってくれる外部サービスを使う方法、もうひとつは、自分でサーバーレス関数のような仕組みを用意する方法です。多くのサイト所有者にとって手軽なのは前者なので、この記事でも外部サービスを使う方法を扱います。

フォーム送信サービスを選ぶときに確認すること

フォーム送信サービスを選ぶときに確認することで確認すべきポイントを整理します。

外部のフォーム送信サービスを選ぶときは、次の3点を確認しておくと選びやすくなります。

• 送信された内容をメールで通知してくれるか
• スパム対策の仕組み（Turnstileのようなbot対策）と組み合わせられるか
• 送信後にサンクスページへリダイレクトできるか

このサイトでは、SSGformというサービスを使ってこの3点を満たしています。特定のサービスが唯一の正解というわけではなく、この3つの条件を満たせるサービスであれば、他の選択肢でも同じ考え方が使えます。

フォーム送信サービスの設定

フォーム送信サービスの設定で確認すべきポイントを整理します。

サービス側での設定は、おおむね次の流れになります。まず送信先のエンドポイントを作成し、通知を受け取るメールアドレスを登録します。次に、送信完了後に表示させたいサンクスページのURLを設定します。この2つがそろえば、静的なHTMLフォームからの送信を受け取れる状態になります。

スパム対策の考え方

フォームを公開すると、人ではなく機械的なプログラムからの送信、いわゆるスパムが届くようになります。このサイトでは、画面には表示されない入力欄を用意し、そこに何か入力があった送信は自動的に無視する「ハニーポット」という仕組みと、Cloudflare Turnstileという人の操作かどうかを判定する仕組みを組み合わせています。

Cloudflare Turnstileの設置

Cloudflare Turnstileの設置で確認すべきポイントを整理します。

Cloudflare Turnstileを使うには、まずCloudflareのアカウントでサイトキーとシークレットキーを発行します。サイトキーは静的HTML側に埋め込んで表示用のウィジェットを出すために使い、シークレットキーはサーバー側での検証に使います。

静的HTML側には、Turnstileの読み込みスクリプトとウィジェットを表示するための要素を追加します。見た目は小さなチェックボックスのような形で表示され、多くの場合は利用者が意識せずに完了します。

フォーム送信サービス側でのシークレットキー登録

サイトキーをHTML側に置く一方、シークレットキーはフォーム送信サービス側の管理画面に登録し、送信内容が正しい操作を経て届いたものかどうかの検証を任せます。どちらか一方だけでは機能しないため、両方を対にして設定する必要があります。

WordPress生成元への反映で気をつけること

WordPress生成元への反映で気をつけることで確認すべきポイントを整理します。

ここが、実際に運用してみて一番つまずいたところです。静的化はWordPress側の固定ページを書き出して作られるため、WordPress側の設定を変えないままだと、次に書き出したときにまたContact Form 7のフォームへ戻ってしまいます。恒久的に直すには、WordPressの固定ページ自体を、新しいフォームのHTMLに置き換える必要があります。

このとき、貼り付ける場所を間違えると思わぬエラーが起きます。フォームのHTMLを、Contact Form 7のテンプレート編集欄にそのまま貼ると、Contact Form 7が自動的に付け足す外側の`

`タグと入れ子になってしまい、フォームとして正しく機能しません。正しくは、固定ページ本体のカスタムHTMLブロックに、フォームの完全なHTMLを貼り付けます。この違いに気づかず、しばらく二重構造のフォームが公開された状態になっていたことがありました。

置き換えが完了したら、Contact Form 7プラグイン自体を無効化・削除して、次回以降の静的化で古いフォームに戻らないようにしておきます。

公開後に確認すべきこと

公開後に確認すべきことで確認すべきポイントを整理します。

設定が終わったら、公開前に必ず実際に送信テストを行います。確認するのは次の3点です。

• 通知メールがきちんと届くか
• 送信後にサンクスページへ遷移するか
• Turnstileを完了しない状態や、無効なトークンでの送信が拒否されるか

本番ドメインへ切り替える前、プレビュー用のドメインで確認する場合は注意が必要です。フォーム送信サービス側で送信元ドメインを制限していると、プレビュードメインからの送信が拒否されることがあります。このサイトでも実際に遭遇し、送信元ドメインの許可リストにプレビュードメインを追加することで解決しました。

よくある質問

よくある質問で確認すべきポイントを整理します。

Q. 静的化したサイトでContact Form 7はそのまま使えますか？

A. 単体では使えません。送信処理はPHPとデータベースに依存しているため、静的化したHTMLだけでは動作しません。フォームの見た目は表示されますが、送信ボタンを押しても処理が行われない状態になります。

Q. Cloudflare TurnstileとreCAPTCHAはどう違いますか？

A. どちらもスパム対策の仕組みですが、Turnstileは利用者が文字入力や画像選択をしなくても完了しやすいことが特徴です。細かな機能の比較はこの記事では扱いませんが、このサイトではTurnstileを採用しています。

Q. フォームを静的化のたびにContact Form 7へ戻さないためにはどうすればいいですか？

A. WordPress側の固定ページ自体を、新しいフォームのHTMLに置き換える必要があります。静的化のたびに書き出される元データを直しておかないと、何度でも古いフォームに戻ってしまいます。

Q. ハニーポットとは何ですか？

A. 画面には表示されない入力欄をフォームに用意し、そこに何か入力があった送信を自動的に無視する仕組みです。人の目には見えないため、機械的なプログラムからのスパム送信だけを判別しやすくなります。

Q. フォーム送信のテストはどのタイミングで行うべきですか？

A. 本番ドメインが確定してから行うのが確実です。プレビュードメインで確認する場合は、送信元ドメインの許可設定によって送信が拒否されることがあるため、あわせて確認しておく必要があります。

まとめ

まとめで確認すべきポイントを整理します。

静的化したサイトのフォーム対応は、送信処理を外部サービスに任せること、Turnstileでスパム対策を組み合わせること、そしてWordPress側の生成元を書き換えて元のフォームに戻らないようにすることの3つで成り立っています。このサイトでも実際にこの3つを順番に対応することで、静的化後もフォームを使い続けられる状態にしています。

確認項目	公開後の確認内容
通知メール	送信内容が受信できること
サンクスページ	送信後に正しく遷移すること
スパム対策	Turnstile未完了時の送信が拒否されること