MW WP Form に Google reCAPTCHA V3 を設置

Google reCAPTCHとは

Googleが無料で提供している、botと人間を区別してWebサイトを守ってくれる認証システムで、
スパムメールの対策として効果的です。

歪んだ文字を正しく入力したり、複数の画像から当てはまるものを選択したり、「私はロボットではありません」にチェックを入れたり、見覚えのある方も多いと思います。

最新のGoogle reCAPTCHA V3ではそういった手順が一切ありません。

今回そのGoogle reCAPTCHA V3をMW WP Formに導入する際に苦戦したことを書きます。

導入方法についてはこちらのサイトを参考にしました。

まず直面した問題、設定したのにロゴが表示されない！

調べてみると考えられる原因として、

<?php wp_footer(); ?>がない

jQueryが読み込まれていない

などありましたがどちらも当てはまらず、別の原因でした。

MW WP Formのショートコードを固定ページではなくテンプレートファイル内に置いてあるのが原因でした。

↓ショートコード

[mwform_formkey key="000"]

↓テンプレートファイルで出力する場合の記述

<?php echo do_shortcode('[mwform_formkey key="000"]'); ?>

なぜこの形式だとダメかというと、reCAPTCHA for MW WP FormのEnqueueController.phpというファイルのソースコードに原因がありました。

<?php
namespace MW_WP_Form_reCAPTCHA\Controllers;
use MW_WP_Form_reCAPTCHA\Config;
class EnqueueController
{
public function __construct()
{
add_action(‘wp_enqueue_scripts’, array($this, ‘add_scripts’));
}
public function add_scripts()
{
global $post;
$option = get_option(Config::OPTION);
$site_key = esc_html($option[‘site_key’]);
if (!empty($post) && has_shortcode($post->post_content, ‘mwform_formkey’) && !empty($site_key)) {
wp_enqueue_script(‘jquery’);
wp_enqueue_script(“recaptcha-script”, ‘https://www.google.com/recaptcha/api.js?render=’ . $site_key, array(‘jquery’), array(), true);
$data = <<< EOL
grecaptcha.ready(function() {
grecaptcha.execute(‘$site_key’, {
action: ‘homepage’
}).then(function(token) {
var recaptchaResponse = jQuery(‘input[name=”recaptcha-v3″]’);
recaptchaResponse.val(token);
});
});
EOL;
wp_add_inline_script(‘recaptcha-script’, $data);
}
}
}

問題は20行目のこの部分

has_shortcode($post->post_content, ‘mwform_formkey’)

本文にショートコードがあるかを判定する記述なので、ショートコードをテンプレートファイル内に置いてある場合、判定でfalseが返ってしまいます。

ただこの問題に関しては、フォームが多いと苦労はするもののテンプレートファイル内から固定ページにショートコードを移し替えてあげれば解決できます。

次に苦戦したのが、投稿タイプやカスタム投稿タイプにフォームがあるパターンです。

この場合お客様の方で投稿する際にショートコードを置いてもらう必要が出てきてしまいます。

この問題に関しては調べても該当するケースが出てこず、

結果的に先ほどの条件文、has_shortcode($post->post_content, ‘mwform_formkey’)を消すことで対処できました。

そうした場合、テンプレート上にショートコードがあってもreCAPTCHAのロゴが表示されますが、フォーム以外のページにも表示されてしまうので、注意が必要です。

ロゴを非表示にしたい場合は、以下のサイトを参考にしています。