iframeからHTMLへ・Turnstileで強化する問い合わせフォーム
ブログの問い合わせページは内容がないからnoindexにすべきというのは誤りで、ブログの信頼性を上げる問い合わせページはインデックスするものだと知りました。ブログを初めた頃から使っていた問い合わせフォームはiframeで作られたもので、外国のIPアドレスを弾いてくれて迷惑メールは届きませんでした。
アクセスのあなり無い当ブログでは、お問い合わせフォームの利便性については、考えていなかったのですが、iframeのフォームは読み込みがとても遅いです。数秒待ってから全体が表示されるので、使う人は初めの真っ白のページに戸惑うかもしれません。そこで、今回お問い合わせフォームをインッデクスさせるのを機会に、フォームをHTMLで作り直します。
プラグインで作ることも考えましたが、サイト全体が重くなるのと、個人情報を扱う部分はしっかりしたシステムに任せたいので外部サービスの中からHTMLコードでの提供を探しました。フォームメーラーが無料でもHTMLでのフォーム設置が可能となっていました。広告もなく自由にHTMLを使わせてくれるのはとてもありがたいです。
Cloudflare Turnstileを問い合わせフォームに組み込む方法
ボットのスパム投稿を避けるために、Cloudflareが提供しているTurnstileというサービスを利用します。これはGoogleのreCAPTCHAと同じく、アクセスが人間かボットかを判定するサービスです。問い合わせを最終的に送信するためのボタンにdisabled属性を付加してボタンを無効化しておき、Turnstileで許可された場合はdisabled属性を無効化する事により、ボタンが押せる仕組みです。
まずは、Cloudflare Turnstileを使うためにサイトキーを取得します。Cloudflareにアカウントがある必要がありますが、CDNを使用していなくてもTurnstileは利用できます。
こちらのサイトを参考にしてCloudflare Turnstileを問い合わせフォームに追加します。下のコードを<head></head>の間に記述すると固定ページのスラッグが「contact」のページでTurnstileが有効になります。（例https://aaa-bbb.com/contact/）
<?php if (is_page('contact')):?>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
<?php endif;?>
下のコードの2行目がすべてのフォームに問い合わせ内容を記入し、最後に送信のために押すインプットボタンです。そこには「id="submit" disabled」を必ず記入します。disabled属性でボタンを押せなくし、Turnstileが人間だと判定するとid="submit"が含まれるinputタグのdisabled属性が無効になります。
<div class="cf-turnstile" data-sitekey="AAAAAAAAAAAAAAAAAAAAAAA" data-callback="javascriptCallback" data-language="ja"></div>
<input type="submit" id="submit" disabled>
<script>
window.javascriptCallback = function () {
document.getElementById('submit').disabled = false;
console.log('Challenge Success.');
}
</script>
実際に使用するとアクセス時に自動的に判定しているようで、横断歩道やオートバイの画像をクリックする必要はありません。
どちらも無料のフォームメーラーとCloudflare Turnstileを使い、ボット対策を含む問い合わせフォームができました。
最後までお読みいただき、誠にありがとうございます。