【画像解説】MW WP Formの使い方を初心者向けに解説|無料で簡単にお問い合わせフォームを作成

Webサイト/LP制作

企業のホームページやサービスサイトを作成する際には、問い合わせや資料ダウンロード用フォームの設置が欠かせません。

WordPress(ワードプレス)でホームページを作成していれば、プラグインの「MW WP Form」を活用することで、簡単にお問い合わせフォームを設置することができます。

本記事では、「MW WP Form」の機能やフォームの作成方法、フォームを公開するまでの流れを解説します。「WordPressでサイトを作成しており、フォームを設置したい」という方はぜひ参考にしてください。

MW WP Formとは

MW WP Form

https://plugins.2inc.org/mw-wp-form/

まずはMW WP Formの基本的な機能について確認していきましょう。

MW WP Formは、簡単な操作でフォームを作成・設置できるWordPressのプラグインです。シンプルなコードを記述するだけでフォームを作成できることや、無料で使える点などから、多くのユーザーに利用されています。

MW WP Formには、次のような機能があります。

<フォーム作成>

  • コードをコピペするだけでフォームを作成可能
  • 入力画面だけでなく、確認画面・完了画面も作成できる
  • HTMLで自由にデザインのカスタマイズが可能
  • 入力内容チェック(バリデーション)機能


<回答データの管理>

  • データをCSV形式でエクスポート
  • データをグラフで表示


<セキュリティ>

  • CAPTCHAを設置するプラグインと連携でき、迷惑メールを防止

MW WP Formの使い方

続いて、MW WP Formを利用する手順を紹介します。

1. インストール

インストール


WordPressの管理画面から、「プラグイン」> 「新規追加」をクリックし、検索窓に「MW WP Form」と入力します。MW WP Formが表示されたら、「今すぐインストール」をクリックしましょう。

有効化


インストールを行ったあと、「有効化」をクリックします。

サイドバー


サイドバーに「MW WP Form」が追加されていれば、インストール・有効化は完了です。

2. フォームの作成

それでは、MW WP Formでフォームを作成していきましょう。
サイドバーから、「MW WP Form」>「新規追加」をクリックします。

新規追加


まずはタイトルを入力します。他のフォームと区別がつくような名称をつけましょう。

タイトル入力


タイトルの下にある、本文入力エリアにHTMLとショートコードを入力することで、フォームを作成していきます。

直接コードを入力してフォームを作成することもできますが、「フォームタグジェネレーター」という機能を活用することで、簡単にコードを記述することができるため、こちらの機能を活用するのがおすすめです。

フォームタグジェネレーター


ここでは例として、フォームタグジェネレーターを使ってメールアドレスを入力する項目を作ってみましょう。

「選択してください」という箇所から「メール」を選択し、「フォームタグを追加」をクリックします。

メール


次のような画面が表示されるので、「name」にフォームの項目名を入力し、「Insert」をクリックします。

name


なお、「name」に設定する項目名は、フォームを閲覧するユーザーには見えないため、フォームの管理者にとって使いやすい名前であれば何でも構いません。

また、「name」以外の項目は、空欄のままでも問題ありません。

Insertをクリックすると、次のように本文にショートコードが挿入されます。このショートコードがテキストボックスになるので、誤ってコードを変更してしまわないようにしましょう。


同じようにして、必要な項目を追加していきましょう。ここでは、基本的なお問い合わせフォームを作成してみます。


上の画像のように項目を追加しました。フォームタグの種類は以下のものを使っています。

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


また、ショートコードのみでは、入力画面にテキストボックスだけが表示されるので、表示させたいフォームの項目名を入力していきます。


これでフォームの入力画面は完成です。

しかし、このままでは全ての項目が任意回答になっているため、空欄のまま送信されてしまう可能性があります。
必須項目に設定したり、回答の文字数を制限したいなどの場合は、以下で紹介するバリデーションルールを設定しましょう。

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

まずは例として、「お名前」の項目を必須入力にしてみます。

本文入力エリアの下にある「バリデーションルールを追加」を選択すると、バリデーションルールの入力欄が表示されます。「バリデーションを追加する項目」という部分に、バリデーションを設定したい項目の「name」の値を入力しましょう。ここでは、「お名前」と入力します。

バリデーション設定


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

必須項目


バリデーションルールの設定では、他にも、メールアドレスの入力エラーを判定したり、アップロードする画像のサイズを制限するといったことも可能です。

設定したバリデーションルールを削除したい場合には、入力欄の左上にある「×」をクリックします。

4. 確認画面の設定

次に、入力内容の確認画面を作成していきます。
項目の追加と同様に、「選択してください」から、「確認・送信」を選択、追加します。

確認・送信


「確認・送信」ボタンを追加すると、自動的に確認画面が作成され、確認ボタン・送信ボタンも自動的に切り替えてくれます。

入力画面・確認画面がどのようになっているか、確認してみましょう。
サイドバーの「公開」または「更新」ボタンをクリックして編集内容を保存し、「フォーム識別子」を任意の投稿ページに貼り付けます。

フォーム識別子


以下のように、入力画面には「確認画面へ」のボタンが、確認画面には「送信する」のボタンが表示されており、画面によって自動的にボタンが切り替わるようになっています。

<入力画面>
確認画面へ


<確認画面>
送信する


確認画面には、入力内容を修正できるように、戻るボタンを挿入しておくのがおすすめです。
フォームタグジェネレーターより、「戻るボタン」を選択し、追加しましょう。

戻るボタン


このように、「確認画面へ」のボタンの前に挿入します。

戻るボタンの位置


確認画面をもう一度見てみると、「戻るボタン」が追加されています。

送信画面

5. 完了画面(サンクスページ)の設定

確認画面を設定できたら、完了画面の設定を行いましょう。本文入力エリアの下にある、「完了画面メッセージ」を編集することで、ユーザーの回答後に表示されるメッセージをカスタマイズできます。

完了画面メッセージ


完了画面に表示させたいテキストを入れれば、設定は完了です。

メッセージを追加


表示させるテキストは、フォームの種類によって変更するとよいでしょう。
以下にサンプルテキストを紹介するので、ぜひ参考にしてみてください。

<申し込みフォーム>

申し込み完了

お申し込みいただき、ありがとうございました。

ご入力いただいたメールアドレス宛に、お申込み内容についての確認メールを
お送りいたしましたので、ご確認をお願いいたします。

 

<アンケートフォーム>

送信完了

調査へのご協力ありがとうございました。


<予約フォーム>

申し込み完了

ご予約の受付を承りました。
内容の確認のため自動返信メールをお送りします。

キャンセルや入力内容の訂正等のご連絡は、
自動返信メールに返信していただく形でお願いいたします。

スタッフが確認し、ご予約が確定いたしましたら再度予約完了メールを
お送りいたしますので、そちらをもって予約完了とさせていただきます。

 

6. URLの設定

入力画面・確認画面・完了画面は、特に設定をしなければ、同じURL内でページの遷移が行われます。
それぞれの画面を別のURLにしたい場合は、URL設定を行いましょう。

本文入力エリアの下にURL設定の入力欄があるので、設定したいURLを記入します。

なお、同じURL内でページの遷移を行いたい場合は、空欄のままで構いません。

URL設定

7. 自動返信メール設定

自動返信メールを設定しておくと、問い合わせをしたユーザーに自動でメールを送信できます。

なお、自動返信メール機能を使う場合には、本文入力エリアに「メールアドレス」項目を設けるようにしてください。画面右側にある「自動返信メール設定」から編集を行いましょう。

自動返信メール


入力が必要な項目は以下のとおりです。

①件名 自動返信メールの件名です。
②送信者 自動返信メールの送信者名です。
③Reply-to
(メールアドレス)
ユーザーが自動返信メールに返信する際の、返信先アドレスです。
自動返信メールは「⑥送信元」のアドレスから送信されますが、他のアドレスで返信を受け付けたい場合に記入します。
④本文 自動返信メールの本文です。
⑤自動返信メール 入力画面のメール項目に設定した「name」の値を入力します。
今回は「メールアドレス」と記入します。
⑥送信元
(E-mailアドレス)
自動返信メールの送信元アドレスです。
未入力の場合は自動的にシステムのアドレスから送信されるため、空欄のままでも構いません。


また、④本文には、「name」で設定した値を入力することで、フォームから送信された情報を自動で挿入することができます。

入力の際には、{name}のように、「name」で設定した値を{}でくくります。

例えば、以下のように自動返信メールを作成してみましょう。

※このメールはシステムからの自動返信です

{お名前}様

お世話になっております。
●●株式会社へのお問い合わせありがとうございました。

以下の内容でお問い合わせを受け付けいたしました。
●営業日以内に、担当者よりご連絡いたしますので
今しばらくお待ちくださいませ。

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

お名前:{お名前}様
E-Mail:{メールアドレス}
電話番号:{電話番号}
お問い合わせ番号:{tracking_number}
お問い合わせ内容:{お問い合わせ内容詳細}

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


上記の例では、

  • お名前
  • メールアドレス
  • 電話番号
  • お問い合わせ内容詳細

がフォームの入力内容から自動的に反映されます。
また、{tracking_number}を入力しておくことで、自動的に問い合わせ番号が挿入されます。

自動返信メールの文を作成する際には、以下の記事に例文テンプレートがあるので、ぜひ参考にしてみてください。

>>コピペで使える!自動返信メールの例文テンプレートを用途別に紹介

8. フォーム管理者への通知メールの設定

ユーザーが問い合わせをした際に、フォーム管理者に通知されるよう設定することができます。
画面右側にある「管理者宛メール設定」から編集を行いましょう。

管理者宛メール設定


入力が必要な項目は以下のとおりです。

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


⑦本文では、自動返信メールと同様に、「name」で設定した値を入力することでフォームから送信された情報を自動で挿入することができます。

入力の際には、{name}のように、「name」で設定した値を{}でくくりましょう。

9. フォームをページに設置・公開

最後に、フォームをページに設置します。
「更新」をクリックして編集内容を保存してから、「フォーム識別子」をコピーして表示したいページに貼り付けましょう。

これでフォームの公開は完了です。

公開

MW WP Formのおすすめの機能

ここまでで、MW WP Formの基本的な使い方を解説しました。
MW WP Formの応用的な使い方を知っておくと、さらに多くの場面で機能を活用できるようになります。

確認画面のカスタマイズ

「確認・送信」ボタンを追加することで、自動的に確認画面が作成されますが、確認画面の内容を編集したい場合があります。

例えば、入力画面では表示する要素を、確認画面では非表示にすることを考えてみましょう。

要素の非公開


MW WP Formの編集画面から、「テキスト」をクリックします。
編集したい要素に、次のように<span>タグとclassを付与しましょう。
ここでは、class=”test_class”としていますが、「test_class」の部分は自由に指定して構いません。

<span class = "test_class">名前
[mwform_text name="名前" size = "60"] </span>

 

テキスト


編集内容を保存し、「外観」>「カスタマイズ」をクリックします。

カスタマイズ


「追加CSS」をクリックし、次のように記述しましょう。
これで入力画面で表示される要素を、確認画面で非表示にすることができます。

.mw_wp_form_confirm.test_class{
 display: none;
}


なお、確認画面以外で特定の要素を非表示にしたい場合は、mw_wp_form_confirmを以下のように変更してください。

入力画面 mw_wp_form_input
完了画面 mw_wp_form_complete

CSVエクスポート機能

フォームに回答されたデータをCSV形式でエクスポートすることができます。

CSVエクスポートを行うためには、事前にデータベースへの保存を有効にしておく必要があります。MW WP Formのフォーム作成画面の右側にある「設定」から、「問い合わせデータをデータベースに保存」にチェックを入れましょう。

データベースに保存


サイドバー に「問い合わせデータ」が表示されるので、こちらをクリックし、「問い合わせ件数」にあるリンクをクリックします。

問い合わせ一覧画面下部の「CSVエクスポート」をクリックすればダウンロードが可能です。

CSVエクスポート

MW WP Formをさらに便利にするプラグイン

MW WP Formを他のプラグインと組み合わせて使うことで、より便利な機能を使えるようになります。ここでは、おすすめのプラグインを2つ紹介します。

迷惑メールを防止できる「MW WP Form CAPTCHA」

MW WP Form CAPTCHA

https://plugins.2inc.org/mw-wp-form/add-on/mw-wp-form-captcha/

「MW WP Form CAPTCHA」は、フォームに画像認証を追加するプラグインです。
フォームにスパムメールが送信されることを防ぐのに役立ちます。

住所を自動入力する「zipaddr-jp」

zipaddr-jp

https://ja.wordpress.org/plugins/zipaddr-jp/

「zipaddr-jp」は、郵便番号を入力した際に、住所が自動で入力されるようにできるプラグインです。

郵便番号を3桁と4桁に分けて入力欄を作ったり、都道府県、市町村別に入力欄を作るなど、細かなカスタマイズも可能です。

まとめ

ホームページやサービスサイト、ブログには、問い合わせフォームの設置は必須と言えます。MW WP Formはコードの知識がなくても簡単にフォームの作成ができ、WordPressを活用している方にとって便利なプラグインでしょう。

より簡単にフォームを作成・設置したい方は、Webサイトに埋め込むことのできるフォーム作成ツールを導入することもおすすめです。

また、弊社が提供するフォーム作成ツールformrunも、最短30秒ほどでデザイン性の高いフォームを作ることができ、簡単にWebサイトに埋め込むこともできます。無料から始められるので、ぜひ活用してみてください。