Wordpress ContactForm7設置時にしておきたいこと

2020-06-18

プラグイン等について、触れてきていなかったので、ぼちぼちメモを残していこうかと思います。
まずは、Contact Form 7 についてです。

承認承諾のチェックボックス

メールフォームを設置する場合、プライバシーポリシーを読んでもらい、フォーム送信に同意を確認する目的でチェックボックスを設置したりするケースがあります。
ただのチェックボックスを配置しても、送信ボタンが押せてしまうため、送信ボタンと連動して、同意していなければ、送信できないようにする必要があります。
そこで、Contact Form 7では、送信ボタンと連動させる方法があります。
[acceptance]タグを使用することで、承認承諾のチェックボックスを導入できます。
コンタクトフォーム編集画面の｢フォーム｣タブに承認確認タグが用意されているので、それを使用します。

[acceptance your-accept] このサイトに同意して送信します [/acceptance]
<div class="btn">[submit "送信"]</div>

1 2	[acceptance your-accept] このサイトに同意して送信します [/acceptance] <div class="btn">[submit "送信"]</div>

といった感じで挿入し、送信ボタンは一緒には挿入されませんので、別途、divなどで囲んで、挿入しておきます。

そして、コンタクトフォーム編集画面の｢その他の設定｣タブに下記を追記しておきます。

acceptance_as_validation: on

1	acceptance_as_validation: on

出力されるhtmlは下記の様になります。

<span class="wpcf7-form-control-wrap acceptance">
	<span class="wpcf7-form-control wpcf7-acceptance">
		<span class="wpcf7-list-item">
			<label><input type="checkbox" name="acceptance" value="1" aria-invalid="false">
				<span class="wpcf7-list-item-label">このサイトに同意して送信します</span>
			</label>
		</span>
	</span>
</span>
<div class="btn">
	<input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit" disabled="">
	<span class="ajax-loader"></span>
</div>

<span class="wpcf7-list-item-label">このサイトに同意して送信します</span>

</label>

</span>

</div>

あとは、CSSなどで装飾などはしていくと良いでしょう。

補足

WordPress側で読み込んでいるjQueryをfunction.phpなどへの記述で、読み込ませないようにしていたりすると、うまく動作しない場合がありますので、ご注意ください。

確認用メールアドレスの入力

もう一点、メールフォームの導入時に、よく用いられる確認用メールアドレスの入力についてもメモしておこうと思います。
まず、function.phpに下記を記載します。

add_filter( 'wpcf7_validate_email', 'wpcf7_validate_email_filter_confrim', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_validate_email_filter_confrim', 11, 2 );
function wpcf7_validate_email_filter_confrim( $result, $tag ) {
	$type = $tag['type'];
	$name = $tag['name'];
	if ( 'email' == $type || 'email*' == $type ) {
		if (preg_match('/(.*)_confirm$/', $name, $matches)){ //確認用メルアド入力フォーム名を xxx_confirm としています。
			$target_name = $matches[1];
				$posted_value = trim( (string) $_POST[$name] ); //前後空白の削除
				$posted_target_value = trim( (string) $_POST[$target_name] ); //前後空白の削除
			if ($posted_value != $posted_target_value) {
				$result->invalidate( $tag,"確認用のメールアドレスが一致していません");
			}
		}
	}
	return $result;
}

add_filter( 'wpcf7_validate_email', 'wpcf7_validate_email_filter_confrim', 11, 2 );

add_filter( 'wpcf7_validate_email*', 'wpcf7_validate_email_filter_confrim', 11, 2 );

function wpcf7_validate_email_filter_confrim( $result, $tag ) {

$type = $tag['type'];

$name = $tag['name'];

if ( 'email' == $type || 'email*' == $type ) {

if (preg_match('/(.*)_confirm$/', $name, $matches)){ //確認用メルアド入力フォーム名を xxx_confirm としています。

$target_name = $matches[1];

$posted_value = trim( (string) $_POST[$name] ); //前後空白の削除

$posted_target_value = trim( (string) $_POST[$target_name] ); //前後空白の削除

if ($posted_value != $posted_target_value) {

$result->invalidate( $tag,"確認用のメールアドレスが一致していません");

}

return $result;

}

そして、コンタクトフォーム編集画面の｢フォーム｣タブで、メールアドレスのタグを利用して、入力していきます。
確認用のメールアドレスの名前の部分に、_confirmを入れておくのを忘れないようにしてください。

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

<p>メールアドレス確認用 <span class="required">必須</span>
[email* your-email_confirm placeholder "確認のためもう一度入力してください"]</p>

<p>メールアドレス <span class="required">必須</span>

[email* your-email]</p>

<p>メールアドレス確認用 <span class="required">必須</span>

[email* your-email_confirm placeholder "確認のためもう一度入力してください"]</p>

以上が、Contact From 7プラグインでメールフォームを導入する際に、よく使用されるカスタムかと思います。