【Astro】WordPressからAstroで静的化したお問い合わせフォームの対応方法

TEDASKのToshi Seitoです。

最近、クライアントさん向けにWordPressのAstro化の対応をはじめましたが、WordPressのAstro化をはじめた当初、静的化に伴ってPHP処理が必要な機能についていくつかわからないことが出てきました。

その一つが、お問い合わせフォームによるメールの送信です。

今回はこのWordPressをAstro化する場合に、お問い合わせフォームの対応にはどのような選択肢があるかを共有したいと思います。

なぜそのままではお問い合わせフォームが使えないのか？

WordPressからAstroでページをを静的化する場合、基本的には生成されたページはそのまま表示されるので、見た目（入力欄）は表示されますが、中身（送信機能）は空っぽの状態です。

しかしながら、お問い合わせフォームにある送信ボタンをクリックしたあとにプログラムが走って、それによってメールが送信されるという処理をWordPressの場合はPHPが行っていますが、HTML/CSSで生成されたページは、PHPがそのまま使えない状況です。

そのため、Javascriptを利用して、そのメール送信処理をしてくれるバックエンドが必要になります。

そのバックエンドの役割として、フォームサービスを利用するか、今までのWordPressをサブドメインなどにしてヘッドレスとして処理させるかのどちらで対応することができます。

フォームサービスを利用するかWordPressのプラグインをそのまま使う

まず、静的ページのサイトの場合のお問い合わせフォームについては一般的には、フォームサービスを利用します。

例えば、日本のサービスですとSSGForm、海外のサービスだとFormspreeが上げられるかと思います。

またデザインにこだわらないのであれば、Googleフォームでも可能ではあります。

SSGFormやFormspreeについては、無料で送信できる数が50～100/月間ですので、もしこの数を超えるくらいのフォームからの送信がある場合は、有料プランが必須になります。

しかしながら導入は非常に簡単です。Astro化においても同様です。

もし、無料でかつサイトに合わせたデザインを施したWordPressのフォームをそのまま使いたいという場合は、Contact form 7であれば可能です。REST APIに対応しているためです。

Contact form 7であれば、今ままでのようにフォームの設定をそのまま使い続けることができます。

Contact form 7をそのまま流用できる

前述した通りContact form 7であれば、今WordPressでお使いのフォーム設定のままで使うことができます。

REST APIを使って「AstroからWordPressを呼び出す」

Contact Form 7（以下CF7）には、外部からフォームを投稿するための「REST API」という窓口が標準で備わっています。

これを利用することで、Astroで作った静的ページから、サブドメインなどで運用しているWordPressのCF7へデータを「投げる」ことができるようになります。

具体的な実装の手順は以下の通りです。

1. WordPress側: お問い合わせフォームを作成し、フォームIDを確認する。
2. Astro側: HTMLでフォームを作成し、JavaScriptのfetch関数を使って、WordPressのAPIエンドポイント（/wp-json/contact-form-7/v1/contact-forms/フォームID/feedback）にデータを送信する処理を書く。

このように、Astro側は「送信ボタンが押されたら、WordPressにデータを届ける」という仲介役を果たすだけで、実際のメール送信や自動返信は、これまで通りWordPress側のCF7がすべて処理してくれます。

【重要】ここが最大の落とし穴！「動かない」時のチェックリスト

「コードは合っているはずなのに、メールが送信されない……」 私が実際に実装した際、最も苦労したのがここでした。静的化ならではの「セキュリティの壁」がいくつか存在します。

1. CORS（アクセス拒否）の問題

Astroのドメイン（例：test.jp）からWordPressのドメイン（例：wp.test.jp）へデータを送る際、ブラウザのセキュリティ機能によって「別のドメインからの通信」としてブロックされることがあります。WordPress側の.htaccessなどで、メインドメインからのアクセスを許可する設定が必要です。

2. Basic認証によるブロック

WordPress本体をBasic認証で保護している場合、APIへのアクセスも認証を求められてしまい、送信に失敗します。API（/wp-json/）へのアクセスだけは認証を除外する設定を忘れないようにしましょう。

3. サーバーの国外アクセス制限

今回私が一番ハマったのが、エックスサーバーなどのレンタルサーバーにある「国外アクセス制限」です。GitHub Actionsなどの自動ビルドツール経由でテストを行う場合、サーバー側が「海外からの怪しいアクセス」と判定して遮断してしまうことがあります。

一時的に制限をオフにするか、特定のアクセスを許可する設定が必要です。

まとめ：Astro時代でもContact Form 7がそのまま利用できます

静的サイト化（Astro化）を進めると、今までのWordPressで当たり前に使っていた機能が制限されるのではないか、という不安はつきものです。

しかし、今回ご紹介したように、サイトの心臓部である「Contact Form 7」は、仕組みさえ整えればそのまま活用し続けることができます。

表示速度のために機能を削るというトレードオフの時代はもう終わりです。

WordPressの「管理のしやすさ」と、Astroの「圧倒的なスピード」は、REST APIという架け橋によって、高い次元で共存させることが可能だからです。

私自身のこのサイトもAstro化して運用していますが、一般的なWebサイトの運営において「妥協」を感じることはあまりありません。むしろ、セキュリティの向上と爆速のレスポンスがもたらす安心感の方が、遥かに大きなメリットだと確信しています。