ElementorではreCAPCHAがネイティブ統合されているが、この度の10,000件/月制限にともない、CloudFlare Turnstileを統合したロードマップ
ElementorではCloudFlare Turnstileはネイティブ統合されていないため、まずはお手軽にプラグインがないか探っていく。
検索するとTurnstile統合のWPプラグインはいくつかあり、要件的にElementorに統合可能とのことだが、いずれも何かしらエラーレポートがあり、不安定な様子。
Simple Cloudflare Turnstileプラグイン
Simple Cloudflare Turnstile – CAPTCHA Alternative
検索したら候補として上位に引っかかるのがSimple Cloudflare Turnstileプラグイン
Elementor Proフォームに統合可能っぽいが、
現時点では（2024年12月4日）、Simple Cloudflare TurnstileはElementorを使用しているウェブサイトでJavaScriptエラー「Can't find variables: turnstile」をスローします。そのため、プラグインを必要とせずにCloudflare Turnstileと統合できれば、より信頼性の高いソリューションになります。Elementorにとってもメリットがあります。
Add Cloudflare Turnstile integration · elementor · Discussion #25671
しっかりとElementorフォーラムでエラーレポートあり。
で、そのフォーラムにfunction.phpに組み込み可能なElementorのネイティブ統合をスクラッチ開発した勇者が現れた。結果的にこれが超優秀であったため採用。
Cloudflare Turnstile Integration for Elementor Forms
ロードマップ
turnstileを導入する
CloudFlareでTunestileウィジェットを管理対象(推奨)モードで払い出す。
ElementorフォームにTurnstileを統合する
私のWPの環境
- AWS Lightsail WP
- CMS - Elementor
- テーマ - Hello Elementor
1.統合実装をファイルにしてテーマに組み込む
# コマンド割愛
scp elementor-form-turnstile-handler.php ~/stack/wordpress/wp-content/themes/hello-elementor
Turnstileチャレンジのバリデーションエラーメッセージは適宜、日本語にローカライズした
// $ajax_handler->add_error($field['id'], esc_html__('The Captcha field cannot be blank. Please enter a value.', 'elementor-pro'));
$ajax_handler->add_error($field['id'], esc_html__('俺の名前を言ってみろ', 'elementor-pro'));
2.functions.phpで読み込む
これだけで統合完了というお手軽さ。
require_once get_template_directory() . '/elementor-form-turnstile-handler.php';
3.サイトキーとシークレットキーを登録する
WordPressコンソールから
Elementor > 設定 > 連携 > Cloudflare Turnstile
サイトキーとシークレットキーを登録する
4.ElementorフォームでCloudflare Turnstileを追加する
フォームにTurnstileが追加された
直接POSTされている可能性と対策について
フォームにTurnstileを統合しても、フォーム送信先に直接リクエストを送りつけられたられては意味がないので、サブミットイベントをフックしてTurnstileレスポンスを検証しようと思ったが、elementor-form-turnstile-handler.phpがトークン検証の問い合わせまでワンストップ対応してくれていた。素晴らしい。