mixhost フォームを作成できるプラグイン：MW WP Formの導入方法や使い方まで解説

MW WP Formとは？

個人用サイトや企業用サイトなど、現在あらゆるサイトがネット上に存在しますが、

その中でお問い合わせのページやアンケート調査のページ、イベント予約のページなどをご覧になったことがある方は多いかと思います。

これらのページはフォームと呼ばれ、予め用意された項目に決められた方法で入力や選択を行う画面のことを指します。

フォームの特徴としては項目ごとに入力する上でルールが定められているため、

登録ユーザー側で迷わずに登録することができて登録された内容のブレも無くなるので、

サイト運営ユーザー側での登録内容の確認や集計が楽に行えるといったことが挙げられます。

 

mixhostに導入可能なWordPressでは、フォームを用意することに特化したプラグインであるMW WP Formを導入することが可能です。

MW WP Formは無料で導入できるプラグインで、このプラグイン単体で簡単にフォームを作成することができます。

今回はMW WP Formの導入方法から使い方までを解説していきます。

MW WP Formの導入方法

導入するサイトのダッシュボードから「プラグイン→新規追加」と移動し【MW WP Form】と検索し検索結果から【MW WP Form】の【今すぐインストール】をクリックしインストールしましょう。

 

インストールが完了したらそのまま【有効化】を行ってください。

 

MW WP Formの使い方

次に、インストールし有効化したMW WP Formを実際に使用してみましょう。

このページでは例としてお問い合わせフォームを作成することを想定して、

【１】からステップ毎に順に進めていきます。

【１】新規追加

メニュー欄の「MW WP Form」から「新規追加」を選択します。

ここからフォームの追加を行います。

【２】入力欄の作成

サイトに表示されるフォームを作成していきます。

 

「タイトルを追加」の欄は、今までに作成したフォームが管理者画面のリストに表示されますので、

他のフォームと見分けがつくようなタイトルを命名するのが良いでしょう。

 

次に、各項目の入力欄を作成します。

今回は以下の５項目を用意します。

以下の組み合わせで今回は作成します。

名称	フォームタグ
お名前	テキスト
法人名	テキスト
メールアドレス	メール
お問い合わせカテゴリ	ラジオボタン
お問い合わせ内容	テキストエリア

完成図は下記、画像の通りとなります。

 

それでは、順に項目の追加を行っていきましょう。

 

①「選択してください」のセレクトボックスから「テキスト」を選択します。

②「フォームタグを追加」ボタンを押下します。

③nameに「お名前」と入力します。

④name以外の項目はそのままにして「Insert」ボタンを押下します。

⑤「お名前」の入力項目が追加されます。

 

お名前と基本的に手順は同じです。

お名前の③と⑤の「お名前」を「法人名」に置き換えて①～⑤の手順を同様に行ってください。

 

①「選択してください」のセレクトボックスから「メール」を選択します。

②「フォームタグを追加」ボタンを押下します。

③nameに「メールアドレス」と入力します。

④name以外の項目はそのままにして「Insert」ボタンを押下します。

⑤「Insert」ボタンを押下すると「メールアドレス」の入力項目が追加されます。

 

今回は、[ご意見・ご要望]と[質問]と[その他]の3種類を選択肢として追加します。

①「選択してください」のセレクトボックスから「ラジオボタン」を選択します。

②「フォームタグを追加」ボタンを押下します。

③nameに「お問い合わせカテゴリ」と入力します。

④選択肢に[ご意見・ご要望]と[質問]と[その他]をそれぞれ改行して入力します。

⑤「Insert」ボタンを押下すると「お問い合わせカテゴリ」の入力項目が追加されます。

 

お問い合わせ内容は長文になる可能性も考えて、テキストよりも長文入力に向いているテキストエリアで追加します。

①「選択してください」のセレクトボックスから「テキストエリア」を選択します。

②「フォームタグを追加」ボタンを押下します。

③nameに「お問い合わせ内容」と入力します。

④name以外の項目はそのままにして「Insert」ボタンを押下します。

⑤「お問い合わせ内容」の入力項目が追加されます。

※テキストエリアの場合は横幅をcols、縦幅をrowsで調整が可能です。必要に応じて変更してください。

 

一通り入力された後はお問い合わせ内容を送信するためのボタンが必要ですので、以下を一番下に追加します。

①「選択してください」のセレクトボックスから「確認・送信」を選択します。

②「フォームタグを追加」ボタンを押下します。

③nameに「送信」と入力します。

④name以外の項目はそのままにして「Insert」ボタンを押下します。

⑤「確認ボタン」と確認ボタン押下後の画面に「送信ボタン」が追加されます。

 

これで入力欄が揃いました。

 

【３】バリデーションルールの作成

バリデーションルールでは、項目ごとに入力ルールを設定することができます。

例えばメールアドレス欄にはメールアドレス形式のみ入力できるように設定したり、

特定の項目を必ず入力してほしい場合は必須項目とすることが可能です。

 

今回はお問い合わせフォームを作成しますので、まずは問い合わせの内容は入力してもらわないと困りますね。

また、問い合わせの結果を登録ユーザーにこちらから返答しなければならないため返答先のメールアドレスとお名前は必須項目にしておきます。

またメールアドレスについてはメールアドレスの形式で登録してもらわないといけないですね。

以上のことから、法人名以外の項目は必須入力として作成していきます。

 

画面下部に「バリデーションルール」というエリアがありますので、こちらで設定をしていきます。

ここで、お名前、メールアドレス、お問い合わせカテゴリ、お問い合わせ内容を必須項目として設定します。

 

①「バリデーションルールを追加」ボタンを押下します。

②「バリデーションを適用する項目」に「お名前」と入力します。

③「必須項目」にチェックを行います。

 

お名前と基本的に手順は同じです。

お名前の②の「お名前」をそれぞれの名称に置き換えて①～③の手順を同様に行ってください。

 

①「バリデーションルールを追加」ボタンを押下します。

②「バリデーションを適用する項目」に「メールアドレス」と入力します。

③「必須項目」と「メールアドレス」にチェックを行います。

 

①「バリデーションルールを追加」ボタンを押下します。

②「バリデーションを適用する項目」に「お問い合わせカテゴリ」と入力します。

③「必須項目（チェックボックス）」にチェックを行います。

 

名称	バリデーションルール
お名前	必須入力
法人名	任意入力
メールアドレス	必須入力、メールアドレスの形式
お問い合わせカテゴリ	必須入力(いずれかが選択されていること)
お問い合わせ内容	必須入力

設定したバリデーションルールは確認画面で判定されて、

入力条件を満たしていない場合にエラーが表示されるようになります。

 

【４】完了画面メッセージの作成

次に、完了画面メッセージを作成します。

ここで設定した内容は、登録ユーザー側でお問い合わせフォーム送信後に表示される完了画面に表示されます。

記載する内容としては、お問い合わせして頂いたことによるお礼文や返信予定日を表示することをお勧めします。

今回はその内容を記載した完了画面を作成します。

 

フォームタグを追加したテキストエリアの下部に「完了画面メッセージ」という枠があります。

 

【５】自動返信メール設定

次に、自動返信メール設定を行います。

ここで設定した内容は、登録ユーザー側がお問い合わせ完了時(完了画面が表示されたタイミング)で、

入力されたメールアドレス宛に自動でメールが送信されます。

 

お問い合わせフォームで入力された内容を自動返信メールに記載することも可能ですので、

登録ユーザー側は問い合わせた内容を後からメールで確認することができます。

お問い合わせしてから時間がたってしまうと問い合わせた内容を忘れてしまうこともありますし、

返信に時間がかかってしまうこともあると思いますので登録は必須ではありませんが、

登録しておいたほうがよい項目かと思います。

 

自動返信メール設定は画面右側に存在します。

項目名	用途
件名	メールの件名
送信者	メールの送信者
Reply-to（メールアドレス）	自動返信メールに対する返信先アドレス
本文	メールの本文
自動返信メール	自動返信メールの送信先アドレス。 【２】入力欄の作成のメールアドレスで指定したnameの値を指定します。 今回の設定値は「メールアドレス」とします。
送信元（E-mailアドレス）	メールの送信元。空欄の場合はサイトのドメインを自動入力。

 

設定例として、下記画像のように設定してみました。

 

本文にお問い合わせフォームで入力された内容を送信するためには、

上記画像の赤枠のように【２】入力欄で指定したnameの値を{}で囲むことで自動的に自動返信メールに出力されます。

例えば、お名前のnameは「お名前」で登録しているため、お名前の入力欄の内容を送信するためには{お名前}とすると、

その内容が自動返信メールに出力されるようになります。

 

自動返信メールを配信したとき、例として下記画像のように受信します。

 

【６】管理者宛メール設定

次に、管理者宛メール設定を行います。

基本的に、【５】自動返信メール設定が登録ユーザー向けに対し、こちらは管理者向けへの自動返信メールの設定となります。

配信タイミングも【５】自動返信メール設定と同じです。

そのため、【５】自動返信メール設定で設定した項目と酷似しています。

 

管理者宛メール設定は画面右側に存在します。

項目名	用途
送信先（E-mailアドレス）	メールの宛先。メールアドレスを入力します。
件名	メールの件名
送信者	メールの送信者
Reply-to（メールアドレス）	管理者宛メールに対する返信先アドレス
本文	メールの本文
自動返信メール	自動返信メールの送信先アドレス。 【２】入力欄の作成のメールアドレスで指定したnameの値を指定します。 今回の設定値は「メールアドレス」とします。
送信元（E-mailアドレス）	メールの送信元。空欄の場合はサイトのドメインを自動入力。

 

設定例として、下記画像のように設定してみました。

登録した内容で、送信先（E-mailアドレス）宛に自動配信されます。

 

【７】設定

次に、設定欄の設定を行います。

この項目は任意の設定項目ですので設定をパスしても構わないのですが、

設定しておくと便利な機能が1つありますので、紹介しておきます。

 

設定は画面右側に存在します。

この中に、「問い合わせデータをデータベースに保存」というチェックがあります。

 

 

 

 

【８】URL設定

次に、URL設定を行います。

この項目も設定欄同様に任意の設定項目ですので設定をパスしても構いません。

確認画面や完了画面のURLを個別に設定したい場合に設定を行う項目ですが、

特に希望がなかったり分からない場合は何も設定しなくても問題ない項目です。

フォームタグを追加したテキストエリアの下部に「URL設定」の枠があります。

 

【９】作成したフォームの設置

ここまでの設定でフォーム単体の設定は完了ですので、公開を行います。

公開は画面右側にありますので、公開もしくは更新のボタンを押下してください。

 

最後に、公開したフォームを指定したページに設置します。

フォームの編集画面右側に「フォーム識別子」がありますので、そこに記載されているショートコードをコピーします。

コピーしたショートコードを、設置したいページにペーストします。

これで、作成したフォームの設置が完了です。