wp.geek|世界のWordPress最新情報を届けるメディア WordPressのプロによる
情報発信メディア

2022.01.24プラグイン

MW WP Formの基本的な使い方を8ステップで解説!初心者でもサクッと完了

この記事を書いた人

株式会社e2e wp.geek編集部

WordPressサイト制作サービス「wp.make」やWordPress保守・運用サービス「wp.support」などを展開する株式会社e2eの情報発信チームです。お客様の課題解決に役立つ、WordPressの最新情報をお届けいたします。

この著者の他の記事を見る >>

WordPressサイトでお問い合わせフォームを設置する際に便利なのが「MW WP Form」です。

MW WP Formは、WordPressプラグラインのことで、インストールすると簡単にお問い合わせフォームを設置できます。

初心者でもバリデーションルールを設定できたり、お問い合わせ内容の確認画面を表示したり、便利な設定も豊富です。

本記事では、MW WP Formのインストールから作成方法、基本的な使い方を詳しくご紹介します。

1.MW WP Form とは?

「MW WP Form」とは、簡単にお問い合わせフォームを設置できるプラグインのことです。

具体的にはショートコードを使い、一文をコピペするだけで設置できるため、操作感も非常にシンプル。

お問い合わせ内容の確認・完了画面の設定、入力内容チェック(バリデーション)など、便利な機能も用意されており、その利便性から多くのユーザーに導入されています。

2.8ステップでマスター!MW WP Formの基本的な使い方

さっそく、MW WP Formのインストールからフォーム設置、便利な機能まで、基本的な使い方をみていきましょう。

2-1.ステップ①:MW WP Formのインストール

WordPress管理画面から「プラ グイン」→「新規追加」をクリックします。

右上の検索窓に「MW WP Form」と入力し、MW WP Formが表示されたら「今すぐインストール」をクリックしてください。

インストール後「有効化」をクリック。

WordPressのサイドバーにMW WP Formが追加されていれば、インストールと有効化までが完了した証拠です。

2-2.ステップ②:フォームを作成

次に有効化したMW WP Formを使って、フォームを作成しましょう。

WordPressのサイドバーから「MW WP F orm」→「新規追加」をクリックしてください。

新規追加画面が表示されたら、フォームのタイトルを決定します。

今回は、仮に「お問い合わせフォーム①」というタイトルを入力しました。他のフォームと区別しやすいタイトルを入力してみてください。

次に、フォームを表示するためのフォームタグを入力していきます。

フォームタグは、以下画像の「フォームタグジェネレーター」から、任意のフォームタグを簡単に選択できます。

ここでは、フォームタグジェネレーターを使って、お問い合わせフォームでよく見られるメールアドレスの入力項目を作っていきましょう。

まずは、上の画像の通り、フォームタグジェネレーターの「選択してください」と書かれたプルダウンをクリックし「メール」を選択します。

その上で「フォームタグの追加」をクリックしましょう。

すると、上の画像の通り「mwform_email」と書かれた画面が表示されます。

このうち「name」と書かれた項目がありますので、こちらに、作成するフォームの項目名を入力してください。

今回は、仮に「メールアドレス」としました。

なお、nameに記入した項目名は、フォームを利用するユーザーには見えないため、管理者が分かりやすいものであれば問題ありません。

ひとまずname以外の項目は、空欄のままでよいので、画面右下にある「Insert」をクリックしましょう。

Insertをクリックすると、上の画像のように、作成した「お問い合わせフォーム①」の本文にメールアドレスのショートコードが挿入されました。

あとは、同様の手順でお問い合わせフォームに必要な項目を、フォームタグジェネレーターから追加します。

今回は、画像の通り、以下のフォームタグを追加しました。

入力項目 フォームタグの種類
氏名 テキスト
メールアドレス メール
電話 電話番号
お問い合わせ内容 テキストエリア

1つ注意点として、フォームタグジェネレーターを使ってフォームタグを挿入しましたが、この状態のままだと、テキストボックスのみが表示されてしまいます。

下の画像のように、各フォームに項目名を入力してください。

これで、フォームの土台である入力画面の作成が完了しました。

しかし、このままでは全項目が、任意回答できてしまうため、必ず入力しなければいけない「必須項目」など細かい設定をしていきましょう。

2-3.ステップ③:バリデーションルールを設定

それでは、フォームの必須項目などを設定できる「バリデーションルール」を決めていきます。

今回は、テキストフォームタグで作成した「氏名」を必須項目に設定していきましょう。

まずは本文入力エリアの下にある「バリデーションルールを追加」をクリックします。

次に、バリデーションルールの詳細が表示されますので「バリデーションに適用する項目」に、「必須項目」を設定する「name」の値を入力します。

今回は、上の画像の通りname属性に「氏名」と記入しましたので、こちらを入力。

あとは、必須項目にチェックを入れたら、設定は完了です。

なお、今回は必須項目の設定方法について紹介しましたが、メールアドレスの入力エラーを判定するなど、さまざまなバリデーションルールがあります。

都度、運営するWordPressサイトに合わせて、設定を追加してみてください。

2-4.ステップ④:確認・送信ボタンの設置(確認画面の自動作成)

作成したフォームに「確認・送信ボタン」を設置しましょう。

確認・送信ボタンを設置することで、自動的に入力内容の確認画面が作成され非常に便利です。

確認・送信ボタンは、これまで同様、フォームタグジェネレーターのプルダウンをクリックし「確認・送信」→「フォームタグを追加」→「name属性を入力」→「Insert」で設置できます。

また、確認・送信ボタンだけでなく、入力内容に誤りがあった際に、ユーザーが都度修正できるよう「戻るボタン」も設置した方がよいでしょう。

戻るボタンは、確認・送信ボタン同様にフォームタグジェネレーターのプルダウンをクリックし「戻るボタン」から設置できます。

ここまで完了したら、本文入力エリア右側にある「公開」または「更新ボタン」をクリックし、設定を保存します。

次に「フォーム識別子」のショートコードをコピーし、フォームを設置したい投稿ページなどにペーストします。

【実際の表示】

【確認画面】

確認画面では「送信する」ボタンのほかに「戻る」ボタンも設置されていることが分かります。

これで確認・送信、戻るボタンの設置が完了しました。

2-5.ステップ⑤:完了画面の設定

ユーザーが、フォームからお問い合わせ内容を送信し、正しく運営元へ送信されたのか確かめるための「完了画面」も設定しておきましょう。

さきほど作ったMW WP Formの編集画面、本文入力エリアの下部にある「完了画面メッセージ」に任意のテキストを入力します。

テキストの入力が完了したら「更新」ボタンをクリックして、実際の表示を確認しましょう。

【実際の表示】

2-6.ステップ⑥:画面ごとにURLを指定する

フォームの入力画面、確認画面、完了画面は、何も指定しない状態だと、同じURL内でページが遷移します。

もちろんこのままでも問題ありませんが、設定するとユーザーがどのページまで流入したのかGoogle アナリティクスなどでデータを取得するのに役立ちます。


画面ごとのURL設定は、MW WP Formの編集画面、本文入力エリアの下部にある「URL設定」で変更可能です。

2-7.ステップ⑦:自動返信メールを設定

ユーザーがフォームからお問い合わせ内容を送信し、運営元から「無事メールが届きました」という自動返信メールが届いたら安心しますよね。

ユーザーの使い勝手を向上するためにも、自動返信メールを設定しましょう。

自動返信メールの設定は、本文入力エリアの右側にある「自動返信メール設定」から行います。

なお、自動返信メールを設定するためには、フォームに「メールアドレス」項目を設ける必要がありますので、ご注意ください。

自動返信メールに設定できる項目は、以下の通りです。

件名:自動返信メールの件名
送信者:自動返信メールの送信者名
Reply-to(メールアドレス):ユーザーが自動返信メールに返信する場合の宛先として使用するメールアドレス
本文:自動返信メールの本文
自動返信メール:入力画面のメール項目に設定した「name属性」の値を入力します。今回はメールアドレスと入力
送信元:自動返信メールの送信先アドレス。こちらは未入力でもシステムのアドレスから自動で送信されます。

上記、本文には「name属性」の値を入力することで、フォームから送信されたお問い合わせ内容などを自動で表示してくれます。

今回は、以下のように自動返信メールを設定しました。

設定完了後「更新」をクリックし、実際の表示画面を確認してみましょう。

【実際の表示】


このように、自動返信メールに設定したお問い合わせ内容が、本文として自動返信されています。

サンプルのため、簡易的な設定にしていますが、name属性を使って自動でお問い合わせをしたユーザー名を表示するなど、工夫次第でより分かりやすいメールが作成可能です。

2-8.ステップ⑧:管理者宛メール設定

MW WP Formには「管理者宛メール設定」といって、ユーザーがお問い合わせをした際に、フォーム管理者に通知できる設定があります。

MW WP Formのフォーム編集画面右側にある「管理者宛メール設定」より、以下項目を入力可能です。

送信先(E-mailアドレス):通知メールを受信するためのメールアドレス
CC(E-mailアドレス):CC用のメールアドレス
BCC(E-mailアドレス):BCC用のメールアドレス
件名:通知メールを受信する際の件名
送信者:通知メールの送信者名
Reply-to(メールアドレス):通知メールに返信する際の、返信先アドレス
本文:通知メールの本文
Return-Path ( メールアドレス ):メールが正しく送信できなかった場合に、送信するアドレス。基本的に空欄でも問題ありません
送信元(E-mailアドレス):通知メールの送信元アドレス。未入力の場合にもシステムから自動送信されます

自動返信メールと同様に、本文にname属性を指定すれば、フォームから送信された任意の情報を自動で取得できます。

name属性を指定する場合は、{name}という形式にしてください。

3.まとめ

本記事では、運営するWordPressサイトに簡単にフォームを作成、設置できる「MW WP Form」の基本的な使い方をご紹介しました。

コードの専門知識がなくても、任意のショートコードを選択し追加するだけで、お問い合わせフォームを作成できます。

「専門知識がなくて不安だ」という方も、ぜひ気軽に導入してみてください。

注目記事バナー
2022.01.24