炭火Blog

Cloudflare Turnstileでお問い合わせフォームを守る

※このページにはプロモーションが含まれています。

ブログを始めてから、少しづつですが増えていたアクセス数が昨年の11月頃から減り始めました。

Google検索のアルゴリズムの変更で、個人のブログはアクセスが減る傾向にあるらしい事が分かったので、そのままにしていたのですが、あまりに長期間に渡って減りつづけるので、原因が他にあるのではと考えました。

SEO対策が間違っていることが分かり、その中にお問い合わせフォームをnoindexにするのは誤りであると言うものがありました。

お問い合わせフォームのページは内容が無いのでnoindexにしましょうと言うのは間違いで、お問い合わせページの存在を知らしめるためにもインデックスさせたほうが良いとのことでした。

長い間使ってきたお問い合わせフォームはiframeで作られたもので、外国のIPアドレスを弾いたりと、セキュリティに優れていたので、2年間の間は迷惑なものは一切こちらには届きませんでした。

アクセスのほとんど無い当ブログでは、お問い合わせフォームの利便性については、まあ良いかなとあまり考えていなかったのですが、iframeのフォームは読み込みがとても遅いです。

数秒待ってから全体が表示されるので、使う人は、はじめの真っ白のページに戸惑うかもしれません。

そこで、今回お問い合わせフォームをインッデクスさせるのを機会に、フォームをHTMLで書き直そうと思います。

プラグインで作ることも考えましたが、サイト全体が重くなるのと、個人情報を扱う部分はしっかりしたシステムに任せたいので外部サービスで、HTMLコードでの提供があるサービスを探しました。

無料では無理かなと思っていたらフォームメーラーというサービスが無料でもHTMLでのフォーム設置が可能となっていました。

広告もなく自由にHTMLを使わせてくれるので、とてもありがたいです。ただし、セキュリティーは以前のiframeで表示していたものに比べると、強くはなくて連投禁止以外には設定できないようです。

Cloudflare Turnstileを問い合わせフォームに組み込む方法

ボットのスパム投稿を避けるために、いつもお世話になっているCloudflareが提供しているTurnstileというサービスを利用します。これはGoogleのreCAPTCHAと同じく、アクセスが人間かボットかを判定してくれます。

問い合わせを最終的に送信するためのボタンにdisabled属性を付加してボタンを無効化しておき、Turnstileで許可された場合はdisabled属性を無効化する事によりボタンが押せるようになる仕組みです。

まずは、Cloudflare Turnstileを使うためにサイトキーを取得する必要があります。Cloudflareにアカウントがある必要がありますが、CDNを使用していなくてもTurnstileは利用できます。

当初は決まったアクセス数を超えると有料になるようでしたが、現在はデフォルトのままでCloudflareのアイコンが表示されていればアクセス数に関係なく無料で使えるようです。

Cloudflare 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属性が無効になります。

data-sitekey=”AAAAAAAAAAAAAAAAAAAAAAA”のサイトキーはCloudflareのサイトで取得したものに置き換えてください。

<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

どちらも無料のフォームメーラーとCloudflare Turnstileを使わせてもらい、簡単なボット対策を含む問い合わせフォームができたと思います。

最後までお読みくださり、誠にありがとうございます。

エンジニアのためのWordPress開発入門

関連投稿

週間アクセスランキング

管理者 ほんだ

数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。

Home
Blogging
Cloudflare Turnstileでお問い合わせフォームを守る