Webサイトには必ずと言っていいほど「お問い合わせフォーム」が設置されています。
WordPressでお問い合わせフォームを作成するプラグインは色々ありますが、弊社では「MW WP Form」を利用することが多いです。

そこで今回は、HTMLで静的に作成したお問い合わせフォームを「MW WP Form」を利用してWordPress化する手順を解説していきます！

MW WP Formを使って静的コーディングをWordPress化する流れ

まずはざっくりと流れを確認しましょう！
以下のようなステップで構築していきます。

1. デザイン通り静的コーディング
2. WordPressをインストールし、プラグインのMW WP Formをインストール・有効化
3. MW WP Formを使用して静的コーディングのフォーム部分を動的化
4. 自動返信メールおよび管理者宛メールの設定
5. 固定ページでお問い合わせ入力画面・確認画面・完了画面の３つを作成し、それぞれのページにMW WP Formで作成したショートコードを設置

なんとなく流れが分かったところで、実際にそれぞれのステップについて具体的に見ていきましょう！

デザイン通り静的コーディングをする

まずはデザイン通り静的コーディングします。

この際に注意することがあります。

MW WP Formを使用して静的コーディングのフォーム部分を動的化する場合、MW WP Formで用意されているショートコードを使用して動的化していきます。

注意点は、MW WP Formのショートコードが出力するHTML構造を事前に把握しておくことです。

これを知らないで独自のHTML構造でコーディングしていた場合、WP WP Formで動的化したときにスタイルが上手く適用されなくなる可能性があります。
そうなった場合、JSでクラスを無理矢理付与したり、HTML構造をMW WP Formに合わせた構造に変えてコーディングし直すことになり効率が悪いです。。

これを回避するためには、事前にMW WP Formが出力するHTML構造を把握し、同じHTML構造でコーディングをすることです！

[HTML]

筆者はこのHTML構造に対してcssをあて、以下のようにしてみました。

さて、HTMLコーディングが終わったところでさっそく、MW WP Formを使用していきましょう！

WordPressをインストールし、プラグインのMW WP Formをインストール・有効化

静的コーディングが完了したらWordPressをインストールして管理画面にログインしましょう。

ログインできたらプラグインの「新規追加」から、MW WP Formを追加し有効化します。

MW WP Formを使用して静的コーディングのフォーム部分を動的化

いよいよMW WP Formを使っていきます。

まず、左のサイドバーの「MW WP Form」の「新規追加」をクリックします。

移動先のページにて、タイトルを設定し、先ほど紹介したHTMLを貼り付けます。
タイトルはわかりやすいものであればなんでもOKです。

完了したら、公開ボタンをクリックしましょう。

公開すると、公開ボタンから「更新」ボタンに変わります。

つづいて、MW WP Formのショートコードを使用して貼り付けたHTMLを変えていきます。
変えていく場所は、ラジオボタンやテキストエリアなどのユーザが入力・選択する項目です。

ラジオボタン

まずはラジオボタンから変更してみましょう！

以下の赤枠エリアがラジオボタンに相当するので、MW WP Formで用意されているラジオボタン用のショートコードで置き換えます。

まず、以下の１をクリックします。

続いて、２の「ラジオボタン」をクリックし、３の「フォームタグを追加」をクリックします。

そうすると、以下の赤枠のモーダルが出現します。
このモーダルのうち、緑枠を以下のように入力します。

入力が完了したら、モーダル内の右下にある「Insert」ボタンを押すのですが、
このまま押すとおそらく変なところにショートコードが挿入されてしまいます。
それを防ぐために、以下のようにショートコードを挿入するために一行空け、カーソルが赤丸にある状態で「Insert」ボタンを押しましょう。

うまくいくと、以下の左のような状態になると思います。
※ならなかったら該当箇所をカットしてコピペで移動させましょう。

以下の緑枠はもう不要なので削除します。
最終的に以下の右のようになっていればOKです。

ラジオボタンが完成したので、続いてテキストの入力項目も変えていきましょう！

テキスト

ラジオボタンのときと同じ要領でショートコードを作成します。
以下のキャプチャを参考に進めてみましょう！

最終的に以下のようになっていればOKです！

他にもメール項目や電話の項目、テキストエリアの項目があります。
それらについても同じ要領でMW WP Formのショートコードに置き換えましょう！

ここまでで、以下のような構造になっていればOKです！

確認・戻る・送信ボタン

最後に、確認・戻る・送信ボタンをショートコードで置き換えます。

注意点は、ボタン項目が「button」と「input」の２つあることです。
しかし、使うのは赤枠の「button」の方でOKです。

buttonの方を使用して以下のように置き換えましょう！

以上で、MW WP Formを使用して静的コーディングのフォーム部分を動的化できました。
つづいて、メールの文言設定を行っていきます。

自動返信メールおよび管理者宛メールの設定する

まずは自動返信メール設定から行っていきましょう。

自動返信メール設定

自動返信メールは以下の赤枠です。これからこのエリアを埋めていきます。

項目が色々ありますが、設定すべき項目は以下の4か所です！

• 件名

• 送信者

• 本文

• 自動返信メール

「件名」と「送信者」に関しては、今回は以下のように設定しました。
自動返信メールは、お問い合わせしたユーザに送信されるメールです。
そのため、ユーザ目線になったときにわかりやすい件名にするのがいいでしょう。

つづいて、「本文」は以下のように設定しました。

上記の波括弧「｛｝」で囲んでいる部分の中身は、先ほどMW WP Formのショートコードを作成したときに設定したname属性の値と一致していなければいけません。

次に、「自動返信メール」は、ユーザが入力したメールアドレスに送信するために以下のように設定します。
この値も、name属性と一致させる必要があります。
今回のサンプルの場合、メール入力項目のname属性は「email」なのでそれと同じにしているというわけです。

以上で自動返信メール設定が完了しました。
以下のような状態になっていればOKです！

管理者宛メール設定

続いて、管理者宛メールを設定していきます。
自動返信メールは以下の赤枠です。これからこのエリアを埋めていきます。

項目が色々ありますが、設定すべき項目は以下の4か所です！

• 送信先（E-mailアドレス）

• 件名

• 送信者

• 本文

「送信先（E-mailアドレス）」と「件名」、送信者は以下のように設定しました。
※「送信先（E-mailアドレス）」は、管理者のメールアドレスなどを設定しましょう。

続いて、本文は以下のように設定しました。

以上で管理者宛メールの設定は完了です！
以下のように設定されていればOKです！

これでだいたい設定は完了したのですが、あと少しだけ設定項目があります！

URLを設定をする

お問い合わせの入力画面、確認画面、完了画面のURLをそれぞれ設定します。
今回は、以下のように設定しました。

このあと固定ページを作成していきますが、その固定ページのスラッグが上記の構成になるように作成する必要があります。

バリデーションルールを設定する

必須の入力項目がある場合は、バリデーションルールを設定します。

追加の仕方は以下の通りです。
まず、１をクリックし、２をクリックします。
すると以下の緑枠が表示されます。

たとえば、電話番号とメールアドレスの場合は以下のように設定します。
注意点は、「バリデーションを適用する項目」に設定する値は、MW WP FormでHTMLを置き換えたときに設定したname属性の値と一致させることです。

これと同じ要領で、他の入力項目についてもバリデーションを追加していきましょう。

以上で、MW WP Formに関する項目はすべて完了しました！
続いて、固定ページを作成していきます！

固定ページを作成する

これまでMW WP Formで色々と設定してきましたが、それだけでは意味がありません。
作成したMW WP Formを画面に表示するためのページがまだないからです。

ここからは、そのページを作成していきます。

まず、MW WP Formで入力画面・確認画面・完了画面の3つのURLを以下のように設定しましたね。

そのため、固定ページは上記のスラッグおよび階層構造である必要があります。

今回、それら固定ページを作成すると以下のような構成になります。

これら3ページをこれから作成していきます。

入力画面を作成しよう

まずは親にあたる「/contact/」のページを作成します。

上記の番号についてそれぞれ説明します。

①
タイトルを設定します。

②
URLスラッグを設定します。
今回は「contact」としています。
これはMW WP Formの入力画面URLと一致させる必要があります。

③
作成したMW WP Formのショートコードを、ブロックエディタの「カスタムHTML」を利用して貼り付けます。

MW WP Formのショートコードというのは、以下で確認できます。
※以下の画面には「お問い合わせフォーム」が2つありますが気にしないでください。

確認画面を作成しよう

続いて、確認画面を作成します。

上記の番号についてそれぞれ説明します。

①
タイトルを設定します。
ここは入力画面と同じタイトルでもOKです！

②
URLスラッグを設定します。
今回は「confirm」としています。
これはMW WP Formの入力画面URLと一致させる必要があります。

③
作成したMW WP Formのショートコードをブロックエディタの「カスタムHTML」を利用して貼り付けます。

④
このページのURLを「/contact/confirm/」にするために、親ページを、先ほど作成した入力画面に設定します。

先ほど作成した入力画面のスラッグは「contact」でしたね。
そのため、親ページをこのように設定することで、確認画面のURLは「/contact/confirm/」になるというわけです。

完了画面を作成しよう

最後に完了画面を作成します。

これは、確認画面作成と同じ要領で作成できるので手順については省略します。

注意点としては、以下の通りです。

• 完了画面のスラッグは「finish」

• 親ページを設定

• MW WP Formのショートコードを忘れずに貼り付ける

上記のうち、最後の項目を忘れがちなので注意しましょう。

完了画面にはフォームの入力項目が存在しなため、MW WP Formのショートコードを貼り付けなくてもいいような気がしますが、これを忘れると正しく動作しません。

つまり、お問い合わせフォームに関連する入力画面・確認画面・完了画面すべてのページに、ショートコードを貼り付ける必要があります。

最後に確認すること

以上ですべての設定が完了しました！

あとは、実際にお問い合わせ入力画面から値を入力して送信テストしたり、バリデーションがちゃんと機能するかを確認してみてください！

なお、ローカル環境で送信テストするとメールの送受信ができません。

プラグインを入れるとローカル環境でもできたりしますが、ローカルではなく実際のテストサーバなどの環境で実施すると問題なく確認できます。

まとめ

ここまでお疲れ様でした。
今回の手順について改めておさらいしておきます。

1. デザイン通り静的コーディング
2. WordPressをインストールし、プラグインのMW WP Formをインストール・有効化
3. MW WP Formを使用して静的コーディングのフォーム部分を動的化
4. 自動返信メールおよび管理者宛メールの設定
5. 固定ページでお問い合わせ入力画面・確認画面・完了画面の３つを作成し、それぞれのページにMW WP Formで作成したショートコードを設置

上記のそれぞれのステップで注意点もいくつかありましたね。

特に、静的コーディングの段階でMW WP Formに合わせたコーディングをしていないと開発効率が悪くなるので要注意です！

お問い合わせフォームの実装要望はとても多いので、ぜひこの記事を通してマスターしていただければ幸いです。