WordPressの確認画面付きお問合せフォームのプラグイン「MW WP Form」の設置方法を解説します。
「フォームタグを追加」から自分の必要と思う項目を追加してフォームを作ります。
「MW WP Form」は確認画面等の設定も行えます。
お客様から入力してもらった内容をお客様へ自動メール送信、サイト管理者にも同じく自動送信設定でフォームは完成です。
「MW WP Form」の機能は多岐にわたっているので、今回はこのサイトの「お問合せ」ページで設定している必要最低限の機能のフォームの作り方を解説します。
ページ内リンク
プラグイン「MW WP Form」のインストール
「MW WP Form」プラグインをインストールします。
プラグインのインストール方法については別ページの「WordPressでプラグインを新規追加インストールする方法」で確認してください。
必要最低限の機能の解説
このHaradaWebのお問合せページのフォームは「お名前」「メールアドレス」「お問い合わせ内容」「ご年齢」で作っています。
「MW WP Form」には他にももっと色々な機能がありますが、今回はこの必要最低限の機能のフォームを作る方法を解説します。
このページは長いページですが、「MW WP Form」の設定が難しいからではなく、やることが多いからです。
やることが多いいというのは細かい所まで設定を行うという事で、つまりそれだけ色々な事ができるプラグインという事です。
基本的な設定を覚えれば色々応用ができます。
お客様が入力するフォーム部分制作
まずはお客様に入力してもらうフォーム部分を作ります。
管理画面の「ダッシュボード」の「MW WP Form」をクリックするとMW WP Formのページが現れるので、左上部の「新規追加」をクリックします。
固定ページを作るようにタイトル、今回は「お問合せ」と入力し、「フォームタグを追加」の「選択してください」から必要な項目を選び追加していきます。
「お名前」を入力するテキスト設定
具体的に入力部分を作ります。
まずは「お名前」を入力してもらう部分を作るために「選択してください」の中から「テキスト」を選択し、「フォームタグを追加」をクリックします。
すると詳細を入力する画面が現れます。
- 「name」にはこの入力部分を識別するためのネームを入力します。今回はわかりやすく日本語で「名前」と入力します。
- 「id」「class」にはCSSで入力部分をカスタマイズする時に指定するid名class名を入力します。今回は「fm-name」「fm-text」とします。
- 「size」は入力部分の横幅です。テキストの場合は60と初期設定されていますが、WordPressのCSSの「input[type=”text”]」で「width: 100%;」と設定されていて変化はないのでそのまま。入力欄の大きさを変えたい場合はCSSをカスタマイズしてください。
- 「maxlength」は文字数制限です。今回は「10」と設定します。11文字以上は入力しても削除されます。
maxlengthを設定すると、例えば10文字設定していて、入力するお客様が間違えて11文字入力してしまうと、お客様は11文字入力したと思い込んで、実際は10文字しか登録されていなくてという状態になってトラブルになる場合があるので注意してください。
- 「初期値」は入力欄に既に入力されている実際の文字です。今回は次の「placeholder」を設定するので「初期値」は設定しません。
- 「placeholder」は「初期値」同様入力欄に現れる文字ですが、これは文字を入力すると消える文字です。「初期値」は消えません。今回は「ここにお名前を」とします。
これで「Insert」をクリックします。
すると入力した内容が画像のように表示されます。
「お名前」とタイトルをつけます。実際のフォームの入力欄の上に表示されます。
これで「お名前」を入力する部分の設定が完了しました。
バリデーションルール
バリデーションルールとはお客様にフォームを入力してもらう時にここは必須とか半角英数とかひらがなとか入力を制御する機能です。
「MW WP Form」の「フォームを編集」ページに戻ります。
「MW WP Form」にはフォームを編集」ページ下部に「バリテーションルール」があります。
「バリテーションルール」を開いて、「バリテーションルールを追加」をクリックします。
今回作った「名前」に「バリテーションルール」を設定します。
「バリデーションを適用する項目」にはルールを適用させたい「name」の部分、
今回の場合は「名前」と入力し、必要な項目を設定します。
今回の場合「必須項目」にチェックします。
これでフォームに「バリテーションルール」が適用されました。
しかしフォームに入力されるお客様にはこのルールについてはわかりませんので、フォーム内の「お名前」の後に「必須」と入力します。
右上「公開」をクリックして「バリテーションルール」設定完了です。
「メールアドレス」を入力するメールフィールド設定
次はお客様に入力してもらうメールアドレス欄を作ります。
基本的には「「お名前」を入力するテキスト設定」と同じです。
「選択してください」の中から「メール」を選択し、「フォームタグを追加」をクリックします。
必要な項目に入力していきます。
細かい所が違っていたりするので注意してください。
メールフィールドを設定しました。
メールフィールドのバリデーションルール
バリデーションを適用する項目に「メールアドレス」を入力、必須項目、メールアドレスにチェックを入れます。
これでメールフィールドのバリデーションルールは完了です。
「お問合せ内容」を入力するテキストエリア設定
テキストエリアは長い文章を入力してもらうときに利用します。
テキストは基本1行くらいですむ入力内容、テキストエリアは数行になる入力内容の時に利用します。
他と同様バリデーションルールも必須項目にチェックを入れます。
「ご年齢」を入力するセレクトボックス設定
「セレクトボックス」は選択するボックスです。
今回の場合は年齢を29歳以下と30歳以上で選んでもらいます。
選んでもらう項目は「,」で区切って増やします。
設定は画像の通りです。
バリデーションルールも必須項目にチェックを入れます。
セレクトボックス・カスタマイズ
HaradaWebのお問合せページのフォームはセレクトボックスをカスタマイズしています。
「MW WP Form」のセレクトボックスはデフォルトの状態で表示されるのは最初の選択項目になります。
今回の場合だと「29歳以下」がページを開いた時に表示されています。
この場合お客様が「ご年齢」の項目に気付かなかった場合、29歳以下になってしまいます。
これを防ぐため、デフォルトの状態を「選択してください」としてセレクトボックスの内容を選択してもらうという設定にカスタマイズします。
jQueryを使って設定します。
<script type="text/javascript"> jQuery( function( $ ) { $( '#mw_wp_form_mw-wp-form-275 select option[value=""]' ) .html( '選択してください' ); } ); </script>
このjQueryを「フォームを編集」ページ内の任意の場所に設定します。
最初の選択項目の「29歳以下」の前に「,」を入れて「children=”,29歳以下,30歳以上”」とします。
jQuery内の3行目の「275」はフォーム識別子「mwform_formkey key=”275″」の275なので、フォームによって識別子は違うので変更してください。
これでセレクトボックス設定は完了です。
確認・送信設定
「確認・送信」ボタンを設定します。
このボタンを選択すると入力後に確認画面が表示されて、送信するという設定になります。
「フォームタグを追加」から「確認・送信」を選び内容を入力します。
「Insert」ボタンをクリックすると
[mwform_submitButton name="確認送信" class="fm-kasou" confirm_value="確認画面へ" submit_value="送信する"]
が編集画面内に追加されます。
これで確認・送信設定は完了です。
戻るボタン
確認画面で入力内容に間違いがあった場合、この戻るボタンで入力画面に戻ります。
戻るボタンは「ボタン項目(input)」の「戻るボタン」を「フォームタグを追加」します。
[mwform_bback class="fm-modoru" value="back"]戻る[/mwform_bback]
が編集画面内に追加されます。
これで確認・送信設定は完了です。
そしてサイトに表示されるフォーム部分の設定は完了です。
お疲れさまでした。
サイトに表示させる方法
では設定したフォーム部分の内容をサイトに表示させます。
「MW WP Form」編集ページの右「フォーム識別子」ショートコードをフォームを表示させたい固定ページ・投稿ページに貼り付けます。
今回は投稿ページに貼り付けます。タイトルは「お問合せサンプル」とします。
実際の表示はこんな風になります。
確認画面の設定
次はこの「MW WP Form」の特徴ともいえる確認画面の設定です。
お客様がフォームに入力した後すぐに送信するのではなく、確認画面で確認してから送信してもらいます。
確認画面の設定といっても特別何も設定しなくてもデフォルトの状態で確認画面は現れます。
しかし例えば確認画面のページ内に「確認画面です。確認してください。」という文言を入れたい場合、固定ページで別に確認ページを作って好きな文字などを入力します。
確認ページだけでなく、完了ページも作れます。
方法は確認ページ等を作って「URL設定」にURLを入力します。
確認ページ、完了ページを作る
今回は固定ページで確認ページ、完了ページを作ります。
固定ページで「確認ページ」を作ります。
ページ内にフォーム識別子「mwform_formkey key=”275″」を入力します。
元に戻すにはURL設定を全て空白にして「更新」を押してください。
そして確認画面に表示させたい文章を入力します。
実際の確認ページはこんな感じに表示されます。
「確認ページ」と同じように固定ページで「完了ページ」を作ります。
同じくページ内にフォーム識別子「mwform_formkey key=”275″」を入力します。
そして完了画面に表示させたい文章を入力します。
実際の完了ページはこんな感じに表示されます。
これで別ページで確認ページ、完了ページを作ることが完了しました。
次はお客様がフォームに入力した後にこれらのページが表示されるように次の「URL設定」します。
URL設定
URL設定に「確認ページ」「完了ページ」の固定ページのURLを入力します。
問題があります。
このサイトでは画像のようにURLの最後に「/」をつけなければきちんと表示されます。
しかしこのプラグインの制作者であるモンキーレンチさんのサイト
参考/MW WP Form でバリデーションエラー時のURL変遷を指定できるようになりました。
によるとURLの最後に「/」をつけなければならないようになっています。
最後に「/」をつけなければページが表示されなくなるとの事ですが、このサイトの場合「/」をつけると表示されなくなります。
WordPressのバージョンなどによって違うと思いますので、両方試してみてください。
元に戻すにはURL設定を全て空白にして「更新」を押してください。
デフォルト完了画面の設定
確認画面同様完了画面もデフォルトの状態でメッセージだけを指定して入れることができます。
あえて固定ページで完了画面を作る必要はありません。
「完了画面メッセージ」に完了画面に表示したいメッセージを入力してください。
これでフォーム送信後に「お問い合わせありがとうございます。自動返信メールを送らせていただきました。」という完了メッセージが画面に現れます。
お客様への自動送信メール設定
フォームに入力されたお客様のメールアドレスに、入力した内容が自動返信メールで届くように設定します。
設定する場所は「フォームを編集」ページの右中ほどの「自動返信メール設定」です。
メール設定に入力した内容です。
{キー}でそのフォーム項目に変換されます。
{tracking_number} と入力すると問い合わせ番号に自動的に変換されます。
入力内容 | |
---|---|
件名 | HaradaWeb.comお問合せ |
送信者 | HaradaWeb |
送信元(E-mailアドレス) | test@test.com |
本文 | お問い合わせありがとうございます。 ご入力いただいた内容です。 お名前:{お名前} ご入力いただいた内容をこちらで確認しましたらご連絡させていただきます。 HaradaWeb.com |
自動返信メール | メールアドレス |
サイト管理者への自動送信設定
フォームに入力していただいた内容を管理者、つまり私に自動メールさせる設定です。
画像の赤枠の所に入力します。
「お客様への自動送信メール設定」と同じように設定します。
以上でこのページの「MW WP Form」の設定は終了です。
長々と解説しましたが、設定内容については難しくないと思います。
長い解説になっているのは設定する部分が多いからで、それは細かな設定ができるという事でもあります。