WordPress Contact Form 7 導入時のカスタマイズ

－ WordPress Contact Form 7 導入時のカスタマイズ－

ウェブサイトを納品する際、「WordPress」でウェブサイトを構築されている方も多いのではないでしょうか？
統計によると、WordPressの市場シェアは、全ウェブサイトの約42%と言われています。主要なCMSで作成されたものに限定すると、その市場シェアは約62%と圧倒的です。
その理由としては、ブログだけではなく、企業のコーポレートサイトやソリューションサイトのCMS(コンテンツ管理システム)化、「WooCommerce」などのプラグインを使用したECサイトの構築、各種提供されているプラグインの導入により、問い合わせフォームやデータベース管理などが比較的簡単に実装できる点にあるのかと思います。
そこで今回の記事は「WordPressのプラグインであるContact Form 7 導入時のカスタマイズ」についてご紹介します。

Index

― 目次 ―

「Contact Form 7」について
自動挿入されるPタグ、brタグを削除
確認用メールアドレスを追加
送信後に「サンクスページ」を表示
プラグインのCSSとJavaScriptを指定ページのみ読み込む
Google reCAPTCHAを導入

「Contact Form 7」について

WordPressを利用されている方には有名のプラグインの1つである「Contact Form 7」。
WordPressに問い合わせフォームを実装することができるプラグインです。
随分以前から提供されているプラグインで、作者の方もプラグインのアップデートを頻繁に実施されているため、安心して利用することができるプラグインです。また、問い合わせフォームに必要な機能がひと通り網羅されている点も魅力の1つです。
今回の当記事では「Contact Form 7 導入時に合わせて対応しておきたいカスタマイズ」について、いくつかご紹介していきます。

「Contact Form 7の使い方」については、株式会社WEBST8(株式会社ウェブストエイト)さんが運用されているブログ記事がとても参考になりました(※以下の参考サイトのリンクよりご確認ください)。
参考サイト：【Contact Form 7の使い方】問い合わせフォーム作成方法

自動挿入されるPタグ、brタグを削除

「Contact Form 7」プラグインのフォーム作成画面(フォームタブで表示される画面)では、通常の投稿画面と同じように「改行=brタグ」「改段落=pタグ」が自動挿入されてしまいます。これを防ぎたい場合、functions.phpに以下を記述します。

// Pタグとbrタグを削除
function wpcf7_autop_return_false() {
  return false;
}
add_filter('wpcf7_autop_or_not', 'wpcf7_autop_return_false');

// Pタグとbrタグを削除

function wpcf7_autop_return_false() {

return false;

}

add_filter('wpcf7_autop_or_not', 'wpcf7_autop_return_false');

確認用メールアドレスを追加

「メールアドレスの入力間違いを防ぐ」ため、フォームに設置される「確認用メールアドレス」を「Contact Form 7」に設置します。
必要な内容は、「メールアドレスと確認用メールアドレスの判定」です。
functions.phpに以下を記述します。

// 確認用メールアドレスを追加
function wpcf7_validate_email_filter_extend( $result, $tag ) {
  $type = $tag['type'];
  $name = $tag['name'];
  $_POST[$name] = trim( strtr( (string) $_POST[$name], "n", " " ) );
  if ( 'email' == $type || 'email*' == $type ) {
     if (preg_match('/(.*)_confirm$/', $name, $matches)){ // 確認用メールアドレスの入力フォーム名 → ○○○_confirmにする
         $target_name = $matches[1];
          if ($_POST[$name] != $_POST[$target_name]) {
              if (method_exists($result, 'invalidate')) {
                  $result->invalidate( $tag,"確認用のメールアドレスが一致していません");
              } else {
                  $result['valid'] = false;
                  $result['reason'][$name] = '確認用のメールアドレスが一致していません';
              }
          }
     }
  }
  return $result;
}
add_filter( 'wpcf7_validate_email', 'wpcf7_validate_email_filter_extend', 11, 2 );
add_filter( 'wpcf7_validate_email*', 'wpcf7_validate_email_filter_extend', 11, 2 );

// 確認用メールアドレスを追加

function wpcf7_validate_email_filter_extend( $result, $tag ) {

$type = $tag['type'];

$name = $tag['name'];

$_POST[$name] = trim( strtr( (string) $_POST[$name], "n", " " ) );

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

if (preg_match('/(.*)_confirm$/', $name, $matches)){ // 確認用メールアドレスの入力フォーム名 → ○○○_confirmにする

$target_name = $matches[1];

if ($_POST[$name] != $_POST[$target_name]) {

if (method_exists($result, 'invalidate')) {

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

} else {

$result['valid'] = false;

$result['reason'][$name] = '確認用のメールアドレスが一致していません';

}

return $result;

}

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

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

[補足]
「確認用メールアドレス」を追加する際、1つ注意点があります。それが7行目の記述。
「Contact Form 7」プラグインのフォーム作成画面(フォームタブで表示される画面)で作成するタグは、「○○○_confirm」とするようにしてください。例えば「your-email_confirm」(※タグ作成時には「任意の名称_confirm」とする)。
11行目と14行目は「メールアドレスと確認用メールアドレスが一致しない場合に表示されるエラー文」です。
フォームページでの表示イメージは、以下のようになります。

－確認用メールアドレス－

送信後に「サンクスページ」を表示

「Contact Form 7」のデフォルト設定では、フォーム内容を送信後に「サンクスページ(送信完了画面)」は表示されません。
送信ボタンの下あたりに「送信中です…」と一瞬表示されるのですが、これではユーザーが送信できたかが分かりにくいため、送信後に「サンクスページ」を表示するようにします。
まずは、WordPressの固定ページで「サンクスページ(送信完了画面)」を作成します。
作成できたら、functions.phpに以下を記述します。

// 送信後に「サンクスページ」を表示
function redirect_to_thanks_page() {
  $homeUrl = home_url();
  echo <<< EOD
    <script>
      document.addEventListener( 'wpcf7mailsent', function( event ) {
        location = '{$homeUrl}/thanks/';
      }, false );
    </script>
  EOD;
}
add_action('wp_footer', 'redirect_to_thanks_page');

// 送信後に「サンクスページ」を表示

function redirect_to_thanks_page() {

$homeUrl = home_url();

echo <<< EOD

document.addEventListener( 'wpcf7mailsent', function( event ) {

location = '{$homeUrl}/thanks/';

}, false );

</script>

EOD;

}

add_action('wp_footer', 'redirect_to_thanks_page');

[補足]
7行目が「固定ページで作成したサンクスページのURL」です。
「$homeUrlがTOPページ」となりますので、続けて「作成した固定ページのスラッグ」を記述します。
送信完了ページのイメージは、以下のようになります。

－サンクスページ(送信完了画面) －

プラグインのCSSとJavaScriptを指定ページのみ読み込む

WordPressでプラグインを導入した場合、基本的に全てのページでそのプラグインが使用しているCSSとJavaScriptが読み込まれます(※1)。
サーバーの負荷にもつながりますし、フォームを使用していないページに「Contact Form 7」のCSSやJavaScriptは不要です。
そこで、「Contact Form 7を使用している指定のページのみにCSSとJavaScriptを読み込む」ようにします。

※1：CSSはheader.phpに記述している「wp_head();」、JavaScriptはfooter.phpに記述している「wp_footer();」箇所に読み込まれますので、このような場合「全てのページでそのプラグインが使用しているCSSとJavaScriptが読み込まれる」ことになります

functions.phpに以下を記述します。

// CSSとJavaScriptを指定ページのみ読み込む
function cf7_enqueue_scripts_and_styles(){
	if ( is_page( 'contact' ) ) {
	    if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
	        wpcf7_enqueue_scripts();
	    }
	    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
	        wpcf7_enqueue_styles();
	    }
	}
}
add_action( 'wp_enqueue_scripts', 'cf7_enqueue_scripts_and_styles');
add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

// CSSとJavaScriptを指定ページのみ読み込む

function cf7_enqueue_scripts_and_styles(){

if ( is_page( 'contact' ) ) {

if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {

wpcf7_enqueue_scripts();

}

if ( function_exists( 'wpcf7_enqueue_styles' ) ) {

wpcf7_enqueue_styles();

}

add_action( 'wp_enqueue_scripts', 'cf7_enqueue_scripts_and_styles');

add_filter( 'wpcf7_load_js', '__return_false' );

add_filter( 'wpcf7_load_css', '__return_false' );

[補足]
3行目が「固定ページcontact(スラッグ)を指定した条件分岐」です。
4～6行目が「Contact Form 7のJavaScriptを読み込む」。
7～9行目が「Contact Form 7のCSSを読み込む」。

Google reCAPTCHAを導入

「Google reCAPTCHA」は、ウェブサイトの特定エリアへのアクセスを試みるボットからサイトを防御するための機能です。
皆さんも、お問い合わせフォームなどを送信する際「私はロボットではありません」というチェックボックスにチェックを入れたり、画像で表示されたランダムなアルファベットやひらがなを入力された経験があるかと思います。これらには「reCAPTCHA」の仕組みの一部が利用されています。「reCAPTCHA」には、v1～v3のバージョンがあり、v3が登場したことにより、ユーザビリティが改善され使いやすくなりました。

[各バージョンの特徴]

v1：OCRが読み取れなかった文字の解読で認証
※画像で表示されたランダムなアルファベットやひらがなを入力して認証を行います
v2：チェックボックス(私はロボットではありません)をクリックし認証
※チェックボックスにクリックした際、画像に点在する車や信号機などを選択させて認証を行います
v3：スコア判定でボットによるアクセスを除外

当記事では、現時点での最新バージョンである「Google reCAPTCHA v3の導入手順」と「WordPress Contact Form 7 で利用する際のカスタマイズ」についてご紹介します。

[Google reCAPTCHA v3の導入手順]

Google reCAPTCHA認証のコンソールサイトにアクセス
ページ上部に表示される「v3 Admin Console」をクリック
※Googleアカウントをお持ちでない方はアカウントを取得してください
※Google翻訳で日本語を選択いただくと分かりやすいかと思います
ページ上部に表示される「＋(プラスボタン)」をクリック
Google reCAPTCHAのサイト情報の登録画面が開きます
項目を選択・入力する
・ラベル：任意の文字列を入力
・reCAPTCHAタイプ：｢スコアベース(v3)｣を選択
・ドメイン： reCAPTCHA v3を使うウェブサイトのドメインを入力
・内容を確認し「送信」をクリック
「サイトキー」と「シークレットキー」を控える
Google reCAPTCHAのサイト情報の登録完了画面が開きますので、「サイトキー」と「シークレットキー」を控えておきます
「Contact Form 7」と「Google reCAPTCHA v3」を連携する
1. WordPressの管理画面左側のメニューに表示されているContact Form 7の[お問い合わせ] → [インテグレーション]をクリック
2. 「reCAPTCHA」の[インテグレーションのセットアップ]をクリック
3. Google reCAPTCHA認証のコンソールサイト登録時に控えた「サイトキー」と「シークレットキー」を入力し、[変更を保存]ボタンをクリック

[WordPress Contact Form 7 で利用する際のカスタマイズ]

「Google reCAPTCHA v3の導入手順」を行うと「reCAPTCHAバッジ」が表示されるようになります。
デフォルト設定では「Webサイトの全ページに表示」されてしまいます。「問い合わせフォームを設置したページ」のみでよいので、CSSを編集して「reCAPTCHAバッジを非表示」にすることができます。
CSSで以下を追記します。

/* reCAPTCHAバッジを非表示 */
.grecaptcha-badge {
    visibility: hidden;
}

/* reCAPTCHAバッジを非表示 */

.grecaptcha-badge {

visibility: hidden;

}

[補足]
上記の記述で「Webサイトの全ページからreCAPTCHAバッジを非表示」にすることができますが、Google reCAPTCHAのサポートページでは、reCAPTCHAバッジを非表示にした場合「ユーザーフローにreCAPTCHAのブランドを明示する限り、バッジは非表示にできます」と記載されていますので、注意が必要です。
そこで、上記CSSで「reCAPTCHAバッジを非表示にした際、バッジの代わりにテキストとリンクを表示する例」と「reCAPTCHAバッジを指定ページのみに表示する方法」をご紹介します。

「reCAPTCHAバッジを非表示にした際、バッジの代わりにテキストとリンクを表示する例」は、HTMLで以下を記述します。

<!--reCAPTCHAバッジの代わりにテキストとリンクを表示-->
<div style="font-size: 12px; line-height: 1.6em; text-align: center;">
このサイトはreCAPTCHAによって保護されており<br>Googleの<a href="https://policies.google.com/privacy" target="_blank" rel="noopener">プライバシーポリシー</a>と<a href="https://policies.google.com/terms" target="_blank" rel="noopener">利用規約</a>が適用されます。
</div>

このサイトはreCAPTCHAによって保護されており<br>Googleの<a href="https://policies.google.com/privacy" target="_blank" rel="noopener">プライバシーポリシー</a>と<a href="https://policies.google.com/terms" target="_blank" rel="noopener">利用規約</a>が適用されます。

</div>

以下がその表示例です。

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

「reCAPTCHAバッジを指定ページのみに表示する方法」は、functions.phpに以下を記述します。

// お問い合わせページのみreCAPTCHAバッジを表示
function load_recaptcha_js() {
 if ( ! is_page( 'contact' ) ) {
  wp_deregister_script( 'google-recaptcha' );
 }
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );

// お問い合わせページのみreCAPTCHAバッジを表示

function load_recaptcha_js() {

if ( ! is_page( 'contact' ) ) {

wp_deregister_script( 'google-recaptcha' );

}

add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );

[補足]
3行目が「固定ページのcontact(スラッグ)以外のページでJSファイルを読み込まない=reCAPTCHAバッジを非表示」。
7行目が「フックの優先度」。
※「フックの優先度」は、初期値の10だと機能しないようですので100としています。

指定したページでreCAPTCHAバッジが表示されない場合、CSSでのレイヤー位置に問題があるかと思いますので、以下を追記しCSSでz-indexを調整してみてください。

/* reCAPTCHA */
.grecaptcha-badge {
  z-index: 50;
  bottom: 0px !important;
}

/* reCAPTCHA */

.grecaptcha-badge {

z-index: 50;

bottom: 0px !important;

}

[補足]
3行目が「z-indexでの階層指定」。
4行目が「reCAPTCHAバッジの縦位置の調整」。
※画面下部に固定の表示例です。「ページTOPリンク」や「フッター」位置の兼ね合いで縦位置を調整したい場合、値を変更してください。
以下がその表示例です。

－ reCAPTCHAバッジ－

今回は「WordPress Contact Form 7 導入時のカスタマイズ」についてご紹介しました。
Contact Form 7 導入時の参考になりましたら幸いです。

PHP WordPress カスタマイズプラグイン

Prev Next