【WordPress】ローカル環境でお問い合わせフォームの送信テストをする方法

WordPressでサイトを構築する際、問題のひとつになるのが「コンタクトフォームのテストをどうするか」という問題。

プライベートで作っているサイトや、ごくシンプルなフォームであれば本番環境でサクッとテストしてしまうのもアリでしょう。けれど、例えば、フォームの回答内容によって自動返信の内容を分岐させたり、フォームの仕様自体が複雑になってくると、やはり送受信テストが必要になってきます。

今回、WordPressのローカル環境構築ツールである「Local by FlyWheel」のデフォルト機能で、超簡単にコンタクトフォームからの送信テストをする方法をご紹介します。

なお、Local by Flywheelについては「Bitbucketでローカル環境のWordPressをバージョン管理する方法」という記事でもご紹介しているので、詳細が気になる方はぜひ見てみてください。これほどカンタンにWordPressをローカルに構築できるツールはないと思います。

主な手順

Local by Flywheelで作ったローカル環境でコンタクトフォームの送受信をする主な手順は以下のとおりです。

Local by Flywheelでローカル環境でWordPressを立ち上げているということを前提に進めていきます。ローカル環境を作ること自体はさほど難しくないので、ググりながらやれば大丈夫かと思います。

今回は、WordPressのコンタクトフォームにおける定番プラグイン「Contact Form 7」を使いました。

特にツールの種類は関係ないと思うので、その他の「MW WP Form」とかでも問題ないと思います。（すみません、詳しくチェックはしていませんが…。）

サイト内に1つ以上のコンタクトフォームを作り、ショートコードを埋め込むなどして、ページに表示させます。その後、実際にフォームが送れているかどうか、返信内容が意図したものになっているかどうかをテストしていきます。

実際にコンタクトフォームの送受信内容を確認していきたいのですが、SMTPサーバの用意ができていないので、普通にWordPressをローカル環境で作っただけではメールの送受信が行えません。

ですが、Local by Flywheelでは「Mail Hog」というローカル環境でメールの送受信がおこなえるツールと連携していて、デフォルトでその機能を使うことができます。実際に試してみましょう。

こちら、Local by Flywheelのダッシュボードです。左のカラムに構築したローカルサイトの一覧が表示されています。

このダッシュボードのメニューにある「UTILITIES」を選択します。すると、上記の画像のように「Mail Hog」の表記と「OPEN MAILHOG」というリンクが表示されるので、それをクリック。

すると、下のようなMailHogの画面が立ち上がります。まだ何も送信していない状態では、このようにメッセージはありません。

ためしに、さきほど設置したコンタクトフォームからメールを送信してみます。すると、このようにコンタクトフォームに設定しておいた自動返信メールがこのように送られてきます。

上記の場合、受信側（サイト管理者）のメール（1）、発信側（コンタクトした側）のメール（2）にそれぞれ自動返信メールを設定していたので、その2通が届いています。コンタクトフォームのメールアドレス欄にいかなるアドレスを入力したとしても、それをキャッチし、こちらで受信メールとして表示されます。

また、メールを選んでクリックすると、もちろん本文も確認できます。プレーンテキストとソースの2種類を選べるのも嬉しいです。

注意

なお、こちらに届いたメールは一定期間（詳細は測っていません）経つと自動で消えてしまうので、その点は注意が必要です。

Local by Flywheelを使ってWordPressをローカル環境に構築すると、MailHogというツールを利用してコンタクトフォームの送信テストが行えます。

ちょっと凝ったフォームを実装したり、自動返信の内容が複雑な場合テストは必須になってくるので、ぜひこちら参考にしてみてください。