前提
WordPressのお問い合わせプラグイン「Contact Form7」でお問い合わせフォームを用意したサイト制作のお仕事。
ラジオボタンの選択項目が、しょっちゅう変わるし増える案件。
クライアントにContact Form7の編集画面をいじらせたくないので、カスタムショートコードを作って編集画面に入れておき、固定ページに設置したカスタムフィールドに入力した値がそこに入るようにした。そしたらデフォルトのバリデーションが動かずハマった。解決できたのでニッチすぎるメモ。
結論:カスタムショートコードにnameを入れる。
仕様
固定ページにAdvanced Custom Fieldsの繰り返しフィールドがこうあって、
フォームのページにこう表示させます。
吐き出すinputタグ
1 2 3 4 5 6 |
//高1はdate-1 <input type="radio" name="date-1" value="2月10日(水)p.m.7:30〜9:00"> <input type="radio" name="date-1" value="2月8日(月)p.m.7:30〜9:00"> //高2はdate-2 <input type="radio" name="date-2" value="2月9日(火)p.m.7:30〜9:00"> <input type="radio" name="date-2" value="2月11日(木)p.m.7:30〜9:00"> |
集計するときに高1と高2で分けられていてほしいので、別々のラジオボタンにしているけれど、高1と高2のどちらか一方の希望日にチェックが付いていなければ、ラジオボタンの下にエラーを出したい。
解決したコード
Contact form7のコンタクトフォームの編集画面でのショートコード
1 2 3 4 |
//高1用 [show_my_date_shortcode date-1] //高2用 [show_my_date_shortcode date-2] |
カスタムフィールド名(繰り返しフィールド):
kou1_day(高1)とkou2_day(高2)
サブフィールド名:
kou1_request_day(高1)、kou2_request_day(高2)。
functions.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
//contact form 7でカスタムショートコードを使う //説明会日程をカスタムフィールドから入力 function returnShortCode($tag) { if ( !function_exists( 'wpcf7_do_shortcode' ) ) { require_once '/includes/shortcodes.php'; } $tag = new WPCF7_Shortcode( $tag ); $type = $tag->type; $name = $tag->name; $num = 0; $shortcode = ""; $requestDay = ""; //date-1は高1、 date-2は高2 if($name === 'date-1' ) { $num = 1; }elseif($name === 'date-2' ) { $num = 2; }else { return; } //カスタムフィールド値の取得 if(get_field('kou' . $num . '_day')) { while(have_rows('kou' . $num . '_day')) { the_row(); $requestDay .= "'".get_sub_field('kou' . $num . '_request_day')."' "; } //カスタムフィールド値を一度ショートコードの形に(inputタグを自分で書いたりしないのは、デフォルトで付与されるcf7のhtmlが欲しいので) $shortcode = "[radio date-$num use_label_element $requestDay]"; //ショートコードを開く(デフォルトで付与されるcf7のhtmlが欲しいので) $result = wpcf7_do_shortcode($shortcode); } return $result; } add_action( 'wpcf7_init', 'wpcf7_add_shortcode_radio' ); //[show_my_date_shortcode]でreturnShortCode()を呼び出すショートコードを登録 function wpcf7_add_shortcode_radio() { wpcf7_add_shortcode( 'show_my_date_shortcode', 'returnShortCode', true ); } //コンタクトフォーム7独自バリデーション、説明会日程を必ずチェックさせる function cf7myServiceErrorMessage($result, $tag) { $tag = new WPCF7_Shortcode( $tag ); $type = $tag->type; $name = $tag->name; if(!isset($_POST['date-1']) && !isset($_POST['date-2'])){ $result->invalidate( $tag, wpcf7_get_message( 'invalid_required' ) ); } return $result; } add_filter('wpcf7_validate_show_my_date_shortcode', 'cf7myServiceErrorMessage', 11, 2); |
はまったところ
はじめ、[show_my_date_shortcode_date-1]みたいなショートコードを登録していたんだけど、submit押したらセレクタにnameがついた名前のDOMが作られそこにバリデーションメッセージがつっこまれるらしく、
wpcf7_add_shortcodeで呼び出すショートコードの中で、さらにwpcf7_do_shortcodeでショートコードを呼び出しているため、最終的なカスタムショートコードにnameがなく、エラーメッセージが表示されなかった。