Googleからのメール

Google reCAPTCHAはこのまま使える？

2025年2月のある日、Googleからこんなメールが届きました。この記事では対応が必要になるかどうかのGoogleからのメールによる判断方法と乗り換えなどの方法について、お知らせします。

Google reCAPTCHA有料化

要約すると下記のようです。

reCAPTCHA評価数を確認して料金を予測

Yum-designのWEBサイトでは問い合わせフォームでreCAPTCHAを利用しています。

メールに「reCAPTCHA 評価数」が記載されていました。下記部分です。

このメールに記載されている「料金計算ツール」に回数を入力してみます。このWEBサイトでは回数が少ないので$0と出ました。今の時点ではこのWEBサイトは対策しなくても大丈夫のようです。

無料の代替ツール

検索してみると、無料の代替ツールもあるようです。
現時点では不要ですが、保守を請け負っているお客様のWEBサイトで必要になるかもと思い、試してみることに。

[Cloudflare Turnstile]というサービスが完全無料でアクセスは無制限で使えるようです。

まずはCloudflare Turnstileのキーを取得

STEP

Cloudflare公式サイトでアカウントを作成します。（googleアカウントやAppleアカウントで利用可能）

STEP

管理画面にログインできたら、左メニューから「Turnstile」を選びます

STEP

Add widgetボタンをポチ

STEP

widget nameのところに自分が何のツールかわかるような名前をつけてAdd Hostnamesをポチ

STEP

右からメニューが出てくるので、WEBサイトのドメイン名を入れて、Addボタンをポチ

STEP

Createボタンをポチ

STEP

Successfully….と出てきたら成功です。Site keyとSecret Keyをコピーしておきます。

Key設定用のWordPressのプラグインをインストール

STEP

WordPressのプラグイン「Simple Cloudflare Turnstile」をインストールして有効化します。

STEP

設定画面で先ほどコピーしておいたSite keyとSecret keyを入力します。

STEP

お問い合わせフォームで使用しているので、そのフォームを選択して「変更を保存」します。

Snow Monkey FormsはCloudflare Turnstile対象外

ここで、このWEBサイトで使用している「Snow Monkey Forms」はCloudflare Turnstileは使えないということに気づきました（泣）。Contact Form7やWPFormsなどは使えるようです。

Contact Form7で再度チャレンジ

STEP

「Simple Cloudflare Turnstile」の設定画面に戻り、Contact Form7の所にチェックをつけ「変更を保存」します

STEP

チェックボックスにチェックして、「成功しました!」表示が出るまで待ちます。表示されたら「応答テスト」をポチ

STEP

「成功!Turnstileは…」と表示されたら成功です

STEP

お問い合わせページではCLOUDFLAREのロゴと「成功しました！」のボックスが表示されます

まとめ

Google reCAPTCHAの代替手段として、Cloudflare Turnstileは制限を気にせず無料で利用できるのでオススメです。

フォームの送信ボタンの色を変えたい！

Yum-designのお問い合わせフォームでは、Snow Monkey FormsというWordPressのプラグインを使用しています（2024年8月現在）。

Snow Monkey Formsには確認画面・完了画面も、入力（１）ー確認（２）ー完了（３）のステップバーも付いていて、短時間でWordPressにフォームを導入したい場合、使い勝手が良いです。

が、標準でついている送信ボタンの見た目があまり目立たないので、cssを追加して変更してみました。

カスタマイズ後の見た目

変更後のデザインはこちらです。

cssの追加場所

WordPressテーマ「SWELL」では、カスタマイザーの中にcssを追加できる場所があります。

css追加のポイント

ブラウザの検証ツールでボタンのクラス名を確認します。

確認すると、送信ボタンに設定されているクラス名は「.smf-action .smf-button-control__control」ということがわかります。入力画面内の「確認画面へ」ボタンと確認画面の「戻る」ボタン・「送信する」ボタンの全てに同じクラス名がついています。

そのためクラス名だけで指定すると、それらのボタンが全て同じ色・デザインになってしまいます。「戻る」ボタンはあまり目立たせたくないため、デザインを変えたいところです。

【対応策】クラス名に属性を追加する

それぞれのボタンには属性（data-action）がついているので、属性と共にcssを指定します。

ボタンごとの属性はこちらです。

• 入力画面「確認画面へ」ボタンは[data-action=”confirm”]
• 確認画面「戻る」ボタンは[data-action=”back”]
• 確認画面「送信する」ボタンは[data-action=”complete”]

「確認画面へ」と「送信する」ボタンのcss

「確認画面へ」と「送信する」ボタンは同じデザインにしたいため、下記のように指定しました。
※色や形・paddingなど、WEBサイトのデザインに合わせてお好みのものを指定してください。

.smf-action .smf-button-control__control[data-action="confirm"],
.smf-action .smf-button-control__control[data-action="complete"] {
	background: rgb(0, 215, 183);
       background: linear-gradient(110deg, rgba(0, 215, 183, 1) 20%, rgba(0, 181, 215, 1) 100%);
	color:white;
	border-radius:30px;
	border:none;
	padding:10px 80px;
}

「戻る」ボタンのcss

戻るボタンは目立たなくするため、形は同じで色をグレーに、小さめサイズに指定しました。

.smf-action .smf-button-control__control[data-action="back"] {
	border-radius:30px;
	padding:10px 40px;
	margin-bottom:1em;
}

css追加後の表示

css追加後の表示はこのように、「戻る」ボタンが目立たず、「確認画面へ」と「送信する」ボタンが目立つ表示になりました。

実際の表示はこちらです。→Yum-designお問い合わせページ

「SWELL」内の追加cssで注意すること

最初追加cssが反映されず、困ったのですが、どうやら「SWELL」では追加css内にコメントを書くとエラーになるそうです。できれば備忘録としてどのパーツのcssかを書いておきたいのですが、仕方がないですね。

/* こんな風にコメントを入れるとエラーになる */

まとめ

標準で確認画面・完了画面やステップバーがついておすすめのSnow Monkey Formsですが、少しデザインをカスタマイズするとみやすい表示になって良いですね。

フォームでエラー発生！困った時の対応です

Yum-designサイト内のお問い合わせページで、確認画面から先に進めないエラーが発生していました。
日々に紛れて気づくのが遅くなってしまいました。
お問い合わせしようと入力していただいた方がいらっしゃいましたら、大変申し訳ございません…！

pcからお問い合わせページのフォームに入力し、「確認画面へ」のボタンを押すと
「無効なアクセスです。」という文字が表示されて、そこから先へ進めない状態になっていました。

スマホで確認したところ、スマホでは問題なくフォーム入力→確認画面→完了へと進みました。問題はpcのみ。

こちらのサイトのお問い合わせフォームは「Snow Monkey Forms」というWordPressのプラグインを使用して作成しています。
初期の使用テーマ「Snow Monkey」と同じ作者なので相性が良いかと思ったこと、また設置も簡単なことからこちらを利用させていただいています。

まずはフォーラムで同じ事象が起きているかどうか検索。何件か出てきましたが、微妙に現象が違うようです。

そこでプラグインのアップデートをしたところ、確認画面→完了画面へと進むことができました！

定期的にフォームに入力して状態を確認しないとダメですね…お客様のサイトでなくて本当に良かった。
メンテナンスの重要さを実感した出来事でした。

対応策

今後お問い合わせフォームで「無効なアクセスです。」のエラーが起きないための対応策として、下記をするようにしました。

• 「Snow Monkey Forms」プラグインの自動更新を有効にする

通常、プラグインのアップデートは自動更新にしていないのですが（知らないうちにエラーが起きると困るので自分のタイミングで手動更新します）、このプラグインだけ自動更新を有効にしています。

管理画面の「プラグイン」＞「インストール済みプラグイン」一覧から「Snow Monkey Forms」を探します。

右側の「自動更新を有効化」ボタンをクリックします。

「自動更新は有効中です」という緑の文字になればプラグインの自動更新が有効になります。

プラグインのアップデートが頻繁にあるようなので、中々手が回らない場合はこちらが有効かもしれません。

WordPress本体のバージョンとの整合性もあるので、本体のアップデートも忘れずに。

お問い合わせフォーム自体のテスト送信も定期的に必要ですね。