Wordpressにお問い合わせフォームを追加するプラグイン『MW WP Form』について解説する

今回は、こんなお悩みにお応えしたいと思います。

▼この記事の内容

• Wordpressのサイトにお問い合わせフォームを設置したい
• プラグインのインストール・使い方が知りたい

この記事はWordPressプラグインの解説記事です。これからWordPressを利用する方は、まずはConoHa WINGなどを使ったWebサイトの構築から進めてゆきましょう。

おススメ記事

【ConoHa WING】ブログの始め方を初心者向けにやさしく解説人気レンタルサーバー『ConoHa WING（コノハウィング）』を使ったブログの始め方について解説してゆきます。画像付き...

▼この記事を書いたひと

フリーランスみやしも（@miyashimo_blog）です。プログラミングやWebサイト制作に関するITの情報を幅広くお届けしていきます。

Wordpressにお問い合わせフォームを設置する方法

今回はWordpressで作成されたブログやホームページなどのWEBサイトに『お問い合わせフォーム』を設置するプラグイン『MW WP Form』についてインストールや設定方法などについて詳しく解説してゆきます。

1.『MW WP Form』のインストール方法

Wordpressにお問い合わせフォームを設置するプラグイン『MW WP Form』のインストールについて説明します。

先ずは、Wordpress管理画面を開いて、プラグインの検索フォームで『MW WP Form』と検索します。

▼管理画面のメニュー『プラグイン->新規追加』を選択します

▼プラグインの検索フォームに『MW WP Form』を入力して検索します

▼プラグインの検索が出来たら『今すぐインストール』のボタンを押しましょう

▼インストールが完了したら『有効化』ボタンを押しましょう

以上でWordpressのプラグイン『MW WP Form』のインストール作業は完了です。

2.『MW WP Form』の設定画面

Wordpressプラグイン『MW WP Form』のインストールが完了したら、続けてプラグインの設定を行ってゆきましょう。

編集画面の開き方

先ずはプラグイン『MW WP Form』の設定画面を確認しましょう。

このプラグインは追加した時点で管理画面の左側にメニューが追加される様になっており、このメニューを選択する事で設定画面が開けます。

開いたページで『フォームがありません』と表示されていると思いますが、ここでページ上部の『新規追加』をクリックします。

編集画面の内容

『新規追加』をクリックすると『フォームを追加』と書かれたページを開くことが出来ると思いますが、ここが『MW WP Form』の編集画面になります。また、このページで問い合わせフォームの項目やメールの文面など、各種設定を行ってゆきます。

色々と項目が並んでいると思いますが、このページで設定できる主な内容は次の様になります。

▼MW WP Formの主な設定内容

各項目の位置はドラッグ＆ドロップで移動させることが出来る様になっています。自動返信メールと管理者宛メール設定は編集画面の右側にあると思いますが、この位置は正直入力がし辛いので、あらかじめ真ん中に移動させておくと後で入力が楽になると思います。

2.『MW WP Form』の設定方法

プラグインの設定画面の確認が出来たら、続けて設定を行ってゆきましょう。プラグイン設定の主な流れは次の様になります。

▼プラグインの設定の流れ

1. タイトル
   

2. フォームの内容
   

3. バリデーションルール
   

4. 完了画面メッセージ
   

5. 管理者宛メール設定
   

6. 自動返信メール設定
   

設定①：タイトル

このタイトルは『MW WP Form』の管理用のタイトルになります。ここで入力する内容はサイトに直接表示される訳ではありませんので、分かり易い名前を付けておくのが良いと思います。

ここはシンプルに『お問い合わせ』と入力しておきましょう。

設定②：フォームの内容

続けて、お問い合わせフォームの内容を入力してゆきます。

ここでは、通常の投稿と同じようにテキストやHTMLを入力する事が出来る様になっていますが、フォームの項目を設置する際は『MW WP Form』のショートコードを利用します。

▼参考情報

MW WP Form - マニュアル

ショートコードについての詳細は、本家サイトのマニュアルが参考になりますが、今回はコピペで使えるテンプレートを用意しました。以下のコードをコピペすればフォームの内容を簡単に作成出来ます。

▼ショートコードのテンプレート

漢字氏名［*必須入力］
[mwform_text name="input-name-knj" id="input-name-knj"]
カナ氏名［*必須入力］
[mwform_text name="input-name-kana" id="input-name-kana"]

メールアドレス［*必須入力］
[mwform_text name="input-mailaddress" id="input-mailaddress"]
お電話番号［*必須入力］
[mwform_text name="input-telnumber" id="input-telnumber"]

お問い合わせ項目
[mwform_radio name="input-content" id="input-content" children="お見積もり,ご相談・ご質問,その他"]
お問い合わせ内容
[mwform_textarea name="input-detail" id="input-detail" rows="5"]

<!--『確認』ボタン-->
[mwform_bconfirm name="button-confirm" value="confirm"]確認画面へ[/mwform_bconfirm]
<!--『戻る』ボタン-->
[mwform_bback name="button-back" value="back"]戻る[/mwform_bback]
<!--『送信』ボタン-->
[mwform_bsubmit name="button-submit" value="send"]送信する[/mwform_bsubmit]

テンプレートをコピーしたら『テキストエディタ』を開いた状態でコードを貼り付けましょう。

設定③：完了画面メッセージ

完了画面メッセージはフォームの送信が完了した時点で表示されるメッセージです。

▼完了画面メッセージのテンプレート

この度はお問い合わせ頂きありがとうございます。
お問い合わせ内容を確認後、担当者よりご連絡させて頂きます。

設定④：バリデーションルール

続いてバリデーションルールを設定しましょう。バリデーションルールは、フォームの項目に対する入力制限や入力チェックの事を言います。

例えばメールアドレスは『〇〇〇〇〇@example.com』といった形式でなければメールを正しく送信する事は出来ません。このために、入力された値を正しくチェックする必要があります。なので特定の項目に対しては、バリデーションルールを設定する必要があります。

▼バリデーションルール

▼『バリデーションルールを追加』ボタンを押すと新しいルールを追加できます

▼左のアイコンをドラッグすると項目が移動できます。設定が済んだら項目順に並べておきましょう！

設定⑤：管理者宛メール設定

管理者宛メールは問い合わせが発生したタイミングでサイトの管理者に送られるメールです。

ここでは主に、管理者に送られるメールアドレスの設定やメールの本文を指定してゆきます。以下の設定内容を参考に各項目の入力を進めてゆきましょう。

▼管理者宛メール設定

※その他の項目については基本的に入力は不要です。更に詳しい情報は『MW WP Form』の公式マニュアル を参照してください。

管理者宛メールの本文に使えるテンプレートを用意しました。以下の内容をコピーして『本文』に貼り付けましょう。

▼管理者宛メール本文のテンプレート

〇〇〇〇〇から以下のお問い合わせが発生しました。

＜お問い合わせ内容＞
■お名前
{input-name-knj}

■フリガナ
{input-name-kana}
 
■メールアドレス
{input-mailaddress}
 
■電話番号
{input-telnumber}
  
■お問い合わせ内容
{input-content}
 
■お問い合わせ詳細
{input-detail}


―――――――――――――――――――――――――――――――――――
 
株式会社〇〇〇〇〇〇
Taro Yamada

〒000-0000 東京都○○区1-2-3
TEL：555-5555-5555 FAX：555-5555-5555
EMAIL：info@example.com
URL：https://example.com
 
―――――――――――――――――――――――――――――――――――

設定⑥：自動返信メール設定

自動返信メールは問い合わせが発生したタイミングでサイトの利用者に送られるメールです。

サイトの利用者に送られるメールアドレスの設定やメールの本文を指定してゆきます。ここも先ほどの手順と殆ど同じなので内容を確認しながら設定を進めてゆきましょう。

▼自動返信メール設定

※その他の項目については基本的に入力は不要です。更に詳しい情報は『MW WP Form』の公式マニュアル を参照してください。

自動返信メールの本文に使えるテンプレートを用意しました。以下の内容をコピーして『本文』に貼り付けましょう。

▼自動返信メール本文のテンプレート

この度は〇〇〇〇〇へお問い合わせ頂きありがとうございます。
お問い合わせ内容を確認後、担当者よりご連絡させて頂きます。

＜お問い合わせ内容＞
■お名前
{input-name-knj}

■フリガナ
{input-name-kana}
 
■メールアドレス
{input-mailaddress}
 
■電話番号
{input-telnumber}
 
■お問い合わせ内容
{input-content}
 
■お問い合わせ詳細
{input-detail}


―――――――――――――――――――――――――――――――――――
 
株式会社〇〇〇〇〇〇
Taro Yamada

〒000-0000 東京都○○区1-2-3
TEL：555-5555-5555 FAX：555-5555-5555
EMAIL：info@example.com
URL：https://example.com
 
―――――――――――――――――――――――――――――――――――

以上でお問い合わせフォームの設定作業は完了です。

次からはいよいよ作成したフォームをサイトに設置してゆきます。

3. 『MW WP Form』の設置方法

フォームの設定が完了したらサイトに設置してゆきましょう！

『MW WP Form』では、フォームごと追加されるショートコードを利用して、Wordpressの『投稿』や『固定ページ』内にフォームを設置出来る様になっています。今回はフォーム設置用の『お問い合わせ』画面を固定ページを使って作成し、そこにフォームを設置する手順を紹介したいと思います。

設置①：ショートコードを取得する

お問い合わせフォームを設置するためのショートコードを取得します。ショートコードは先ほどまで作業をしていた編集画面の右側にある『フォーム識別子』から取得が出来るので、そのままコピーするか、メモ帳などに控えておきます。

設置②：固定ページの作成

次は『お問い合わせ』画面用の固定ページを作成しましょう。固定ページを作成するためには、Wordpress管理画面の左側のメニューで『固定ページ->新規追加』を選択すれば出来ます。

画面を開いたらタイトルに『お問い合わせ』と入力し、本文に先ほど控えておいたショートコードを貼り付けてページを保存しましょう。（固定ページを公開する時は画面右上の『公開する』ボタンを押します）

設置③：ページの確認

ページの保存が出来たら『プレビュー』を押して実際のページを開いてみましょう。

上の画像の様なフォームを表示する事が出来ればOKです。

問い合わせフォームの確認

最後に、お問い合わせフォームが正しく動くか確認してゆきましょう。

確認①：問い合わせの送信

それでは実際に問い合わせフォームを送信してみましょう。先ほど作成した画面を再び開いて、問い合わせ内容を入力して確認画面で送信を行います。

今回の例では以下の入力項目を作成していますので、全て入力してから送信する様にしましょう。

▼問い合わせフォームで入力する内容

• 漢字氏名（必須）
  

• カナ氏名（必須）
  
• メールアドレス（必須）
  
• お電話番号（必須）
  
• お問い合わせ項目
  
• お問い合わせ内容
  

▼お問い合わせフォームを開いて、項目の内容を全て埋めたら『確認画面へ』ボタンを押します

▼確認画面に移動しますので、内容が表示されていることを確認して『送信する』ボタンを押します

▼完了画面が表示されることを確認します

確認②：メールの確認

問い合わせフォームが送信出来たら、今度は、メールが届くかの確認をしましょう。

フォームの編集画面で設定したメールアドレスに『管理者宛メール』が、フォームで送信したメールアドレスには『自動返信メール』がそれぞれ届くと思います。なのでメールソフトを開いてそれぞれのメールについて確認をしてゆきましょう。

▼管理者宛メールの内容

▼自動返信メール

それぞれのメールの差出人・件名・本文に間違いが無いかを確認しておきましょう。また、メールが届かない場合や、メールの文面が間違っている場合は『MW WP Form』の編集画面に戻って内容を修正しましょう。

以上でWordpressのプラグイン『MW WP Form』を使ったお問い合わせフォーム設置作業は完了になります。

WordPressのおススメ記事紹介

ここからは、WordPressサイトの運用で役立つおススメ記事を紹介してゆきます。

基本的な使い方

WordPressの基本的な使い方については、つぎの記事で確認できます。

おススメ記事

WordPressの使い方を初心者向けにやさしく解説【画像付き】これからWordPress（ワードプレス）を使う方にむけて、ワードプレスの使い方を解説してゆきます。画像つきでくわしく解...

おススメWordPressテーマ

WordPressサイトを構築するなら『SWELL』を利用するのがおススメです。

おススメ記事

WordPressテーマ『SWELL』のインストール方法を解説する最近のブロックエディタ―に対応された、人気WordPressテーマの『SWELL』のインストール方法を解説してゆきます。...

おススメ・定番プラグイン

このほかサイト運営で役立つおススメプラグインを紹介いたします。

投稿記事を1クリックで複製できる：『Duplicate Post』

投稿記事を並び替えできる：『Intuitive Custom Post Order』

記事をかんたんに装飾できる：『AddQuickTag』

ブロックエディターを使う：『Classic Editor』

テキストエディタを見やすくする：『HTML Editor Syntax Highlighter』

記事の目次を追加出来る：『Table of Contents Plus』

お問い合わせフォームを追加する：『MW WP Form』

WordPressのSEO対策：『All in one SEO Pack』

Wordpressを日本語に対応させる：『WP Multibyte Patch』

画像を圧縮して表示速度を改善する：『EWWW Image Optimizer』

シンプルにCSS編集できる：『Simple Custom CSS』

この記事のまとめ

今回紹介した『MW WP Form』は、Wordpressに確認画面つきの問い合わせフォームを設置できるプラグインです。 フォーム項目やメール文面などが細かく設定できる、カスタマイズ性の高さが大きな特徴です。

ブログやWEBサイトなど、利用できる場面が本当に多いプラグインでもあります。

このほか当ブログではWordPressに関する情報を多数掲載しています。あわせてご活用くださいませ。

▼関連記事を探す

WordPressの記事一覧