kdcsライブラリー

お問い合わせメールフォームなどを作成するときラジオボタンやチェックボックスを使うことがあるが、contactform7のデフォルトではラベル付けが行われないためボタンやボックスを直接クリックしなければならない。

スマホではラジオボタンやチェックボックスが小さいためクリックしづらいので選択項目のテキスト部分を含めクリックできるようにしたい。

contactform7では、個々のチェックボックス(またはラジオボタン)を タグで囲む「use_label_element」が用意されている。

例：個人と法人を選択してもらうラジオボタン

<p>[radio your-type use_label_element "個人" "法人"]</p>

出力されるhtml

<p><span class="wpcf7-form-control-wrap your-type"><span class="wpcf7-form-control wpcf7-radio"><span class="wpcf7-list-item first"><label><input type="radio" name="your-type" value="個人" />&nbsp;<span class="wpcf7-list-item-label">個人</span></label></span><span class="wpcf7-list-item last"><label><input type="radio" name="your-type" value="法人" />&nbsp;<span class="wpcf7-list-item-label">法人</span></label></span></span></span></p>

ラジオボタンを横並びにする場合のcss
※wpcf7-list-item-labelというクラスにマージンを加え項目の間隔調整を行う

#mailform input[type=radio] {
    display: inline-block;
}
.wpcf7-list-item-label {
    margin: 0 30px 0 0;
}

「use_label_element」を知る以前の記述
個々の選択項目にラベル付けは行え、出力もされるが、未選択の場合name属性のyour-typeがcontactform7内で処理されないため[your-type]のテキストが出力されてしまう。

<p>個人または法人を選択してください<br><span class="wpcf7-list-item"><input type="radio" name="your-type" id="personal" value="個人"><label class="wpcf7-list-item-label" for="personal">個人</label></span><span class="wpcf7-list-item"><input type="radio" name="your-type" id="office" value="法人"><label class="wpcf7-list-item-label" for="office">法人</label></span></p>

wordpressオリジナルテーマの場合、

<?php wp_footer(); ?>

上記テンプレートタグを記述しないとプラグインのスクリプトなどが自動で読み込まれない。

contactform7で承認確認ボタンを設置した場合、以下を読み込ませなければ
承認確認ボタンをチェックしていない状態でも送信ボタンが有効になってしまう。

<?php if (is_page('contact')): ?>
<script>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"http:\/\/kdcs-web.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"},"recaptcha":{"messages":{"empty":"\u3042\u306a\u305f\u304c\u30ed\u30dc\u30c3\u30c8\u3067\u306f\u306a\u3044\u3053\u3068\u3092\u8a3c\u660e\u3057\u3066\u304f\u3060\u3055\u3044\u3002"}}};
/* ]]> */
</script>
<script src="<?php bloginfo('url'); ?>/wp-content/plugins/contact-form-7/includes/js/scripts.js"></script>
<?php endif; ?>

contactform7にはメールアドレスが正しく入力されたか確認するための「もう１度同じメールアドレスを！」「確認用メールアドレス」が無いので、その対処法。

wordpressのバージョン 4.3.9と4.4
contactform7のバージョン 4.3.1

function.phpに以下を記述

//コンタクトフォームに確認用メールアドレスを追加------------------------------------------
function wpcf7_text_validation_filter_extend( $result, $tag ) {
global $my_email_confirm;
$tag = new WPCF7_Shortcode( $tag );
$name = $tag->name;
$value = isset( $_POST[$name] )
? trim( wp_unslash( strtr( (string) $_POST[$name], "\n", " " ) ) ): '';
 if ($name == "your-email"){
 $my_email_confirm=$value;
 }
 if ($name == "your-email-confirm" && $my_email_confirm != $value){
 $result->invalidate( $tag,"確認用のメールアドレスが一致していません");
 }
return $result;
}
add_filter( 'wpcf7_validate_email', 'wpcf7_text_validation_filter_extend', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_text_validation_filter_extend', 11, 2 );

contactform7の編集画面でコードを追加

<p><label><span class="required">必須</span> メールアドレス <br>[email* your-email] </label></p>
<p><label><span class="required">必須</span> 確認用メールアドレス <br>[email* your-email-confirm] </label></p>

contactform7で正常にメール送信が行われた場合に別ページ（送信完了ページ）を表示させる
リダイレクトの方法
header.phpまたはfooter.phpに記述
条件分岐で該当のページだけに入れるか、外部スクリプトにする（未検証）

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
    location = 'http://example.com/';
}, false );
</script>

リダイレクト先のurlを書き換える