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

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

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
配布元
https://wordpress.org/plugins/mw-wp-form/

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

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

MW-Form_03

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

MW-Form_06

MW WP form の使い方

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

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

フォームタグを追加

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

テキストフィールド

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

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

MW-Form_09

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

MW-Form_14

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

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

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

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

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

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

MW-Form_24

電話番号や郵便番号

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

[mwform_tel name=”電話”]

[mwform_zip name=”郵便番号”]

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

[mwform_text name=”電話”]

MW-Form_16

MW-Form_18

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

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

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

MW-Form_26

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

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

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

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

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

MW-Form_31

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

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

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

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

MW-Form_34

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

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

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

MW-Form_39

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

MW-Form_41

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

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

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

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

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

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

一応、
最初の項目を未入力の状態にする(childrenの最初に,カンマのみ入れる)
バリデーションルールは『必須項目』
にすることで、未入力チェックは行うことができます。
[mwform_select name=”セレクト” children=”,セレクト1,セレクト2,セレクト3″]

分かりにくいですけど、セレクト1の前にカンマが入っています。
で、
バリデーションルールは『必須項目』。(チェックボックス)ではないので注意

MW-Form_46

MW-Form_49

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

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はご自分のフォームの識別子に置き換えてくださいね。

MW-Form_54

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

MW-Form_56

MW-Form_58

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

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

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

MW-Form_64

確認・送信・戻るボタン

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

MW-Form_67

MW-Form_69

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

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

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

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

MW-Form_78

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

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

MW-Form_74

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

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

MW-Form_91

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

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

MW-Form_86

MW-Form_83

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

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

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

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

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

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

その他の設定

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

それを防ぎたい場合は、

MW-Form_90

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

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

まとめ

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

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

スポンサーリンク

コメントをどうぞ

  1. 佐藤さま
    コメントありがとうございます。
    1.設定の問題
    URL設定の確認画面、完了画面、エラー画面などはそれぞれ別のURLでしょうか?
    ページ遷移が上手くいっていないということであれば、やはりURL設定に問題があるように思います。
    一旦すべて同一ページにしてテストをしてみると良いかもしれません。
    2.ブラウザの問題
    また、テストの際はシークレットモードや、別ブラウザなどで行ってみることもおすすめします。
    同一のブラウザで、項目の内容を変えながらテストしたりすると、正確な動作を確認できなかったような記憶はあります。
    3.別プラグインの問題
    あと、考えられるのはキャッシュ系のプラグインなどでしょうか。なにか使っているようでしたら、そちらも一旦停止にしてテストするなどした方がよいかもしれません。

    1~3を確認してみて下さい。ご参考になれば幸いです。

  2. 管理人様

    MW WP Formについての有益な記事をありがとうございます。
    MW WP Formを利用すべく設定をしているのですが、どうもうまくいきません。

    現状は、
    「フォーム入力をする→確認画面へのボタンを押す→フォームが未入力の状態の同一ページに飛ぶ」
    という状態です。

    また、稀にブラウザの”戻る”・”進む”を押すと確認画面に遷移することがあり、
    注文ボタンを押すと、再度確認画面が表示されるのですが注文が完了していることがあります。

    上記管理人様の記事内容は全て手を打っているのですが、
    使用しているテンプレートの問題でしょうか。
    もし解決方法のヒントがあれば、ご回答頂ければ幸いです。

    どうぞ宜しくお願い致します。

  3. >あひるさま
    ありがとうございます。構築の方も上手くいくと良いですね!

  4. 回答頂きありがとうございます!
    無事チェック済みのフォームを
    設置することが出来ました( ´∀`)
    どのサイトでも解決出来ないこと
    だったので、本当に助かりました。 
    専門家の方に偶然お会い出来て本当に
    ラッキーでした(^^♪

  5. 素早いご回答ありがとうございます。
    仕様のようですね!開発者のかたのページも勉強してみます!

  6. 回答ありがとうございます。
    SSL領域での不具合はサーバにも問い合わせているので、それで回答を待ちます。

    もし解決しなかった場合、
    サーバにあがってる画像を手動でとりにいく策で手を打とうと思っているのですが、

    /uploads/mw-wp-form_uploads/
    気づくと(数時間おいてもう一度見に行くと)、
    サーバからファイルが消えている(削除されてる?)ようです。

    もともとの仕様で、アップされた画像って時間がたつとサーバから削除されるようになっていたりしますか?
    (メディア一覧に蓄積されていくと認識してるんですが)

    1. >あひる様
      コメントありがとうございます。
      ファイルが削除されるのは仕様のようですね。
      こちらの開発者さまのトピックも参考にされては如何でしょうか。
      https://2inc.org/blog/2013/06/06/3338/

      「問い合わせデータをデータベースに保存」にチェックをいれない状態だと、サーバーにファイルを保存しない仕様

      にはなっているようですね。

  7. >あひるさま
    コメントありがとうございます。
    SSL下でのファイル添付機能については、利用したことがないのでわかりません。。すみません。。

    しかし、SSLをやめると添付できるようなので、フォームの設定ではないような感じがしますね。
    SSLと非SSLではURLが変わるので、httpとhttpsが混在しているようなら、エラーの原因にはなりそうです。
    例えば、/uploads/mw-wp-form_uploads/ がhttpsではないとか・・・
    具体的なアドバイスができず、申し訳ありません。

  8. さくらサーバでWPでサイトを構築、フォームはMW WP Form使用しています。
    途中から独自SSLを使ってSSL領域にしたら、
    ファイル(画像)添付がされなくなりました。

    ※エラーは出ず、送信できちゃうけどメールにもデータにも添付は残ってない
    ※/uploads/mw-wp-form_uploads/には画像自体はアップロードされている
    しかしメールには添付されておらず、管理画面の「お問い合わせデータ」一覧にも画像リンクがない
    当然ダウンロードしたCSVにもURLがない

    といった状況です。
    原因はSSLの設定の仕方かと思うのですが、(SSLをやめると添付できる)
    何をどう修正したらいいのかつまずいてしまっております。。。

  9. はじめまして。
    スクロールがされず別ページを作ろうかと悩んでいたので、とても参考になりました!ありがとうございます(^_^*)

    一つだけ質問させて頂きたいのですが、チェックボックスを最初からチェック済みで表示する方法はありますでしょうか?
    何を検索しても出て来なくて泣
    通常のHTMLだとcheckedの記入で
    出来るようなのですが、それも出来ず。

    もしかしたらご存知かと思い、
    質問させて頂きました(´・ω・`;)
    どうぞよろしくお願いします。

    1. >たかぽんさま
      コメントありがとうございます!
      チェックやラジオの場合、「初期値」に選択項目と同じ値を入れるとチェック済で表示されるようですね。
      ショートコードの中身は children="あいうえお,かきくけこ" value="あいうえお"のようになります。
      試してみて下さいね。

  10. 参考になりました。
    ありがとうございます。

    趣味の問題になりますが、セレクターのラベルを書き換えるのに
    フォームの識別子を使うよりは、自分でセレクター毎にidを指定して

    $( ‘#prefsel option[value=””]’ ).text( ‘都道府県を選択してください。’ );

    などと、やる方が好みです。

    1. >津田様
      コメントありがとうございます!
      コードについてもありがとうございます!
      MW Form、本当に便利でよく使わせてもらっているので、また記事にしたいなと考えてます。

コメントを残す

メールアドレスが公開されることはありません。

スパム対策にご協力ください *

コメントの前にご確認ください。なにか不具合などあればtwitterまでご連絡ください

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • 具体的なエラー画面などがある場合は画像を添付してください。(1ファイルの上限は2メガバイト・3枚までUP可能です。)
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 実作業は行いません。ご依頼の場合はお問い合わせからお願い致します。
  • コメントの回答による一切の不利益および損害に関し、責任を取ることはできません。(実作業をご依頼いただいた場合は別です。)