Salesforce Starter Edition : 【番外編】Web to リードでフォームのreCAPTCHA 設定が機能しない!? どうすれば良いかchatGPTに聞いてみた
2月に契約したSalesforce Starter Edition。今回は Web to リードを作成する際に、BOT攻撃を防げるようreCAPTCHA設定に挑戦してみました。
しかしここで問題が一つ。
reCAPTCHAを設定したWeb to リードフォームにて、reCAPTCHAにチェックを入れず送信してみたところ、通過できてしまうということが発生しました。
どうにかしてこの状況を改善したいと思い、Chat GPTさんに聞いた結果上手くいきましたのでご共有します。
1.Chat GPTに聞いたこと
Chat GPTさんには以下のように質問をしてみました。
*********************************************************************************
下記のようにソースを入れフォームを作成したのですが、reCAPTCHAにチェックを入れなくてもフォームが送信できてしまいます。reCAPTCHAにチェックを入れないとフォーム送信が出来ないようにしたいのですがどうすれば良いですか？
<!-- ---------------------------------------------------------------------- -->
<!-- 次の <META> 要素を、HTML の <HEAD>タグ間に追加してください。必要に応じて、charset -->
<!-- パラメーターを変更して、HTML ページの文字コードを指定してください。 -->
<!-- ---------------------------------------------------------------------- -->
<META HTTP-EQUIV="Content-type" CONTENT="text/html; charset=UTF-8">
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function timestamp() { var response = document.getElementById("g-recaptcha-response"); if (response == null || response.value.trim() == "") {var elems = JSON.parse(document.getElementsByName("captcha_settings")[0].value);elems["ts"] = JSON.stringify(new Date().getTime());document.getElementsByName("captcha_settings")[0].value = JSON.stringify(elems); } } setInterval(timestamp, 500);
</script>
<!-- ---------------------------------------------------------------------- -->
<!-- 次の <FORM> 要素をページに追加してください。 -->
<!-- ---------------------------------------------------------------------- -->
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8&orgId=XXXXXXXXXXXXXXXXXXX" method="POST">
<input type=hidden name='captcha_settings' value='{"keyname":"WEBNODE","fallback":"true","orgId":"00DF9000000c8kp","ts":""}'>
<input type=hidden name="oid" value="XXXXXXXXXXXXXXXXXXX">
<input type=hidden name="retURL" value="https://zhushihuishesanpuru.webnode.jp/thankyou/">
<!-- ---------------------------------------------------------------------- -->
<!-- 注意: これらの項目は、省略可能なデバッグ用要素です。デバッグモードでテストを行う場合は、これらの行をコメント解除してください。 -->
<!-- <input type="hidden" name="debug" value=1> -->
<!-- <input type="hidden" name="debugEmail" -->
<!-- value="kaori.ishibashi@XXXXXXXXXXXXXXXX.com"> -->
<!-- ---------------------------------------------------------------------- -->
<label for="company">会社名</label><input id="company" maxlength="40" name="company" size="20" type="text" /><br>
<label for="last_name">姓</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
<label for="first_name">名</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
<label for="email">メール</label><input id="email" maxlength="80" name="email" size="20" type="text" /><br>
<div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></div><br>
<input type="submit" name="submit">
</form>
※上記はWeb to リードで作成したHTMLソースです（一部伏字）
*********************************************************************************
2.Chat GPTの回答
Chat GPTさんからは以下のように回答がありました。
**********************************************************************************
reCAPTCHAにチェックを入れないとフォーム送信が出来ないようにするためには、JavaScriptでreCAPTCHAが正しく検証されたかを確認し、検証されていない場合はフォームの送信を防ぐ必要があります。以下の方法を試してみてください。
まず、フォームの <form> タグに onsubmit イベントを追加して、フォームが送信される際にreCAPTCHAの検証を行います。
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8&orgId=XXXXXXXXXXXXXXXX" method="POST" onsubmit="return validateRecaptcha()">
※一部伏字
次に、以下の validateRecaptcha 関数を追加して、reCAPTCHAの検証を行うスクリプトを実装します。
<script>
function validateRecaptcha() {
var response = grecaptcha.getResponse();
if (response.length === 0) {
alert("reCAPTCHAを確認してください。");
return false;
}
return true;
}
</script>
これで、reCAPTCHAにチェックを入れていない場合はアラートメッセージが表示され、フォームが送信されないようになります。
最終的なコードは以下のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
function timestamp() {
var response = document.getElementById("g-recaptcha-response");
if (response == null || response.value.trim() == "") {
var elems = JSON.parse(document.getElementsByName("captcha_settings")[0].value);
elems["ts"] = JSON.stringify(new Date().getTime());
document.getElementsByName("captcha_settings")[0].value = JSON.stringify(elems);
}
}
setInterval(timestamp, 500);
function validateRecaptcha() {
var response = grecaptcha.getResponse();
if (response.length === 0) {
alert("reCAPTCHAを確認してください。");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8&orgId=XXXXXXXXXXXXXXXX" method="POST" onsubmit="return validateRecaptcha()">
<input type="hidden" name="captcha_settings" value='{"keyname":"WEBNODE","fallback":"true","orgId":"00DF9000000c8kp","ts":""}'>
<input type="hidden" name="oid" value="xxxxxxxxxxxxxxx">
<input type="hidden" name="retURL" value="https://zhushihuishesanpuru.webnode.jp/thankyou/">
<label for="company">会社名</label><input id="company" maxlength="40" name="company" size="20" type="text" /><br>
<label for="last_name">姓</label><input id="last_name" maxlength="80" name="last_name" size="20" type="text" /><br>
<label for="first_name">名</label><input id="first_name" maxlength="40" name="first_name" size="20" type="text" /><br>
<label for="email">メール</label><input id="email" maxlength="80" name="email" size="20" type="text" /><br>
<div class="g-recaptcha" data-sitekey="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></div><br>
<input type="submit" name="submit">
</form>
</body>
</html>
※一部伏字
*********************************************************************************
3.Chat GPTの回答を実装してみた
chat GPTさんの回答どおりソースをサイトに入れ込んでみたところ…
リキャプチャにチェックを入れなかった際にきちんとエラーが出てくれるようになりました！
いかがでしたでしょうか？
リキャプチャ設定をしたのになぜかチェックをしなくても通ってしまう、というような場合には是非Chat GPTに聞きつつお取組みいただくのも一つの手かもしれません！
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
●トライアル環境の取得はこちらから
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
👇この他のStarterEditionに関するnoteはこちら👇
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
●Account Engagement の サポートはNarcissusへ