Contact Form7のバリデーション含めて、functions.phpに書くこと

当ページのリンクには広告が含まれています。

よく使用するものについてまとめました。

目次

CF7初期設定

スタイル調整

pタグ、brタグ削除

// Contact Form 7で自動挿入されるPタグ、brタグを削除
add_filter('wpcf7_autop_or_not', 'wpcf7_autop_return_false');
function wpcf7_autop_return_false() {
	return false;
}

バリデーション

ひらがな・カタカナのバリデーション

$name部分はフォームに合わせる

ふりがな(フリガナ)などで使用

// ひらがなバージョン
add_filter('wpcf7_validate_text*', 'validate_furigana_katakana', 10, 2);
add_filter('wpcf7_validate_text', 'validate_furigana_katakana', 10, 2);
function validate_furigana_katakana($result, $tag)
{
	$name = $tag->name;
	if ($name === 'your-furigana' || $name ==="other-furigana") {
		$value = isset($_POST[$name]) ? $_POST[$name] : '';
		if (!preg_match('/^[ぁ-んー\s]+$/u', $value)) {
			$result->invalidate($tag, 'ひらがなで入力してください。');
		}
	}
	return $result;
}
// カタカナバージョン
add_filter('wpcf7_validate_text*', 'validate_furigana_katakana', 10, 2);
add_filter('wpcf7_validate_text', 'validate_furigana_katakana', 10, 2);
function validate_furigana_katakana($result, $tag)
{
  $name = $tag->name;
  if ($name === 'your-furigana' || $name ==="other-furigana") {
    $value = isset($_POST[$name]) ? $_POST[$name] : '';
    // 全角カタカナと長音符・全角スペースを許可
    if (!preg_match('/^[ァ-ヶー ]+$/u', $value)) {
      $result->invalidate($tag, 'カタカナで入力してください。');
    }
  }
  return $result;
}

メールアドレス一致

//メールアドレス一致
function wpcf7_custom_email_validation_filter( $result, $tag ) {
  if ( 'your-email-confirm' == $tag->name ) {
    $your_email = isset( $_POST['your-email'] ) ? trim( $_POST['your-email'] ) : '';
    $your_email_confirm = isset( $_POST['your-email-confirm'] ) ? trim( $_POST['your-email-confirm'] ) : '';
    if ( $your_email != $your_email_confirm ) {
      $result->invalidate( $tag, "メールアドレスが一致しません" );
    }
  }
  return $result;
}
add_filter( 'wpcf7_validate_email', 'wpcf7_custom_email_validation_filter', 20, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_custom_email_validation_filter', 20, 2 );

「同意する」ボタンのチェック

エラーメッセージのカスタマイズ付

// 「同意する」ボタンのチェック
function custom_catalog_confirmation_validation_filter($result, $tag)
{
	$name = $tag->name;
	$is_required = $tag->is_required() ;
	$value = isset( $_POST[$name] ) ? (array) $_POST[$name] : array();

	if ( $is_required and empty( $value ) && $name == 'privacy') {
		$result->invalidate( $tag, '※同意するを選択してください。' );
	}
  return $result;
}
add_filter( 'wpcf7_validate_checkbox', 'custom_catalog_confirmation_validation_filter', 9, 2 );

エラー文カスタマイズ

functionsでバリデーションをかけるので、管理画面の「*」は外す( ❌[text* your-name]→⭕️[text your-name] )

// エラー文カスタマイズ
function custom_wpcf7_validation_error_message($result, $tag)
{
	$name = $tag->name;
	if ($name == 'your-name' && empty($_POST[$name])) {
		$result->invalidate($tag, 'お名前を入力してください。');
	}
	if ($name == 'furigana' && empty($_POST[$name])) {
		$result->invalidate($tag, 'お名前(ふりがな)をひらがなで入力してください。');
	}
	if ($name == 'company' && empty($_POST[$name])) {
		$result->invalidate($tag, '会社名を入力してください。');
	}
	if ($name == 'tel' && empty($_POST[$name])) {
		$result->invalidate($tag, '電話番号を入力してください。'); //number
	}
	if ($name == 'email' && empty($_POST[$name])) {
		$result->invalidate($tag, 'メールアドレスを入力してください。'); //email
	}
	if ($name == 'your-post' && empty($_POST[$name])) {
		$result->invalidate($tag, '郵便番号を入力してください。');
	}
	if ($name == 'your-region' && empty($_POST[$name])) {
		$result->invalidate($tag, '都道府県を入力してください。');
	}
	if ($name == 'your-locality' && empty($_POST[$name])) {
		$result->invalidate($tag, '市区郡を入力してください。');
	}
	if ($name == 'your-street-address' && empty($_POST[$name])) {
		$result->invalidate($tag, '町村を入力してください。');
	}
	if ($name == 'inquiry' && empty($_POST[$name])) {
		$result->invalidate($tag, 'お問い合わせ内容を入力してください。'); //textarea
	}
	if ($name == 'occupation' && empty($_POST[$name])) {
		$result->invalidate($tag, '応募職種を選択してください。'); //select
	}
	return $result;
}
add_filter('wpcf7_validate_text', 'custom_wpcf7_validation_error_message', 10, 2);
add_filter('wpcf7_validate_email', 'custom_wpcf7_validation_error_message', 10, 2);
add_filter('wpcf7_validate_textarea', 'custom_wpcf7_validation_error_message', 10, 2);
add_filter('wpcf7_validate_number', 'custom_wpcf7_validation_error_message', 10, 2);
add_filter('wpcf7_validate_select', 'custom_wpcf7_validation_error_message', 10, 2);

生年月日を動的にする

CF7に限らないけど管理画面がスッキリ

functions.php

function my_wpcf7_form_tag_data_option( $values, $options, $args ) {
    if( in_array( 'AutoYear', $options ) ) {
        $values = range( 1900, date('Y') );
        return $values;
    }
    if( in_array( 'AutoMonth', $options ) ) {
        $values = range( 1, 12 );
        return $values;
    }
    if( in_array( 'AutoDay', $options ) ) {
        $values = range( 1, 31 );
        return $values;
    }
}
add_filter( 'wpcf7_form_tag_data_option', 'my_wpcf7_form_tag_data_option', 10, 3 );

管理画面タグ

<dl class="birth-day">
    <dt>生年月日<span class="required">※必須</span></dt>
    <dd>
[select* birth_year data:AutoYear]年
[select* birth_month data:AutoMonth]月
[select* birth_day data:AutoDay]日
    </dd>
</dl>

テーマ制作の場合に便利なプラグイン

Code Snippets

テーマ制作の時など、管理画面からコードの一括管理ができて便利。有料版ではCSS, JSの管理もできる。

WordPress.org 日本語
Code Snippets An easy, clean and simple way to enhance your site with code snippets.

以上です。随時追加します!

\Web制作コーダーの営業にオススメ!/

こんな不安を解決します!

  • Web制作の面談ってどんなこと聞かれるの?
  • どんな風に答えればいいの?
  • オンラインの面談って何を準備したらいいの?

"少しでも面談の不安を減らしたい"という方はぜひお手に取ってみてください!

ゆき
体育会系2児ママ
Web制作コーダー(元理学療法士)。子供の出産を機に働き方を考え直しWeb制作の学習を始める。現在はフリーランスとして在宅ワークで活動中。
よかったらシェアしてね!
  • URLをコピーしました!
目次