MW WP Form の使い方 – WordPressのフォームプラグイン

MW WP Form は無料で簡単にフォームを作成できるWordPressのフォームプラグインの一つです。簡単にフォームを作ることができますが、様々なカスタマイズができるのも MW WP Form の特徴です。

用途に合わせていろいろなことができるプラグインなので、基本的な使い方から今まで使用してきた設定方法をご紹介していきます。

MW WP Form の基本的な機能

• フォームタグと呼ばれるものを設定してフォームの入力項目を作成。
• ショーコードでフォームの設置が可能。
• 入力画面・確認画面・完了画面の3ページを作成できる。（同一URLでの画面の遷移も可能）
• バリデーションの設定も豊富にあり、簡単にできる。
• 問い合わせデータを保存できる。グラフで表示できたり、CSVでエクスポートも可能。

確認画面付きのフォームを簡単に設置でき、問い合わせのデータ管理ができるのが MW WP Form の魅力です。公式マニュアルも日本語で書かれていてとても分かりやすいです。

MW WP Form 公式マニュアル

MW WP Form 基本の使い方

インストール＆有効化

まずはプラグイン追加画面から「MW WP Form」を検索しインストールし、有効化します。

【プラグインページ】
MW WP Form – WordPress プラグイン | WordPress.org 日本語

有効化すると、管理メニューに【MW WP Form】という項目が追加されます。こちらをクリックすると一覧画面に移動するので「新規追加」をクリックしてフォームを作成していきます。

フォーム項目の作成方法

フォームの編集画面に移動したらまずはタイトルを設定しましょう。何のフォームか分かるタイトルにすればOKです。

タイトルの下に「選択してください」というセレクトボックスと「フォームタグを追加」というボタンがあります。このフォームジェネレーター機能を使って、フォームのコードを作成していきます。
ここからコードを生成せずとも直接コードを入力しても作成されます。慣れてきたらショートコードをコピペしてnameだけ変更する、といった書き方もできます。

「選択してください」の部分をクリックすると様々な入力項目が選べるようになっています。各フォーム項目によって適切なものを選んでいきましょう。

例としてテキスト入力のフォームタグを作ってみます。

項目から「テキスト」を選び「フォームタグを追加」をクリックすると以下のような画面に切り替わります。

name は必須項目です。nameには管理者が分かりやすいフォーム項目名を入力すればOK。name 以外の設定項目は空欄のままでも問題ありません。

必要な箇所を設定したら「Insert」をクリックします。

「Insert」をクリックすると本文のエディタにショートコードが追加されます。このショートコードがあることによってフォームの入力欄が生成されます。

↓

ショートコードだけではフォームの入力欄のみが生成されるだけなので、フォームの項目名も追加していきます。

↓

上記のままではフォーム欄に入力することはできますが、送信ができません。確認・送信・戻るボタンを追加していきます。

確認・送信・戻るボタンを追加

「ボタン項目」から設置するボタンを選びます。

（button）と（input）の2種類ありますが、どちらを使用しても確認や送信といった動作に違いはありません。CSSでのスタイルの当て方やJSで何かしら処理したいことがあるなど、場合によって適切な方を選びます。

CSSの適応範囲が広いのは button です。inputタグでは疑似要素が使えないため自由度が下がります。使用しているテーマによってCSSの作り方が異なると思うので、どちらが良いかわからない場合は実際に当てはめてみて確認してみて下さい。

どちらを使用しても問題はありませんが、一つのフォームで同じタグを設定するようにしましょう。

このボタンタグを設定すると、フォーム入力ページでは「確認画面へ」のボタンが表示され、フォーム確認ページでは「戻る」と「送信する」のボタンが表示されます。

確認ボタンや完了ボタンを設置すると、自動的にそのフォームの確認・完了画面のページが作成されます。

基本の作り方としてはフォームの項目名を入力し、フォームタグを設定するという形になります。各フォームタグの詳細設定について覚えていろいろな状況に対応できるフォーム項目を作れるようにしていきましょう。

完了画面の設定

本文入力エディタの下に「完了画面メッセージ」という欄があるので、ここに完了画面に表示させたい内容を入力すればフォームの完了ページで表示されます。

↓

【送信完了ページの例文参考】【保存版】サンクスページのシーン別例文まとめ – 東京のホームページ制作 / WEB制作会社 BRISK

URL設定

「完了画面メッセージ」の下に「URL設定」という欄があります。こちらは入力画面・確認画面・送信完了画面をそれぞれ別のURLにしたいときに設定します。

ここで何も設定していなければフォームを設置しているURL内で確認・完了ページの表示切り替えがされます。同じページ内で完結して問題なければ空欄のままで大丈夫です。

バリデーションの設定

バリデーションは必須で入力してほしい場合や、ちゃんとしたメールアドレスの形式を入力してほしい場合などに使用します。他にも様々なバリデーションを設定できます。

ここではフォームでよく使用される「必須」のバリデーションを設定していきます。
下の方に「バリデーションのルール」という欄があるのでここでバリデーションを設定していきます。

「バリデーションのルールを追加」をクリックするとがバリデーションの入力設定欄が表示されるのでバリデーションを適用するフォーム項目と検証することを設定していきます。
今回は必須の入力欄を作りたいので、「必須」にチェックを入れます。「バリデーションを適用する項目」にはバリデーションをかけたいフォーム項目の name の値を入力します。

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

ちゃんとバリデーションがかかっていれば、何も入力せず送信ボタンを押すと「未入力です」というエラーテキストが表示され送信できないようになります。

自動返信メール・管理者宛メール設定

画面右側に「自動返信メール設定」と「管理者宛メール設定」の項目があります。これらを設定しておくと、送信したフォームの入力内容をユーザーや管理者にメールで送ることができます。

ユーザーにメール送信を行う場合はフォームにメールアドレスの入力欄は必須です。

【自動返信メール設定】

【管理者宛メール設定】

メールを送信する際に本文にはフォームの入力内容を表示させたいことがほとんどだと思います。 {nameの値} を入力することでフォームの入力内容が表示されます。

【メール本文の記載例】

お問い合わせありがとうございます。以下の内容で受け付けました。
お名前 : {name}
メールアドレス : {email}
お問い合わせ内容 : {content}

【返信メールの書き方参考】【保存版】コピペで使える自動メール返信の例文まとめ！用途別に8つのテンプレートを紹介 | formlab

作成したフォームを設置

フォームの作成、メールの設定が完了したらフォームを設置したいページにショートコードを設定します。
画面右側に「フォーム識別子」という項目があってその下に表示されている [mwform_formkey key="000"] というコードをコピーします。あとはコピーしたコードを設置したいページの任意の場所にペーストすれば完了です。

【PR】

フォームをさらに便利にする機能

MW WP Form はカスタマイズしやすいこと、またその情報が豊富にあることも利用ユーザーが多い理由の一つでしょう。いくつかの機能の実装方法をご紹介します。

郵便番号から住所を自動入力

郵便番号から住所を自動入力させたい時もあるかと思います。私はそんな時に zipaddr-jp プラグインを使っています。使い方の詳細は以下の記事にまとめていますので、対応させたい場合はご覧ください。

リンク元の情報をフォームに自動入力

例えば「このイベントに参加する」というリンクをクリックしたら、フォームにそのイベントの内容が自動的に入力されるとユーザーは再度確認して入力する手間が省けますし、入力間違いを減らすことにもつながります。
このような機能を MW WP Form では簡単に実装することができます。

問い合わせデータをカスタム投稿として作成

問い合わせデータをカスタム投稿として作成する方法を詳しく書かれている記事があり、「こんなこともできるんだ」と思ったのでメモです。

MW WP Form では問い合わせデータを保存する機能がついていますが、そのデータを変更したいことがあったり、より管理しやすくしたいときに便利だと思います。

「MW WP Form」で送信されたデータをカスタム投稿に自動追加する方法 | サイドスリーブログ