「MW WP Form」とは、WordPressフォーム作成プラグインのことです。WordPressで作ったサイトにフォームを作成したいときに使われています。

操作は簡単で、シンプルなコードをコピー&ペーストするだけでフォームを作成できますフォームプラグインはたくさんありますが、MW WP Formはその機能性から多くのWebサイトで利用されています。

この記事では、MW WP Formをインストールしてからフォームを設置するまでの使い方と、注意点、おすすめのフォーム作成ツールについて紹介します。

ノーコードで簡単フォーム作成ができるformrun

【ノーコードで簡単フォーム作成ができるformrun

CVRが高いフォームを作ることができるフォーム作成ツールです。無料でも利用できるのでまずはお試しでもご利用いただけます。

目次

  1. MW WP Formとは?
  2. MW WP Formの特徴
  3. MW WP Formでフォームを設置する方法
  4. 確認画面のカスタマイズ方法
  5. 「MW WP Form」で起こりがちなトラブルと解決法
  6. フォーム作成ツールなら「formrun」がおすすめ!
  7. まとめ:MW WP Formやツールを活用してフォームを設置しよう

MW WP Formとは?

MW WP Formとは、WordPressで作成したサイトで問い合わせフォームや応募フォームを作成できるWordPressプラグインです。

Webの専門知識を必要とせず、ショートコードと呼ばれる一行のコードをコピー&ペーストするだけでフォームを設置できます。

確認画面が設置できる数少ないプラグインであり、問い合わせデータの保存、CSV出力、データのグラフ化、バリデーションチェックなどの機能も備えています。それらの各種設定を一画面で完結できるなど、柔軟性、自由度の高さが魅力的なプラグインです。

作者は日本人のキタジマタカシ氏であり、操作画面も日本語です。キタジマ氏は多くのプラグインを手がけており、継続的に更新されています。

MW WP Formの特徴

他のプラグインにはないMW WP Formの特徴は以下です。

確認画面

MW WP Formでは簡単に確認画面を設置できます。確認画面とは、ユーザーフォームに入力した内容を、送信前に確認できる画面のことです。確認画面を設置できるプラグインはそう多くありません。

フォームプラグインとしてよく利用される「Contact Form 7」は、便利ですが確認画面はなく、画面遷移をせずに同じ画面上でエラーメッセージや完了メッセージを表示します。1枚のLPページなどに適していますが、データの正確性や入力ミス防止、画面遷移が欲しいサイトには、確認画面を設置できるMW WP Formの方が適しています(Contact Form 7は別のプラグインを追加することで確認画面を設置できます)。

ちなみに、Contact Form 7については以下で詳しく解説しています。

Contact Form 7(コンタクトフォーム7)を使って、WordPress(ワードプレス)にフォームを設置

Contact Form 7(コンタクトフォーム7)を使って、WordPress(ワードプレス)にフォームを設置

WordPressで企業ホームページやメディアサイトを作成するとき、お問い合わせフォームの存在は欠かせません。WordPressのプラグインの「Contact Form 7」を活用すれば、簡単にお問い合わせフォームを作成・設定できます。

MW WP Formは同一URL、個別URLを作成できます。入力画面→確認画面→完了画面の設置はもちろん、入力画面→完了画面の画面遷移も可能です。class名を設定できるので、メールアドレスの再入力など、確認画面において特定の項目を非表示にできる点もメリットです。

確認画面があるフォームを手軽に実装したいなら、MW WP Formをおすすめします。

データ分析機能

MW WP Formにはデータ保存機能があり、集計した入力データをグラフ化できます。

通常フォームに入力された内容は、管理者宛てのメールで確認できます。ただ、それらを人力で整理して管理するのは大変です。

MW WP Formでは、フォームから送信された内容はすべてデータベースに保存されます。サイト内にフォームが複数ある場合は、フォームごとに分類して保存されるので便利です。

管理画面からデータベースにアクセスすると、円グラフと棒グラフ2種類のグラフ表示を選択できます。確認画面と完了画面に個別のURLを付与できるので、解析ツールを使った分析も可能です。

CSV出力

MW WP Formでは蓄積したデータをCSV形式でダウンロードできます。

ダウンロードしたデータを分析することで、ホームページからの集客や顧客管理に活かすことができます。

また、CSV機能があることで、ダウンロードしたデータをMAツールやSFAなど様々なツールと連携することができます。

条件分岐

MW WP Formの大きな特徴として、フォームへの条件分岐の追加があります。条件分岐とは、特定の質問に対する回答に従い、項目を変更できる機能です。

例えば、問い合わせフォームの項目で「資料請求」を選択すると、本来必須ではなかった「氏名」「郵便番号」「電話番号」を必須項目として設定できるようするなどです。

条件分岐をうまく使うことで、ユーザーアンケートや集計作業を効率化できます。

記事情報の引き継ぎ

MW WP Formは、フォームに遷移する前に閲覧していた情報を、入力フォームに引き継ぐことができます。不動産サイトなら物件ID、求人サイトなら求人IDといった具合で、任意のパラメーターを入力値に入れることも可能です。

例えば、ユーザーが閲覧している物件の問い合わせをしたいとき、閲覧元の物件IDを問い合わせフォームに引き継げるので、IDの確認・コピーの手間を省けます。

MW WP Formでフォームを設置する方法

MW WP Formを使ってフォームを作ろうとしている方に向けて、フォームの設置方法を紹介します。

1.インストール・有効化

image6.jpg

WordPressの管理画面にある「プラグイン」の下に表示されている「新規追加」を選択し、右上にある検索窓に「MW WP Form」と入力します。プラグインが表示されるので、「今すぐインストール」を選択し「有効化」をクリックします。
image8.jpg

プラグイン」>「インストール済みプラグイン」の一覧に追加されていればインストールされています。

2.フォーム作成

本文に直接コードを入力するのは難易度が高いため、今回は「フォームタグジェネレーター」を使ったやり方を解説していきます。

フォームタグジェネレーターとは、専門的な知識や技術を必要とせず、誰でも簡単に本格的なフォームを作成できるシステムのことです。
image7.jpg
メニューにある「MW WP Form」>「新規作成」をクリックします。

タイトル入力

image10.jpg
タイトルを追加」の入力欄に任意のタイトルを入力してください。

項目設置・name入力

ここでは、よくある問い合わせフォームを例に解説していきます。項目の構成は以下の通りです。

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

image9.jpg

「メディアを追加」の下にある「選択してください」のプルダウンから「テキスト」を選択し、「フォームタグを追加」をクリックします。
image12.jpg
表示されたダイアログの「name」に「お名前」と入力します。nameは管理画面の表示名なので、フォーム項目と一致する名称であればどのようなものでも問題ありません。

ほかの項目はそのままにして、下部にある「Insert」をクリックします。
image11.jpg
このように本文にショートコードが入力されます。同様に以下の内容で項目を追加しましょう。

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

image14.jpg

順に入力していくとこのような形になります。この段階だとフォームの入力欄しか作成されていないので、次に各項目に見出しをつけていきます。

見出し作成

image13.jpg

「お名前」や「メールアドレス」など、ショートコードの上に表示させる見出しを入力し、管理しやすいよう整えたら完成です。

ただ、このままだとすべての項目が「任意回答」に設定されているため、空欄のままでも送信できてしまいます。

項目を「必須項目」に変更したり、テキストの文字数を制限したい場合は、バリデーションルールの設定が必要です。

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

必須や任意などのバリデーションルールを設定していきます。ここでは、入力項目の「お名前」を必須項目にする方法を解説していきます。
image17.jpg

ショートコードを入力した本文の入力欄から下スクロールしていくと、「バリデーションルール」という見出しの設定項目があります。

「バリデーションルールを追加」をクリックし、右側にある「▼」を選択するとメニュー画面が表示されます。
image15.jpg
「バリデーションを適用する項目」にnameの値を入力し、必須項目にチェックを入れて完了です。

他のバリデーションルールを追加したい場合は、再度「バリデーションルールを追加」をクリックし、削除したい場合は項目名の左横にある「×」を選択します。

このほか、セレクトボックスの必須チェックやデフォルト文言の設定、添付ファイルの拡張子やサイズの制限などの設定も可能です。

4.確認画面の設定

次に、確認画面の設定方法を解説します。
image16.jpg

先ほど作成したフォーム入力欄の一番上にカーソルを移動し、「確認・送信」を選択して追加します。nameは「確認」でも「確認・送信」でも好きに設定してください。

ショートコードが挿入されると、自動的に確認画面が作成されます。

入力画面と確認画面のチェック方法

image18.jpg

入力画面と確認画面をチェックしたいときは、サイドバーにある「公開」または「更新」をクリックしてから、同じくサイドバーにある「フォーム識別子」のショートコードをコピーします。
image19.jpg

メニューの「固定ページ」から「新規追加」を選択し、任意のタイトルを入力してください。パーマリンクを日本語ではなく英語に直しておくとよいです。
image20.jpg
確認画面の本文に、MW WP Formのフォーム作成画面のサイドバーに記載されている「フォーム識別子」を貼り付けてください。フォーム識別子は入力画面と同じものです。
img_form_installation_4-5.jpg
サイドバーにある「プレビュー」をクリックすると、フォーム画面を確認できます。
img_form_installation_4-6.jpg

戻るボタンの設置

現状では、上のような確認画面となりますので、入力内容を修正したいときにフォーム入力画面に戻ることができません。そこで、「確認画面へ」のボタンの前に戻るボタンのショートコードを挿入します。
img_form_installation_4-7 (1).jpg

「メディアを追加」の下にある「選択してください」のプルダウンから「戻るボタン」を追加します。
img_form_installation_4-8.jpg

「確認画面へ」のボタンの前に「戻るボタン」ショートコードが挿入されたのを確認してから、更新をクリックします。
img_form_installation_4-9.jpg

固定ページでチェックすると、戻るボタンが追加されています。

次に、完了画面の設定を解説します。

5.完了画面の設定

image1.jpg
確認画面と同じく、完了画面も固定ページで作成します。「固定ページ」→「新規追加」で完了画面用に新しいページを作成・公開し、入力画面・確認画面と同じ「フォーム識別子」を貼り付けます。

MW WP Formのフォーム作成画面の本文下にある「完了画面メッセージ」を編集することで、フォーム送信後の完了ページに表示されるメッセージをカスタマイズできます。

完了画面にトップページリンクを設置しておくとユーザーの離脱を防げます。

完了画面のサンプルテキスト

完了画面のパターン別サンプルテキストを紹介します。

【申し込みフォーム】 お申し込み完了

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

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

▶トップへ戻る

【アンケートフォーム
送信完了

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

【予約フォーム
申し込み完了

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

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

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

▶トップへ戻る

6.URL設定

次に、固定ページで作成した入力画面、確認画面、完了画面を紐づけます。

現状では、1つのURL上に3つの画面がページ遷移して表示されている状態です。個別のURLに遷移するよう設定することで、入力画面、確認画面、完了画面それぞれの効果を測定しながら、改善し続けることができます。特定のページリンクを入れることも可能です。

注意点としては、3つのページに同じ「フォーム識別子」を貼り付けておくということです。

すでに入力画面、確認画面、完了画面は固定ページで作っているので、あとはそれらが同じフォームに関係するページであることを設定します。

image2.jpg
MW WP Formのフォーム作成画面に戻り下へスクロールしていくと、「URL設定」の項目があります。

「入力画面URL」「確認画面URL」「完了画面URL」の欄に、それぞれの固定ページアドレスを貼り付けます。アドレスはhttpから始まるURLすべてではなく、確認画面用に作成した固定ページのパーマリンクのスラッグを入力します。最後に更新をクリックしてください。

この設定により、入力画面→確認画面→完了画面は個別URLに移動できるようになります。

7.自動返信メール設定(ユーザー側)

image3.jpg

自動返信メールを設定しておくと、フォーム送信後に自動でユーザーにメールが送信されます。

自動返信メールは管理画面の右メニューにある「自動返信メール設定」に必要事項を入力するだけです。以下のように設定しましょう。

項目 詳細 入力例
件名 メールに表示される件名です。 お問い合わせありがとうございます。
送信者  メールに表示される送信者の表示名です。 株式会社●● カスタマーサポート窓口
Reply-to(メールアドレス) ユーザーが自動返信メールに返信するときの返信先アドレスです。送信元アドレスと別に設定したい場合に入力します。 空欄可、別途設定が必要な場合はアドレスを入力
本文 メール本文です。nameを{name}で括ると引用できます。 ※以下例文あり
自動返信メール 入力画面のメール項目に設定した「name」のことですこの記事では「メールアドレス」が該当します。 メールアドレス
送信元(E-mailアドレス) 未入力の場合は自動的にシステムのアドレスが使われます。別途設定したい場合は入力します。 空欄可、別途設定が必要な場合はアドレスを入力

ただし、自動返信メール機能を使うには、本文に「メールアドレス」の項目が必須です。

自動返信メールのサンプルテキスト

自動返信メールのサンプルテキストを紹介しておきます。

件名:お問い合わせありがとうございます

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

{お名前}様

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

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

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

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

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

8.メール通知設定(管理者側)

ユーザーが問い合わせ内容を送信した際に、管理者にメールが通知されるよう設定できます。

画面右にある「管理者宛メール設定」に必要事項を入力します。

項目 詳細 入力例
送信先(E-mailアドレス) 通知メールの受信アドレスです。※カンマ区切りで複数メールアドレス設定します。 xxx@example.comyyy@example.com
CC(E-mailアドレス) CCを設定したいときに入力します 空欄可、別途設定が必要な場合はアドレスを入力。
BCC(E-mailアドレス) BCCを設定したいときに入力します。 空欄可、別途設定が必要な場合はアドレスを入力。
件名 メールに表示される件名です。 要対応】お問い合わせ:{name}様へ連絡をお願いします。
送信者 メールに表示される送信者の表示名です。 株式会社●● カスタマーサポート部
Reply-to(メールアドレス) 管理者宛てメールを返信する際の返信先アドレスです。空欄でも問題ありません。 (別途設定が必要な場合)xxx@example.com
本文 受信通知メールの本文です。 下記のお客様よりお問い合わせをいただきました。
-------------------------------
お名前:{お名前}樣
E-Mail:{メールアドレス}
電話番号:{電話番号}
お問い合わせ番号:{tracking_number}
お問い合わせ内容:{お問い合わせ内容詳細}
-------------------------------
早急に対応をお願いします。
Return-Path(メールアドレス) メールが正常に送信されなかった場合に、緊急連絡先のように使用するアドレスです。空欄でも問題ありません。 空欄可、別途設定が必要な場合はアドレスを入力
送信元(E-mailアドレス) 未入力の場合は自動的にシステムのアドレスが使われます。別途設定したい場合は入力します。 空欄可、別途設定が必要な場合はアドレスを入力

9.本当に機能するか最終確認する

最後にフォームが正しく機能するかテストします。

入力画面を開いて各項目に値を入力し、確認画面と完了画面に遷移するか確認してください。

ユーザー側の自動返信メールと、管理者宛メール設定の送信元アドレスにそれぞれメールが届いていれば、MW WP Formでのフォーム作成は完了です。

10.便利な機能追加

MW WP Formでフォームを作成しましたが、さらに便利な機能を使えるプラグインを紹介します。こういった機能も追加することで、よりフォームを効率的に運用できます。

スパム対策

企業サイトにフォームを設置するなら、スパム対策は必須です。拡張プラグインの「MW WP Form CAPTCHA」を利用することで、MW WP Formに画像認証機能を追加できます。

管理画面から「CAPTCHAに使用する文字列」「線の本数」「スクラッチ(引っかき傷)の数」などのカスタマイズも可能です。

▶MW WP Form CAPTCHA

住所自動入力

郵便番号を入力したとき、自動で住所が補完されると便利です。「zipaddr-jp」は、WordPressで稼働するフォームに住所自動入力機能を追加できるプラグインです。

フォームにzipaddr-jpを組み込み、id部分に該当する文字列を挿入すると起動します。MW WP Formでは郵便番号、都道府県、市区町村、地域などの各idを次のように定義します。

項目 ID
郵便番号頭3桁 zip
郵便番号4桁  zip1
郵便番号7桁(合わせて表示) zip
都道府県 pref
市区町村 city
地域 area
その他 addr

zipaddr-jp

また、フォームを作るときには様々なポイントに注意しなくてはなりませんが、フォーム作成時に注意すべきポイントは以下の記事で紹介しています。

【おすすめツール9選】登録フォームの作り方と注意点を徹底解説!

【おすすめツール9選】登録フォームの作り方と注意点を徹底解説!

企業のサービスや講演会に、顧客が登録する際の窓口となる「登録フォーム」。登録フォームを設置すれば24時間の登録対応や顧客の管理、分析まで自動で行うことができます。本記事では登録フォームを作る際の注意点からおすすめのフォーム作成ツール9選を紹介。

確認画面のカスタマイズ方法

MW WP Formで作成したフォームはカスタマイズすることができます。フォームのカスタマイズでは、入力欄を装飾したりサイズを変更したりできますが、それにはCSSを使います。

class名設定

フォームの確認画面のカスタマイズでよく利用されるのは、項目の非表示です。入力画面で入力した要素を、確認画面で非表示にするのです。

例えば、メールアドレスのほかに確認用のメールアドレスの入力を要求した場合、確認用のメールアドレスは確認画面で表示させないなどです。

ここでは、入力フォームの「お名前」を確認画面で非表示にする方法を解説します。管理画面をテキストエディタで表示して、編集したい要素にclassを付与します。
image4.jpg

お名前 [mwform_text name="名前" size = "60"]

class=”test_class”としていますが、「test_class」の部分は自由に指定して構いません。編集内容を保存します。

CSS設定

image5.jpg

「外観」>「カスタマイズ」>「追加CSS」の順に選択し、次のように記述してから「公開」します。

.mw_wp_form_confirm .test_class{ display: none; }

MW WP Formの確認画面には、フォーム囲う要素に「mw_wp_form_confirm」というclass名が付くので、これをお名前のclassの前につけます。

MW WP Formでフォームを設置する際の注意点

MW WP Formはフォーム作成に十分な機能が搭載されています。ただ、企業がMW WP Formを利用する場合、知っておいた方がよいポイントがあります。

セキュリティ対策が必要

MW WP Formでは、スパムの防止や脆弱性の修正といった対策は行われています。ただ、万全というわけではなありませんので、迷惑メールを防止する「MW WP Form CAPTCHA」など、自分で設定しなければなりません。

また、MW WP Formはオープンソースのプラグインであるため、軟弱性が発見される可能性が高いです。万一軟弱性が発見された場合、プラグインを最新の状態にアップデートするなど、操作が必要です。

開発者によって脆弱性対策が行われなくなると、自分たちでプログラムを編集してセキュリティ対策を講じなければなりません。長期的に運用していくには、定期的にチェックするのがよいでしょう。

細かくカスタマイズするにはコーディングの知識が必要

フォームの設置や項目ごとの入力チェック機能は簡単に実装できます。

ただ、複数の入力項目をまたいだバリデーションルールの設定やデザインの変更は、HTMLCSSやPHPでコーディングをする必要があります。

専門知識がないとカスタマイズは難しく、知識がないまま編集すると、フォームの表示が崩れたり正常に動作しない可能性も出てきます。

「MW WP Form」で起こりがちなトラブルと解決法

MW WP Formで起こりがちなトラブルについて解説します。

フォームが機能しない

MW WP Formのフォームが機能しなくなったら、MW WP Form自体のアップデートや、wordpressのアップデート、まれに他のプラグイン(Yoast SEOなど)のアップデートが原因の可能性があります。

以下の操作を試してみてください。

  • 「インストール済みプラグイン」からMW WP Formを「有効→無効→有効」に切り替える※使用するメールアドレスが入力されているか確認
  • フォーム作成画面の「URL設定」をチェックしてから「更新」をクリックする
  • フォームを設置している固定ページの「更新」をクリックする

フォーム画面から送信(画面遷移)できないとき、アップデートの確認や、プラグインを一度無効化してみてください。それでも解決しない場合は、「WP Super Cache」のようなキャッシュプラグインが原因かもしれません。

また、フォーム作成ツールの「Contact Form 7」も同時に有効化している場合、こちらにも同じキャッシュデータが存在するため、エラーが発生している可能性があります。その場合、WP Super Cacheの管理画面を開き「詳細タブ」>「除外するURL」の項目にContact Form 7の固定ページのスラッグを追加することで解決できます。

メールが送られない

利用するサーバーが原因でメールが送受信できない場合は、「WP Mail SMTP」という拡張プラグインでメール設定すると、ほとんどの場合正常に送信できるようになります。

ただ、MW WP Formでは送信元アドレスの入力もしなければならず、関連するプラグインに入力されている送信元アドレスと統一させる必要があります。

デザインを変更できない

MW WP Formで作成するフォームはデザインされていないので、企業として利用するには不十分かもしれません。

過度な装飾は必要ありませんが、シンプルすぎると信頼を得られず、ユーザーが離脱する可能性があります。

タグの設定やHTMLがわからなかったり、デザインを変更できないなど、こういったトラブルを避けたいという場合はフォーム作成ツールがおすすめです。

フォーム作成ツールなら「formrun」がおすすめ!

formrunはたった30秒でフォームを作成できるツールです。ノーコードで編集できるので、HTMLタグなどの設定は一切必要ありません。

サポートも充実しているので、トラブルがあってもすぐに対応してもらえます。さらにはフォームの自由度が高いので、自社サイトに合わせてデザインできます。

WordPressプラグインでは難しい、ステータス管理などの顧客管理機能も充実しています。ISO 27001(ISMS)やSSL/TLS化などセキュリティも安心です。

無料でも利用できるので、プラグインの導入が面倒な人はぜひお試しください。

料金

プラン名 料金(月額) フォーム作成数 回答データ数 チームメンバー数 添付ファイルの保存容量 個別メール送信数
BEGINNER 5980円 5個 無制限 2人 5GB 月250通まで
STARTER 12980円 50個 無制限 5人 10GB 無制限
PROFESSIONAL 25800円 無制限 無制限 10人 30GB 無制限

まとめ:MW WP Formやツールを活用してフォームを設置しよう

MW WP Formは、確認画面や追加アドオンなど、企業サイトに欠かせない機能がデフォルトで搭載されています。

ただ、柔軟性の高さが魅力ではあるものの、カスタマイズにはコーディングの知識が必要となり、使いこなすには時間がかかってしまうかもしれません。

もっと簡単に、手早くフォームを設置するなら、フォーム作成ツールの「formrun」をおすすめします。無料でフォームを作成できるので、ぜひご活用ください。

ノーコードで簡単フォーム作成ができるformrun

【ノーコードで簡単フォーム作成ができるformrun

CVRが高いフォームを作ることができるフォーム作成ツールです。無料でも利用できるのでまずはお試しでもご利用いただけます。