Contact Form 7の実装Tips①

本記事は WordPress Advent Calendar 2021 5日目の記事です。
普段からよくお世話になっている Contact Form 7 ですが、ここ最近で色んなカスタマイズをしたので紹介したいと思います。

本当はこの1記事に今までの成果を全部載せようとしたのですが、ちょっと大がかりな実装例があって内容がモリモリになってしまったので、分割して投稿することにしました。同カレンダーの12日目に投稿するので、そちらもどうぞよろしくお願いします。

そんなわけで本記事では割と軽めのカスタマイズ例をまとめてご紹介します。
実装の助けになれば幸いです。

郵便番号から住所を自動入力させる

YubinBango を利用することで実装することができます。
概ね、以下の参考記事の通りにコードを書けば問題ありません。

ただし、都道府県の入力欄にセレクトボックスを使う場合は、当該記事のコードそのままでは実装できません。
最終コードは以下のようになります。

/* ==========================================================================
// 郵便番号から住所自動入力
============================================================================= */
// JS読み込み
wp_enqueue_script('yubinbango','https://yubinbango.github.io/yubinbango/yubinbango.js',array(),false,true );

// 都道府県のoptionのvalueを書き換え
function select_values_set($tag){
	if($tag['name']!='your-region'){
		return $tag;
	}
	$region_id=0;
	foreach($tag['raw_values'] as $option){
		$region_id++;
		$region_value[]=$region_id;
	}
	$tag['values']=$region_value;
	return $tag;
}
add_filter('wpcf7_form_tag', 'select_values_set', 10);

// メール内の都道府県名を書き換え
function wpcf7_mail_rewrite( $replaced, $submitted, $html, $mail_tag ) {
	$regions = array(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=>'沖縄県');
	if ( 'your-region' === $mail_tag->field_name() ) {
		$submittedValue = $submitted[0];
		$replaced = $regions[$submittedValue];
	}
	return $replaced;
}
add_filter( 'wpcf7_mail_tag_replaced', 'wpcf7_mail_rewrite', 10, 4 );

当該記事では「ContactForm7 5.2.1以降、引数の $submitted の中身が空になってしまう」と書いてありましたが、実際のところ、$submitted の中身は配列になっており、そのままだと出力できません。

そのため、最終コードの下から6行目にあるこの1文で、都道府県コードを取得します。

$submittedValue = $submitted[0];

あとは記事で紹介されている通り、取得した都道府県コードと $regions を照合した結果を返せばOKです。

フォーム内にプライバシーポリシーのテキストを挿入し、かつ他のフォームでも使いまわす

送信ボタンの直上にプライバシーポリシーをスクロール形式で見せるときってありますよね。
管理画面のフォーム編集画面に直接HTMLを入れて実装すると、複数のフォームで同じ文面を使いまわしている場合、修正が面倒です。

そこで、公式が紹介している独自のフォームタグの追加方法を参考に、プライバシーポリシーの文章を出力する専用のフォームタグを作成します。

記事では現在時刻を単純表示していますが、これを get_template_part で特定のファイルを呼び出すようにします。
これにより、プライバシーポリシー部分を一元管理できるほか、テキスト修正のため管理画面で編集しなくても済むようになります。

①適当にプライバシーポリシーの文章をマークアップしたファイルを作ります。
ファイルの置き場は自由ですが、ここでは get_template_part で呼び出すときに分かりやすいよう、テーマファイルの中に入れてしまいます。

privacyPolicy.php

<div class="form__privacyPolicy">
	<p>株式会社ほげほげ（以下「当社」といいます）は…（以下略）</p>
</div>

②functions.php に、①で用意したファイルをCF7のテンプレート内で [privacy] と記載することで読み込むようにするコードを書きます。

functions.php

/* ==========================================================================
// プライバシーポリシーのフォームタグ化
============================================================================= */
add_action( 'wpcf7_init', 'custom_add_form_tag_privacy' );
function custom_add_form_tag_privacy() {
	wpcf7_add_form_tag( 'privacy', 'custom_privacy_form_tag_handler' );
}
function custom_privacy_form_tag_handler( $tag ) {
	ob_start();
	get_template_part('privacyPolicy');
	return ob_get_clean();
}

③管理画面のフォーム編集画面で、プライバシーポリシーを表示したいところに [privacy] を入力します。

フォーム編集画面

<div class="form">
    （中略）
    <div class="form__acceptance">
        プライバシーポリシー
        [privacy]
    </div>
    <div class="form__submit">[submit "プライバシーポリシーに同意して送信"]</div>
</div>

④①で用意したテンプレートが表示側に反映されます。あとはお好みでスタイリングなどを行ってください。

自動送信メールで良い感じの日付表示にする

例えば [date your-date] という形で日付入力のフォームを作ったとします。
普通にメールタグで '[your-date]' と記述すると 2021-12-05 のような表記になりますが、 [_format_your-date "Y年 n月 j日"] と記載すると、 2021年 12月 5日 という表記に変わります。

公式ドキュメントに記載されているので、知っている人が多いかもしれません。
私は先日気づきました。ドキュメントはちゃんと読みましょう（戒め）。

終わりに

今回の実装Tipsは以上です。
他に「ちょい足しするだけでこんなことができるよ！」といったTipsがありましたら、是非コメントで教えてください！