カテゴリー
WordPressプラグイン

Contact Form 7 おさえておきたいチューニング3選

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()によって、フッタ部分に出力されます。
複数のフォームで異なる送信完了ページの指定はこちらを参照ください。

Contact Form 7へサンクスページをつける(最新版)

コンバージョン計測

アナリティクスでの送信コンバージョンはこの送信完了ページの表示を目標とすることで簡単に計測することが可能です。

下記はイベントとして計測する方法です。

Contact Form 7の送信をアナリティクスで計測する

CF7関連ファイルの出力制御

Contact Form 7 では、wp_head()にフックしてヘッダにscriptCSSが出力されます。
ただ、フォーム設置ページ以外にもサイト全体、つまり、必要のないページにも出力されます。
ページスピードインサイトなどでも指摘される部分です。
無駄な読み込みを避けるためにフォーム設置ページにのみ出力します。

<?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 をより活かす、おさえておきたいチューニング解説でした。

profile image

執筆:R3098

WEBサービス構築・監修が生業です。WordPress 関連では Aurora Heatmap などのプラグイン開発も行っています。サイト運営者の力になりたいと考えます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトは reCAPTCHA によって保護されており、Google のプライバシーポリシー および 利用規約 に適用されます。

reCaptcha の認証期間が終了しました。ページを再読み込みしてください。