Contact Form 7で特定の入力項目のエラーメッセージの位置を変更する
Contact Form 7ではフォームの必須項目のチェックなどを自動的に行なってエラーメッセージを表示してくれる機能があり、とても便利です。
ただ、入力項目のエラーの位置が決まっているため、複数の入力項目を組み合わせた項目を設けたい場合などにメッセージが出てほしい場所に出てくれないことがあります。
(例: 「好きなもの」というチェックボックスを設け、「その他」の場合は手で入力させるフォームを作った場合)
|
1 2 3 4 5 6 7 8 |
<p>お名前 (必須)<br /> [text* your-name] </p> <p>好きなもの (必須)<br /> [checkbox* fav "りんご" "みかん" "バナナ" "その他"][text fav-etc] </p> <p>[submit "送信"]</p> |
標準の状態だと、エラーメッセージが「その他」とテキスト欄の間に出てきてしまいます。
このメッセージの位置を変更するには、下記のように行います。
1. エラーメッセージを表示させたい場所に特別なタグを配置する
まず、フォームのコード内のエラーメッセージを表示させたい場所に、「<span class="エラー用のクラス名 項目名"></span>」を追加します。(エラー用のクラス名はなんでもよいです。項目名はContact Form 7の"your-name"などの項目名になります)
例えば上記の例の場合、フォームのコードを下記のようにします。
|
1 2 3 4 5 6 7 8 9 |
<p>お名前 (必須)<br /> [text* your-name] </p> <p>好きなもの (必須)<br /> [checkbox* fav "りんご" "みかん" "バナナ" "その他"][text fav-etc] <span class="wpcf7-custom-item-error fav"></span> </p> <p>[submit "送信"]</p> |
2. functions.phpに位置変更用のコードを記載する
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 |
/** * Contact Form 7のエラーメッセージの場所を必要な項目のみ変更します。 */ function wpcf7_custom_item_error_position( $items, $result ) { // メッセージを表示させたい場所のタグのエラー用のクラス名 $class = 'wpcf7-custom-item-error'; // メッセージの位置を変更したい項目名 $names = array( 'fav' ); // 入力エラーがある場合 if ( isset( $items['invalids'] ) ) { foreach ( $items['invalids'] as $k => $v ) { $orig = $v['into']; $name = substr( $orig, strrpos($orig, ".") + 1 ); // 位置を変更したい項目のみ、エラーを設定するタグのクラス名を差替 if ( in_array( $name, $names ) ) { $items['invalids'][$k]['into'] = ".{$class}.{$name}"; } } } return $items; } add_filter( 'wpcf7_ajax_json_echo', 'wpcf7_custom_item_error_position', 10, 2 ); |
※$class = 'wpcf7-custom-item-error'; の wpcf7-custom-item-error の部分は、1.で設定したエラー用のクラス名と合わせてください。
※$names = array( 'fav' ); の部分は、フォームの項目名を設定します。複数の項目を対象にできます。例えば item1とitem2の2つの項目を対象にしたい場合は $names = array( 'item1', 'item2' ); とします。
以上で設定は終了です。
結果
先程の「好きなもの」の例だと、下記のようにメッセージが移動しているのが確認できます。
おまけ
「好きなもの」に「その他」が選択されていて、テキスト欄が記入されていない場合にエラーにしたい場合は下記のように変更することで実現できます。
(フォームのコード。エラー用のタグに fav-etc(その他のテキスト欄の項目名) を追加)
|
1 2 3 4 5 6 7 8 9 |
<p>お名前 (必須)<br /> [text* your-name] </p> <p>好きなもの (必須)<br /> [checkbox* fav "りんご" "みかん" "バナナ" "その他"][text fav-etc] <span class="wpcf7-custom-item-error fav fav-etc"></span> </p> <p>[submit "送信"]</p> |
(functions.php。$namesに fav-etc を追加し、その他のテキスト欄用の特別な入力チェックを追加します。)
|
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 |
/** * Contact Form 7のエラーメッセージの場所を必要な項目のみ変更します。 */ function wpcf7_custom_item_error_position( $items, $result ) { // メッセージを表示させたい場所のタグのエラー用のクラス名 $class = 'wpcf7-custom-item-error'; // メッセージの位置を変更したい項目名 $names = array( 'fav', 'fav-etc' ); // 入力エラーがある場合 if ( isset( $items['invalids'] ) ) { foreach ( $items['invalids'] as $k => $v ) { $orig = $v['into']; $name = substr( $orig, strrpos($orig, ".") + 1 ); // 位置を変更したい項目のみ、エラーを設定するタグのクラス名を差替 if ( in_array( $name, $names ) ) { $items['invalids'][$k]['into'] = ".{$class}.{$name}"; } } } return $items; } add_filter( 'wpcf7_ajax_json_echo', 'wpcf7_custom_item_error_position', 10, 2 ); /** * 「好きなもの」が「その他」でその他の欄が未入力の場合エラーとします。 */ function wpcf7_validate_fav_etc( $result ) { if ( // 「好きなもの」(fav)が入力されていて、チェックボックスの選択に「その他」が含まれる ( isset( $_POST['fav'] ) && in_array( 'その他', $_POST['fav'] ) ) // 「好きなもの」の「その他」の欄が未入力 && ( ! isset( $_POST['fav-etc'] ) || 0 == mb_strlen( trim( $_POST['fav-etc'] ) ) ) ) { $result['valid'] = false; $result['reason'] = array( 'fav-etc' => '「好きなもの」の「その他」の欄を記入してください。'); return $result; } return $result; } add_filter( 'wpcf7_validate', 'wpcf7_validate_fav_etc' ); |
結果
更新履歴
- 2016/10/07 「その他」に自由入力欄を追加する別の方法について説明を追加しました。
- 2016/01/07 初版