長屋 お役立ち

MW WP Formでの条件分岐フォームのつくりかた

こんにちは。長屋です。
最近の私は、かなり根深い冷え性だということが発覚し、温活に励んでいます。
寒いと思うのが遅いのです。寒いと思った時にはもう体が冷えている。

次回、成果がでましたらオススメ温活グッズをご紹介いたします。こうご期待!!

 

さて、今回は、先日実装した条件分岐メールフォームについてです。
MW WP Formでの条件分岐フォームの実装方法です。

条件分岐フォームとは、選択肢によって出てくる項目が変わるメールフォームです。

 

★ポイントは、

・入力画面の項目の開閉
・必須のON,OFF
・確認画面の表示内容
・返信メールの出し分け

今回は、上3つについて書いていきます。

 

ラジオボタンの選択肢によって内容が開閉するメールフォームを作成いたしました。

1.メールフォームをtableで作成します。
そのとき、選択肢によって開閉するtrにクラス名open_trを付けます。

2.ラジオボタンの選択肢にchildren=”1:なし,2:ひらく”番号をつけます。

3.読み込んでいるjsファイルに以下の記述をします。

【jsファイル】

 

 

次に、開閉する項目が必須事項だった場合。 読み込んでいるfunctions.phpに下記を追記してください。

【functions.php】

ここまでで、出し分けのメールフォームの入力画面の処理が終わりました。

 

 

続いては確認画面。

確認画面もjsにて非表示にします。

1.ラジオボタンが入るtableタグのtdタグに#radio_boxというID名を付けます。

2.読み込んでいるjsファイルに以下のコードを追記します。

【jsファイル】

確認画面に移行した際、フォームのdivにmw_wp_form_confirmというクラス名が付くため、中に入っている#radio_boxの中にラジオボタンで選んだ項目‘なし’が入れば、open_trを非表示にするという記述です。

最初書いて動かなかったとき、consol.logにて、検証していませんでした。

「絶対入ってるもん」という思い込みでやっていたのですが、なんと、検証したところ入っていない・・・!
.htmlでhtmlを取得していませんでした 😥 

検証の大切さと、思い込みの危険さを改めて実感したのでした。

——————————————————————————————————-

下記のサイト様を参考にさせていただきました。ありがとうございます。

選択肢によって入力項目が開閉するフォームの作り方(MW WP FORM編)

WordPressのお問い合わせフォームプラグイン「MW WP Form」で、チェック・ラジオの選択項目によってテキストボックスを必須にする条件分岐の方法。