LION MEDIAのお問い合わせフォームにreCAPTCHAを設置する

WordPressテーマLION MEDIAの簡易お問い合わせフォームにGoogleのreCAPTCHAを設置してみました。

reCAPTCHAはお問い合わせフォームに入力しているのが、bot(ロボット操作)なのか、人間操作なのかを判断してくれるため、botがお問い合わせフォームから大量に送信してくる迷惑メールを減少する対策として効果的です。

1. LION MEDIAのお問い合わせフォーム
2. お問い合わせフォームをLION MEDIAで子テーマ化
3. reCAPTCHAに登録して設置の準備
4. LION MEDIAにreCAPTCHAのコードを設置
5. まとめ

LION MEDIAのお問い合わせフォーム

はじめにLION MEDIAのお問い合わせフォームを作成するところから説明します。

LION MEDIAのお問い合わせフォームはWordPressの固定ページで作成します。

固定ページの新規作成ページでページタイトルを「お問い合わせ」にして、テンプレートをLION MEDIAの「お問い合わせTPL」にします。お問い合わせTPLの選択はサイドメニューのテンプレートで選択できます。

そして、お問い合わせTPLページのパーマリンクをURLスラッグの入力ボックスに入力して決めておきます。

お問い合わせフォームページのパーマリンクは、例えばURLスラッグをcontactにしたらLION MEDIAのお問い合わせページにhttps://ドメイン名/contact/でアクセスできることになります。

次にLION MEDIAのお問い合わせTPLページ編集画面の下部にあるSEO対策でnoindexを設定します。

仕上げに公開ボタンをクリックするとLION MEDIAのお問い合わせページは公開されて、編集画面で設定したパーマリンクで表示することができます。

次の作業に進みます。

お問い合わせフォームをLION MEDIAで子テーマ化

LION MEDIAのお問い合わせフォームは親テーマのテンプレートを編集せずに子テーマ化したお問い合わせテンプレートのファイルを編集してreCAPTCHAを設置します。

LION MEDIAの親テーマはWordPressをインストールしているフォルダからwp-content/themes/lionmediaまで階層を下げたlionmediaフォルダです。

そしてlionmediaフォルダ内でLION MEDIAのお問い合わせフォームに使用するテンプレートファイルはpage-contact.phpです。

親テーマlionmediaのフォルダに格納されているpage-contact.phpをコピーして子テーマlionmedia-childにpage-contact.phpをペーストします。

LION MEDIAのお問い合わせフォームにreCAPTCHAを設置するpage-contact.phpの子テーマ化は完成です。

念の為、子テーマのpage-contact.phpにVScodeなどのテキストエディタで適当な文字を入力してLION MEDIAのお問い合わせページに、その文字が出力されるのを確認しておくと良いです。

出力が確認できれば子テーマ化したLION MEDIAのお問い合わせページにreCAPTCHAを設置することができます。

reCAPTCHAに登録して設置の準備

LION MEDIAのお問い合わせフォームのテンプレートを子テーマにしたpage-contact.phpにreCAPTCHAを設置するためにreCAPTCHAの登録をして準備をします。

https://www.google.com/recaptcha/about/

上記URLをクリックすると上の画像のようにGoogleのreCAPTCHAのページが開きます。

開いたGoogle reCAPTCHAのページ上部の「v3 Admin Console」をクリックします。Googleにログインしてない場合はログインを求められるのでGoogleアカウントでログイン。

ログインするとreCAPTCHAタイプやreCAPTCHAを設置するドメインを登録するページになるはずです。reCAPTCHAの新規登録が初回だけだったので、もし間違えてたら検索で調べて情報を補完していただければと思います。

上の画像のような画面のページに辿り着いたらLION MEDIAのお問い合わせフォームに設置するために必要になるreCAPTCHAのサイトキーとシークレットキーを取得する以下の項目を入力とチェックで登録します。

ラベル

ラベルはreCAPTCHAを設置するお問い合わせフォームのサイト名を入力するなどreCAPTCHAを複数作成した場合でも分かりやすくなるように決めます。

reCAPTCHAタイプ

今回のreCAPTCHAタイプはreCAPTCHA v2をLION MEDIAのお問い合わせフォームに設置するのでreCAPTCHA v2にチェックを入れます。

ドメイン

ドメインはお問い合わせフォームにreCAPTCHAを設置するサイトのドメインをhttps://を省いて入力し登録します。

そしてreCAPTCHA 利用条件に同意するにチェック。

最後に送信ボタンをクリックします。

すると自動で切り替わったページで登録完了と共にサイトに使用できるreCAPTCHAのキーが取得できます。

reCAPTCHAのキーには「サイトキー」と「シークレットキー」があります。どちらもLION MEDIAのお問い合わせフォームにreCAPTCHAを設置するために使用します。

LION MEDIAにreCAPTCHAのコードを設置

WordPressの固定ページで作成したLION MEDIAのお問い合わせフォームのテンプレートに、GoogleのreCAPTCHAで登録した「サイトキー」と「シークレットキー」を含めたPHPコードとscriptを追加で記述します。

PHPコードとscriptを追加するLION MEDIAのテンプレートは子テーマ化したpage-contact.phpです。

LION MEDIAのpage-contact.phpに追加するPHPコードの記述位置はpage-contact.phpの70行目付近「$name 様」を目印に少し下に下がったPHPの閉じタグ下からget_headerの間に追加します。

$name 様 \r\n
$title にお問い合わせありがとうございます。\r\n
改めて担当者よりご連絡をさせていただきますので、\r\n
今しばらくお待ちください。\r\n
\r\n
-------------------------------------------------\r\n
お名前：$name \r\n
メールアドレス：$email \r\n
お問い合わせ内容：$comments \r\n
-------------------------------------------------
";
    mb_send_mail($email, $subject, $body, $headers2);
    $emailSent = true;
    }
  }
} ?>

<!--ここからrecaptchaのコード-->
<?php
$secretKey = 'ここにシークレットキーを貼り付け';

$result_status = '';

if ( isset( $_POST[ 'g-recaptcha-response' ] ) ) {
    $url = 'https://www.google.com/recaptcha/api/siteverify';
    $data = array(
        'secret' => $secretKey,
        'response' => $_POST[ 'g-recaptcha-response' ]
    );

    $context = array(
        'http' => array(
        'method' => 'POST',
        'header' => implode("\r\n", array('Content-Type: application/x-www-form-urlencoded',)),
        'content' => http_build_query($data)
    )
);

    $api_response = file_get_contents($url, false, stream_context_create($context));

    $result = json_decode( $api_response );
}
?>
<!--ここまでrecaptchaコード-->

<?php get_header(); ?>
<?php fit_breadcrumb(); ?>

ここからrecaptchaのコード、ここまでrecaptchaコードとコメントしてある間に書いてあるコードがLION MEDIAのお問い合わせフォームにreCAPTCHAを設置する追加記述のPHPコードです。

コメントの「ここからrecaptchaのコード」の下には$secretKey変数があるのが確認できるかと思いますが$secretKeyの右横「ここにシークレットキーを貼り付け」を削除してGoogleのreCAPTCHAで取得したシークレットキーを貼り付けます。

続いて、LION MEDIAの子テーマpage-contact.php内の170行目前後に書かれているdiv要素内に追加の記述をします。

btn btn-centerクラスが記述してあるdivタグを目印にすると分かりやすいです。

<div class="btn btn-center">
    <!--以下の1行、class="g-recaptcha"クラスを付与してるdiv要素を追加しています。-->
    <div class="g-recaptcha" data-sitekey="ここにサイトキーを貼り付け" data-callback="verify"></div>
        <input type="hidden" name="submitted" value="true" />
        <button class="btn__link" id="contactform-submit" type="submit">送信する</button>
    </div>
</form>
    <?php } ?>

</article>
</main>

    <?php if ( get_option('fit_theme_pageLayout') != 'value2' ):?>
    <!-- l-sidebar -->
    <?php get_sidebar(); ?>

<div class=”btn btn-center”>のすぐ下にg-recaptchaクラス、data-sitekey属性、data-callback属性を付与したdiv要素を追加で記述します。

g-recaptchaクラス付きのdiv要素は、私の場合、お問い合わせフォームの送信ボタン付近にrecaptchaを設置したかったのでbutton要素の近くに記述していますが、form要素内ならどこに設置しても大丈夫です。

追加で記述するdiv要素だけ切り分けたのが以下の記述です。

<div class="g-recaptcha" data-sitekey="ここにサイトキーを貼り付け" data-callback="verify"></div>

data-sitekey属性の属性値に「ここにサイトキーを貼り付け」を記述してあるので削除してから、GoogleのreCAPTCHAで取得したサイトキーを貼り付けます。

最後にreCAPTCHAのscriptをLION MEDIAの子テーマpage-contact.phpに追加します。

scriptを追加する記述位置は190行目のget_footerの下から</body>終了タグまでの間に記述します。

<?php get_footer(); ?>

<script>
function verify() {
    // コールバック：送信ボタンを有効化
    document.getElementById("contactform-submit").disabled = false;
}
document.addEventListener("DOMContentLoaded", () => {
    // 初期状態：送信ボタンを無効化
    document.getElementById("contactform-submit").disabled = true;
})
</script>
<script defer src="https://www.google.com/recaptcha/api.js"></script>

</body>
</html>

LION MEDIAの子テーマpage-contact.phpにreCAPTCHAのコードを3箇所に追加できたらpage-contact.phpの編集内容を保存。

LION MEDIAのお問い合わせフォームにreCAPTCHA v2を設置するのは完成です。