MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。

TimesTicketでZoomオンライン指導！(HTML/CSS/WordPress/SEO対策)

確認画面やエラー画面、完了画面（サンクスページ）も遷移自由なフォームプラグインMW WP Form

投稿日2015-01-252017-12-28投稿者root-01322件のコメント

問合せフォームの導入で良くあるのが『サンクスページを表示したい』という要望です。

icons-form

メールアドレスの確認（一致）！
確認画面もページ遷移可能！
完了画面（サンクスページ）もページ遷移可能！

一番有名なプラグインはおそらくContact Form 7 だと思うのですが、MW form プラグインはこの辺の機能も管理画面から実装できるノンプログラマーには嬉しい作りでしたのでご紹介します。

20170501 MW WP Formのエラーメッセージ表示に関する記事をUPしました。
デザイン上任意の場所にエラーを表示したい
チェック項目を分けてコーディングしたい
アラートをまとめて一か所に表示したい
といった場合に参考になるかもしれません。よろしければこちらもご覧ください。
MW WP Formの使い方で、選択項目を分割し、任意の場所にバリデーションエラーのメッセージを出すカスタマイズ方法

201705 MW WP Formの条件分岐についての記事を公開しました
選択した内容によって、テキストボックスを必須に切り替える方法についての記事です
MW WP Formで、チェック・ラジオの選択状態によって必須を切り替える方法

MW WP Form のダウンロード

プラグイン名: MW WP Form
配布元: [browser-shot width=”600″ url=”https://wordpress.org/plugins/mw-wp-form/”]

プラグイン＞新規追加＞MW form等の検索で表示されます。

有効化するとMW WP Form というメニューが管理画面に表示されるので、
新規追加でフォームを作成し、編集することができます。

作成画面は投稿画面とほとんど変わりません。

MW WP form の使い方

・一般的なテキストフィールドで名前・電話・住所等
・メールアドレスを二回入力してもらう「メールアドレスの確認」
・チェックボックスで都道府県を選択してもらう際のバリデーション方法

についてまとめたいと思います。

フォームタグを追加

基本的な流れは、項目を選んでフォームタグを追加し、バリデーションルールを追加していく形になります。

テキストフィールド

フォームタグで必ず決めることになるのが「name」属性です。
このname属性をバリデーションやメール返信でも利用するので、
分かりやすいものにしましょう！日本語OK。
ただし他と被らない名前に！

では、まずテキストフィールドで、フォームタグを追加します。

すると、name属性やIDを決定するウィンドウが出てきます。

基本的にはnameを決定すれば大丈夫ですね。
スタイルなんかを追加したいときはIDも決めていきましょう。

最近はinputとかもwidth100%にすることも多いので
もう、これだけでも大丈夫。
こんなショートコードが生成されます。
[mwform_text name=”名前”]

sizeやmax-lengthを入れるとこんな風になります。
[mwform_text name=”名前” size=”20″ maxlength=”50″]

バリデーションルール：必須項目にする場合

投稿欄の下に「バリデーションルール」というメタボックスがあります。
ここで、「必須項目」「文字数」「形式チェック」等のルールを追加できます。

ここで、入力してきたname属性を使うことになります。

電話番号や郵便番号

追加できるフィールドの中に電話番号や郵便番号というのもありますが、
こちらを利用するとハイフン区切りのテキストフィールドが複数表示されます。

[mwform_tel name=”電話”]

[mwform_zip name=”郵便番号”]

後述のバリデーションルールの追加で半角数字のみ許可ということもできるので、
特に必要ない場合はテキストフィールドでOKでしょう。

[mwform_text name=”電話”]

バリデーションルール：形式や半角数字の指定

[mwform_text name=”電話”]
としている場合、

バリデーションルールにある「電話番号」「半角数字」を両方チェックすると
バリデーションが通らなくなるので注意です。
「電話番号」・・・ハイフン含む
「半角数字」・・・ハイフン不許可
と、矛盾が生じるからだと思います。

メールアドレスの一致・不一致

メールアドレスで、確認用も入力させたいの場合は、
[mwform_text name=”メールアドレス”]
[mwform_text name=”メールアドレス（確認）”]
という形でワンセットで考えます。

バリデーション：アドレス形式の確認と、一致の確認

それぞれの項目がメールアドレスの形式になっているか
name属性：メールアドレス（確認）に入力した値が
name属性：メールアドレスの値と一致するか

というバリデーションルールを追加することでメールアドレス確認の機能を実装できます。

自動返信にメールアドレスを設定

自動返信機能を使う場合、『自動返信メールの設定』ボックスにある
『自動返信メール』にname属性を入れなくてはいけません。

[mwform_text name=”メールアドレス”]
としているなら、『メールアドレス』と入力して下さい。

[mwform_text name=”mail”]
としているなら、『mail』となります。

ラジオボタンとチェックボックス

これらの追加方法は共通ですね。

ラジオボタン（チェックボックス）＞フォームタグの追加　を行い、
name属性と、選択肢を改行しながら入力していきましょう。
初期値を入れることも可能です。

バリデーションも、『必須項目（チェックボックス）』をチェックすれば
ラジオボタンもチェックボックスもバリデーションしてくれます。

セレクトボックスのバリデーション

項目の追加方法はラジオボタン等と共通です。

[mwform_select name=”セレクト” children=”セレクト1,セレクト2,セレクト3″]
のようになります。

よく利用されているものに都道府県の入力なんかがありますね。

選択して下さい
北海道
青森
秋田

と項目があり、「選択して下さい」のままだとバリデーションエラーにしたいというケースが多いと思います。
しかし、そのような機能はデフォルトではありません。

一応、
最初の項目を未入力の状態にする（childrenの最初に,カンマのみ入れる）
バリデーションルールは『必須項目』
にすることで、未入力チェックは行うことができます。
[mwform_select name=”セレクト” children=”,セレクト1,セレクト2,セレクト3″]
↑
分かりにくいですけど、セレクト1の前にカンマが入っています。
で、
バリデーションルールは『必須項目』。（チェックボックス）ではないので注意

「選択して下さい」
でエラーになるようにしたい場合は、こちらを参考にしましょう。

https://ja.forums.wordpress.org/topic/24494
なんと、開発者様自身がフォーラムの質問に答えて下さっています。

<script type="text/javascript">
jQuery( function( $ ) {
    $( '#mw_wp_form_mw-wp-form-616 select option[value=""]' )
        .html( '選択してください。' );
} );
</script>

※#mw_wp_form_mw-wp-form-616の616はご自分のフォームの識別子に置き換えてくださいね。

スクリプトはフォームの冒頭に記述しても大丈夫でした。

管理者宛のメールや自動返信に値を含めたい場合

管理者宛のメールや自動返信に値を含めたい場合は、自動返信・管理者宛メールのメタボックス内にある『本文』に、
お名前 : {お名前}
メールアドレス : {メールアドレス}
のように、{}カッコでname属性の値を括って入力して下さい。

『送信者』『送信元』も、未入力だとデフォルトのアドレスやサイト名が入るので、必要な場合は入力して下さい。

確認・送信・戻るボタン

項目に『確認・送信』『戻る』があるので、それぞれのフォームタグを追加していきます。

確認画面や完了画面等の遷移先を指定する場合

確認画面や完了画面は別のページにしたいというときは、
①まず遷移先のページを用意する
②URL設定のボックスにそれぞれのURLを入力
③遷移先のページ内にもフォーム識別子を入れる
という流れになります。

①まず遷移先のページを用意する

よく使うのは子ページです。／contact／thanks
のような形にすると固定ページ一覧で見るときも管理し易いです。

②URL設定のボックスにそれぞれのURLを入力

空欄の時は全て同一ページで行われますが、サンクスページでadwordsのコンバージョン測定したい時なんかはURLを入力して確認画面を分けることが可能です。

良くある間違いにURLの最後に/入れちゃうとか。
意味合いが全然違うので注意！！
（パーマリンク設定がそうなってればそれで正しいです。）

ちゃんとページのURLをコピペして行いましょう。

③遷移先のページ内にもフォーム識別子を入れる

これを忘れたり、間違ったりすると遷移ができなくなります。
要注意！！

遷移先に別ページを作った時の注意点

遷移先を設定すると、サンクスページに直接行こうとしても、フォーム入力画面にリダイレクトされます。
プレビューもリダイレクトされます。
手間ですが、入力からチェックを行いましょう。

一旦識別子を削除すればアクセス可能になりますが、戻し忘れると問合せが機能しなくなるので注意！！

フォームのコーディングについて

フォーム編集内では自動改行が行われません。

よくdt dd タグで括って利用しています。この辺は任意ですね。

その他の設定

例えば、フォームの前にコンテンツがあって、更に確認画面が同一ページだと、『確認』ボタンを押したときにページ冒頭に戻ってしまいます。

それを防ぎたい場合は、

『画面遷移時のスクロールを有効にする』と、再読み込みされたときにフォーム部分が表示されます。

もしくは、確認画面も別ページにするかですね。状況によって使い分けてください。

まとめ

大概の要望は上記の方法で実装できるんじゃないでしょうか。
他にもファイルフィールドなんかもあるので、アップロードにも対応しているんですかね。
また仕事で使うことがでたらUPしたいと思います！

以上、MW WP Form のご紹介でした！