kdcsライブラリー

バリデーションを設定する

※お問い合わせ内容がテキストエリア[your-message*]と必須になっている場合（*が付いている）
「wpcf7_validate_textarea*」こちらにも*を付けることによって指定できる。
未入力の場合は指定したエラーメッセージ、例えば「必須項目に入力してください。」、URLを入力した場合「URLの入力はできません」というエラーメッセージを出す。
URLはhttps、httpどちらもエラーになる。

functions.php

add_filter('wpcf7_validate_textarea*', 'custom_validate_no_urls', 20, 2);

function custom_validate_no_urls($result, $tag) {
    $name = $tag->name;
    $value = isset($_POST[$name]) ? $_POST[$name] : '';

    if (preg_match('/https?:\/\/[^\s]+/', $value)) {
        $result->invalidate($tag, 'URLの入力はできません');
    }
    return $result;
}

お問い合わせ内容の入力にURLが含まれる場合はエラーメッセージを出す。

functions.php

function wpcf7_validate_custom($result, $tag) {
    $value = esc_attr($_POST['your-message']);
    if (!empty($value)) {
        if (preg_match('/https?:\/\/[\w\/:%#\$&\?\(\)~\.=\+\-]+/', $value)) {
            $result->invalidate($tag, 'URLは入力できません');
        }
    }
    return $result;
}
add_filter('wpcf7_validate_textarea', 'wpcf7_validate_custom', 10, 2);

確認時のContact Form7のバージョンは5.9.8
プラグインが吐き出すcssについては以前からfunctions.phpの「wp_head関連 wp_headでプラグインのcssを読み込ませない」で対応していたが、最新バージョンのContactForm7ではwp_footerに出力されるjavascriptが多くなっている。
全ページに出力されるため、必要のないページには読み込ませない方法。（公式サイトより）

functions.php

// contactform7関連 wp_headでcss、wp_footerでjavascriptを読み込ませない-------------------
// ※cssはwp_head関連の「cssを読み込ませない」で対応中------------------------------------
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

footer.php
お問い合わせ（contact）来店予約（reservation）の場合

<?php if (is_page('reservation')||is_page('contact')): ?>
<?php
    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
        wpcf7_enqueue_scripts();
    }
    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
        wpcf7_enqueue_styles();
    }
?>
<?php endif; ?>

基本的にcssはwp_head関連の「cssを読み込ませない」で対応中なのでfooter.phpはスクリプトの記述だけでよい

Contact Form 7で入力例としてplaceholder属性を付ける場合のコード
例として氏名を必須にし、入力例を「田中　太郎」にする

[text* your-name autocomplete:name placeholder "田中　太郎"]

これで出力されるhtml

<div id="entryForm">
<input size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" autocomplete="name" aria-required="true" aria-invalid="false" placeholder="田中　太郎" value="" type="text" name="your-name" />
</div><!--/#entryForm-->

このinputタグ内のplaceholder属性にcssを適用する

#entryForm input::-webkit-input-placeholder {
    color: #aaa;
    font-size: 77%;
}
#entryForm input::-moz-placeholder {
    color: #aaa;
    font-size: 77%;
}
#entryForm input:-ms-input-placeholder {
    color: #aaa;
    font-size: 77%;
}

【注意】
このプレフィックスのついたcssをまとめて一括指定すると何故か適用されない

Contact Form 7のバージョン5.7からpタグとbrタグが自動で挿入される
これを無効化する方法

wp-config.phpに記述する方法

define ('WPCF7_AUTOP', false);

functions.phpに記述する方法

add_filter('wpcf7_autop_or_not', 'wpcf7_autop_return_false');
function wpcf7_autop_return_false() {
  return false;
}