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

WordPress
まるこ
まるこ

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

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

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

MW WP Formとは

MW WP Form

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

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

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

MW WP Formの特徴

  • 確認画面・完了画面の設定ができる
  • 自動返信メールの設定ができる
  • お問い合わせ内容をデータベースに保存できる(保存データは、CSV出力やグラフ表示が可能)
  • 作成したフォームのショートコードを公開したいページに貼り付けるだけで設置できる
  • 質問事項に対するユーザーの回答によって、入力項目の表示内容を変更する条件分岐機能がある
  • 日本人の開発者が作成したプラグインで、日本語マニュアルがある

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
メールアドレスメールyour-email
お問い合わせ内容選択ラジオボタンradio-btn
お問い合わせ内容詳細テキストエリアyour-message

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

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

フォームタグの追加画面

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

フォームタグ追加ダイアログ表示画像
名前入力欄設定の例

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

設定項目入力エリア内にフォームタグが追加された例

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

選択項目(チェックボックス/ラジオボタン/セレクトボックス)の設定

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

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

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

選択肢の設定画面
チェックボックス、ラジオボタン、セレクトボックスの設置例
選択項目の設置時の表示例

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

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

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

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

フォームタグジェネレーターのボタン項目

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

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

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

バリデーションルール設定画面
メールアドレス入力欄のバリデーションルール例

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

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

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

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

完了画面メッセージ設定

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

メッセージサンプル

送信完了

この度は、お問い合わせをいただき、誠にありがとうございます。
お問い合わせ内容を確認の上、3営業日以内にご連絡致します。
また、ご入力いただいたメールアドレス宛に、自動返信メールをお送りしておりますので、ご確認ください。
※自動返信メールが届かない場合、お問い合わせが正しく受け付けできていない可能性がございます。恐れ入りますが、下記宛にメールまたはお電話にて、ご連絡くださいますようお願い申し上げます。

MWWPテスト株式会社
E-mail:example@mwwptest.com
Tel:00-1111-****(営業時間 9~17時/土日祝除く)

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

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

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

入力画面URL/contact/
確認画面URL/contact/confirm/
完了画面URL/contact/thanks/
URL設定画面

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

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

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

自動返信メール(ユーザー宛)

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

件名 *自動返信メールの件名
送信者 *自動返信メールの送信者名
Reply-to(メールアドレス)空欄可。自動返信メールへ、ユーザーが返信する際のアドレス設定
本文 *自動返信メールの本文。{}で囲まれた部分には、フォーム作成で設定した[name]の値(your-name等)を入力すると、ユーザーがフォームで入力した値が自動的に挿入される。
自動返信メール *自動返信メールの送り先。フォーム作成の「メールアドレス」欄で設定した[name]の値を入力。(本サンプルの[name]値はyour-email)
送信元(E-mailアドレス)空欄可。空欄の場合、自動的にシステムのアドレスが使用される。(別途設定が必要な場合のみ入力)

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

自動返信メール設定画面

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

自動返信メール本文サンプル

※本メールは、お問い合わせフォームからお問い合わせいただいた方へ
システムより自動で返信しております。

{your-name}様

この度は、MWWPテスト株式会社にお問い合わせをいただき、誠にありがとうございます。
以下の内容にて、お問い合わせを承りました。
お問い合わせ内容を確認の上、3営業日以内に担当の者よりご連絡させていただきます。

━━━お問い合わせ内容━━━

お名前:{your-name}

メールアドレス:{your-email}

お問い合わせ内容選択:{radio-btn}

お問い合わせ内容詳細:{your-message}

━━━━━━━━━━━━━━
※本メールは送信専用のため、返信はできません。

MWWPテスト株式会社
E-mail:example@mwwptest.com
Tel:00-1111-****

管理者宛メール

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

送信先(E-mailアドレス)*管理者宛メールのメイン送信先(カンマ(,)で区切れば、複数メールアドレスの設定可)
CC(E-mailアドレス)管理者宛メールのCC送信先
BCC(E-mailアドレス)管理者宛メールのBCC送信先
件名 *管理者宛メールの件名
送信者 *管理者宛メールの送信者
Reply-to(メールアドレス)空欄可。管理者宛メールへ返信する際のアドレス設定
本文 *管理者宛メールの本文。{}で囲まれた部分に、フォーム作成で設定した[name]の値(your-name等)を入力すると、ユーザーがフォームで入力した値が自動的に挿入される。
Return-Path(メールアドレス)空欄可。メール送信ができなかったときに送るメールの送信先
送信元(E-mailアドレス)空欄可。空欄の場合、自動的にシステムのアドレスが使用される。(別途設定が必要な場合のみ入力)

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

管理者宛メール設定画面

管理者宛メール本文サンプル

※サイトからお問い合わせがありました。

以下の内容でお問い合わせを受け付けました。
内容を確認の上、3営業日以内にお客様へご連絡をお願いします。

━━━お問い合わせ内容━━━

お名前:{your-name}

メールアドレス:{your-email}

お問い合わせ内容選択:{radio-btn}

お問い合わせ内容詳細:{your-message}

━━━━━━━━━━━━━━

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

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

固定ページの作成

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

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

固定ページ作成 タイトル、ショートコードの設定

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

入力画面URL/contact/
確認画面URL/contact/confirm/
完了画面URL/contact/thanks/

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

固定ページ作成 親ページURLスラッグ設定
親ページ
固定ページ作成 子ページURLスラッグ設定
子ページ

公開

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

フォーム設置完了
フォームを設置したお問い合わせページ

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

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

まとめ

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

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
まるこ

まるこ
コーダー

まるこ
コーダー

想いの詰まったWebデザインを“カタチ”にするコーダーとして、Webサイト制作の一端を担っています。「誰が見てもわかるコード」を念頭に置き、品質・保守性を重視して制作しています。趣味はサッカー観戦。好きな色はトリコロール!

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。