【MW WP Form】お問い合わせフォームの設置方法を簡単解説

2022/03/28

WordPress

Webサイト上で、商品やサービス内容などの問い合わせ窓口として欠かせないのが「お問い合わせフォーム」です。

WordPressを導入したWebサイトにお問い合わせフォームを設置するときは、「MW WP Form」というプラグインの利用が便利です。専門知識がなくても、簡単にお問い合わせフォームの設置ができます。

本記事では、「MW WP Form」の特徴や基本設定について、簡単に解説します。

【Contact Form 7】お問い合わせフォームの設置方法を簡単解説

MW WP Formとは

MW WP Formは、WordPressのプラグイン（拡張機能）です。Webサイト内にお問い合わせフォームを設置する際に使用します。

お問い合わせフォームは、HTML・CSS・PHPを用いて作成することもできますが、専門知識を持っていないとプラグインを使用せずに設置するのは困難です。

MW WP Formは難しい操作なくフォームを設置できるため、多くのWebサイトに導入されています。

MW WP Formを使用したお問い合わせフォームの設置手順

それでは、MW WP Formを使用したお問い合わせフォームの設置方法について見ていきましょう。設置の大まかな流れは以下の通りです。

1. プラグインのインストール～有効化
2. フォームの作成
3. 確認画面・完了画面の設定
4. 自動返信メール／管理者宛メールの設定
5. フォームの反映（公開ページへの設置）

Step.1 プラグインのインストール～有効化

はじめは、プラグインのインストールを行います。

WordPressの管理画面（ダッシュボード）から、［プラグイン］→［新規追加］と進み、表示されたページの検索窓に「MW WP Form」と入力します。
検索結果に「MW WP Form」が表示されたら、［今すぐインストール］をクリックします。

インストールが完了したら、［有効化］をクリックします。プラグインが有効になると、管理画面に［MW WP Form］という項目が追加されます。フォームの設定はこの［MW WP Form］内で行います。

Step.2 フォームの作成

次はフォームを作成します。［MW WP Form］の［新規追加］をクリックすると、お問い合わせフォームの基本設定画面が表示されます。

タイトル欄には、作成するフォームの名前を入力します。フォームの管理に必要になるので、管理しやすい名前をつけましょう。

また画面右側にある［公開］ボタンは、フォーム内容の保存をする際に使用します。（※一度クリックすると「公開」→「更新」に変わります。）

入力項目の設定

それでは一般的なお問い合わせフォームに設定している項目を例に、簡易フォームを作成していきます。
今回のサンプルでは、4つの項目に対して、フォームタグ、nameは次のように設定します。

入力項目の追加は、フォームタグジェネレーターを使用すると簡単です。
名前入力欄をフォームタグジェネレーターを使って設定してみます。

まず、［メディアを追加］の下にある［選択してください］の中から［テキスト］を選択し、［フォータグを追加］をクリックします。

［フォームタグ追加］をクリックすると、画面上にダイアログが表示されます。［name］欄には設定項目専用の名前（日本語も可）を付けましょう。今回は「your-name」と付けます。
その他の項目は、必要に応じて入力します。

入力が終わり［Insert］をクリックすると、項目設定エリア内にタグが追加されます。

同様の手順で、メールアドレス入力欄などのタグも追加していきます。

選択項目（チェックボックス／ラジオボタン／セレクトボックス）の設定

サンプルの「お問い合わせ内容選択」のように、ユーザーに複数の選択肢の中から該当項目を選んで回答をしてもらう項目には、［チェックボックス］［ラジオボタン］［セレクトボックス］のいずれかを使用します。

• 【チェックボックス】選択肢の中から該当する項目をいくつでも選んで（複数選択）回答する方式
• 【ラジオボタン】選択肢の中から該当する項目を1つ選んで回答する方式（選択肢が少ない場合に使用することが多い）
• 【セレクトボックス】選択肢の中から該当する項目を1つ選んで回答する方式（選択肢が多い場合に使用することが多い）

ユーザーに回答してもらう選択肢は、［選択肢］欄に一行に1つの選択肢を設定してください。

確認／送信／戻るボタンの設定

入力項目の設定が完了したら、画面遷移（入力画面→確認画面など）するためのボタンを設定します。

• 【確認ボタン】入力画面から確認画面への遷移
• 【戻るボタン】確認画面から入力画面への遷移
• 【送信ボタン】確認画面から完了画面への遷移

ボタンは、フォームタグジェネレーターの［ボタン項目］から該当するものを選び、タグを作成します。
※ボタン項目には「button」「input」の2種類がありますが、どちらを使用しても動作に違いはありません。本記事では「button」を使用しています。

バリデーションルールの設定

入力項目、画面遷移ボタンの設定が終わったら、画面下部にあるバリデーションルールを設定しましょう。（バリデーションとは「検証」という意味です。）
ここでは、入力が必須の項目や、メールアドレス欄にメールアドレス形式以外の入力があった場合にエラーになるなどのルール設定ができます。

バリデーションルールの設定は、［バリデーションルールを追加］をクリックし、右横の下矢印を展開すると、ルール設定画面が表示されます。
［バリデーションを適用する項目］欄に、［name］の値（設定項目で付けた名前）を入力し、必要なルール設定をします。

Step.3 確認画面・完了画面の設定

次は、フォーム送信完了後のページに表示させるメッセージと、各画面（入力画面／確認画面／完了画面）のURL設定方法について解説します。

完了画面メッセージの設定

ユーザーがフォームを送信したあとに完了画面に表示されるメッセージは、「完了画面メッセージ」内で設定します。

メッセージには、お問い合わせ内容に対する今後の流れなどを明記するといいでしょう。サンプルを用意しましたので、ご自由にアレンジしてお使いください。

入力画面／確認画面／完了画面のURL設定

お問い合わせフォームの「入力画面」「確認画面」「完了画面」は、設定を行わなければ同じURL内で画面が遷移します。
それぞれ個別のURLを設定したい場合は、［URL設定］欄に各ページのアドレスを入力します。入力するアドレスは、固定ページの「パーマリンクURLスラッグ」と一致させる必要があります。

今回は「確認画面」「完了画面」を「入力画面」の子ページにしたいので、次のように入力します。

※固定ページは、Step5で作成します。

Step.4 自動返信メール／管理者宛メールの設定

次は、フォームから送信があった際に、フォームを送信したユーザーとサイト管理者に対して送るメールの設定を行います。

自動返信メール（ユーザー宛）

［自動返信メール設定］欄では、フォームを送信したユーザー宛に送るメールの設定ができます。本文には、メッセージを受け付けた旨や、お問い合わせ内容への返答期限などを記載しておくと親切です。

「*」マークがある4項目（件名／送信者／本文／自動返信メール）の設定は必須です。

自動返信メール本文のサンプルを用意しましたので、ご自由にアレンジしてお使いください。

管理者宛メール

［管理者宛メール設定］欄では、フォームからお問い合わせがあった際に、サイト管理者へ送るメールの設定ができます。

「*」マークがある4項目（件名／送信者／本文／自動返信メール）の設定は必須です。

Step.5 フォームの反映（公開ページへの設置）

必要な設定が完了したら、［公開］ボタンをクリックして内容を保存します。保存ができたら画面右側の「フォーム識別子」に記載されているショートコードをコピーしておきます。このショートコードは、このあと作成する固定ページすべてに貼り付ける必要があります。

固定ページの作成

それでは、フォームを反映させる固定ページを作成しましょう。

［固定ページ］→［新規作成］と進み、タイトルを入力します。次にブロックエディターの［ショートコード］に、先ほどコピーしたショートコードを貼り付けます。
※ここまでは、「入力画面」「確認画面」「完了画面」共通です。

次にパーマリンクのURLスラッグ（アドレス）を入力します。各ページのアドレスは「URL設定」に入力したものと同じになるように設定します。

このとき、子ページにあたる「確認画面」と「完了画面」は、［ページ属性］で親ページに「入力画面」を指定します。

公開

固定ページの作成が完了したら、ページを公開します。

フォームが反映されたら、実際にフォームから送受信を行い、動作や誤字脱字などの問題がないかを、必ずテストを行って確認しましょう。

以上で、フォームの設置は完了です。

まとめ

今回はWordPressプラグインの「MW WP Form」について解説しました。MW WP Formは、専門知識不要で利用ができ、設定可能な項目も充実しているので、お問い合わせフォームを簡単に設置できます。
確認画面・完了画面の設定もできるので、ぜひ利用してみてください。