Contact Form 7 はとても有能なフォームプラグインです。
ただ、プラグイン側での汎用的な制御が難しい部分はテーマを通じてカスタマイズする必要があります。
このサイトでもいくつかContact Form 7 のカスタマイズ情報を載せていますが、今回は「ここはおさえておきたい」チューニングをまとめてみようと思います。
送信完了ページ
まずは送信完了後のいわゆるサンクスページです。
送信完了ページ自体は固定ページで作成します。
ここでは作成そのものは割愛しますが、下記例ではスラッグthanksとなります。
つまり、送信完了ページのURLはexample.com/thanks/です。
その上で送信完了後に送信完了ページに移管する仕組みを加えます。
<?php //cf7サンクスページの追加
add_action('wp_footer','add_thanks');
function add_thanks(){
$home_url = esc_url(home_url('thanks'));
echo <<<EOF
<script>
document.addEventListener('wpcf7mailsent',function(event){
location = '{$home_url}';
}, false);
</script>
EOF.PHP_EOL;
}
?>記述場所はお使いのテーマのfunctions.phpです。
実際のスクリプトはwp_footer()によって、フッタ部分に出力されます。
複数のフォームで異なる送信完了ページの指定はこちらを参照ください。
コンバージョン計測
アナリティクスでの送信コンバージョンはこの送信完了ページの表示を目標とすることで簡単に計測することが可能です。
下記はイベントとして計測する方法です。
CF7関連ファイルの出力制御
Contact Form 7 では、wp_head()にフックしてヘッダにscriptやCSSが出力されます。
ただ、フォーム設置ページ以外にもサイト全体、つまり、必要のないページにも出力されます。
ページスピードインサイトなどでも指摘される部分です。
無駄な読み込みを避けるためにフォーム設置ページにのみ出力します。
<?php //cf7関連ファイルを指定条件ページだけでロード
add_filter('wpcf7_load_js','__return_false');
add_filter('wpcf7_load_css','__return_false');
add_action('wp_enqueue_scripts','cf7_script_and_style' );
function cf7_script_and_style(){
if(is_page('contact')){
if(function_exists('wpcf7_enqueue_scripts')) wpcf7_enqueue_scripts();
if(function_exists('wpcf7_enqueue_styles')) wpcf7_enqueue_styles();
}
}
?>こちらもfunctions.phpに記述します。
この例では、フォームは固定ページでスラッグcontactとして作成します。
フォームが複数の場合はis_page(array('contact','form'))のようにカンマ区切りで指定します。
このあたりはいろんなな条件分岐が考えられます。
たとえば、if(is_page_template('contact.php'))というような形で使用テンプレートで指定してもよいでしょう。
reCAPTCHA
スパム送信を防止するreCAPTCHAはGoogleで提供されているサービスです。
よく見かける「私はロボットではありません」という画像を選ぶやつです。
V3からは必要なとき、つまり、あやしいと判定された場合のみ機能します。
いくつかWordPressプラグインとして存在しますが、Contact Form 7 自体でreCAPTCHAを使うことが可能なので、追加のプラグインは不要です。
Googleで発行したサイトキーとシークレットキーのふたつをContact Form 7 のインテグレーションにて設定します。
これだけでContact Form 7 にreCAPTCHA機能を追加できます。
https://www.google.com/recaptcha/about/
コメント機能を使っている場合はこちらも制御できるreCAPTCHAプラグインの方がよいでしょう。
バッチの非表示
reCAPTCHAのマークは視覚的な抑止効果もありますが、コンテンツに隠れてしまう、煩わしいなど邪魔になるケースもあります。
このような際はCSSで非表示にできます。
.grecaptcha-badge { visibility: hidden; }以上、Contact Form 7 をより活かす、おさえておきたいチューニング解説でした。
