google reCAPTCHA v3でハマったのに、記事を書いていなかったような・・・
ということで、
google reCAPTCHA v3は2分以上経過してから送信できるようにするには、JavaScriptで送信ボタンをアレンジする必要があります。
<form id="form-1" name="form_1" method="post" action=""> <input ~~~~~~~>など フォームの内容 <!-- JavaScriptでidを使って指定しているのでお忘れなく --> <input type="hidden" name="recaptchaResponse" id="recaptchaResponse"> <input type="submit" name="btn_confirm" id="btn_confirm" value="送信確認画面へ"> <button type="button" onclick="location.href='<?php echo esc_url( PAGE_URL ); ?> '">リセット</button> </form>
こんな感じのフォームにして、
～～～～の部分はgoogle reCAPTCHA v3を設定したときに出てくる個別のコード？です。
<script src="https://www.google.com/recaptcha/api.js?render=～～～～～"></script>
<script>
// 送信ボタン指定.
var btn_confirm = document.getElementById('btn_confirm');
// btn_confirmをクリックしたら.
btn_confirm.addEventListener( 'click', function(e) {
//デフォルトの動作（送信）を停止.
e.preventDefault();
grecaptcha.ready(function() {
grecaptcha.execute('～～～～～', {action: 'submit'}).then(function(token) {
// recaotchaトークン挿入場所指定.
var recaptchaResponse = document.getElementById('recaptchaResponse');
// トークン挿入.
recaptchaResponse.value = token;
// submit()でフォームname="form_1"の内容を送信.
document.form_1.submit();
return false;
});
});
});
</script>
はい。これで行くと思います。
応用編
処理の時間がかかるな・・・ってときは
<form id="yorozuya_form" name="yorozuya_form" method="post" action="">
フォームの内容
<div id="yorozuya_form-submit">
<button name="btn_submit" value="送信" id="subbtn" type="button" data-type="submit">申し込む</button>
</div>
</form>
<script>
// 送信ボタン指定.
var subbtn = document.getElementById('subbtn');
subbtn.addEventListener( 'click', function(e) {
// デフォルトの動作（送信）を停止.
e.preventDefault();
// ボタンを非表示.
subbtn.style.display ="none";
// ボタンの上のDIVを指定.
var formSubmit = document.getElementById( 'yorozuya_form-submit' );
// 処理中の表示を作る.
var addDiv = document.createElement( 'div' );
addDiv.textContent = '処理中です。しばらくお待ちください。';
formSubmit.appendChild(addDiv);
// google reCAPTCHA v3のトークン挿入と送信処理.
grecaptcha.ready(function() {
grecaptcha.execute('～～～～', {action: 'submit'}).then(function(token) {
// recaotchaトークン挿入場所指定.
var recaptchaResponse = document.getElementById('recaptchaResponse');
// トークン挿入.
recaptchaResponse.value = token;
// フォーム送信.
document.yorozuya_form.submit();
return false;
});
});
});
</script>
JavaScriptでボタンを非表示、表示を切り替える方法も
<form id="yorozuya_form" name="yorozuya_form" method="post" action="">
フォームの内容
<button name="btn_submit" value="送信" id="subbtn" type="button" data-type="submit">申し込む</button>
<div id="yorozuya_form-submit" style="display: none;">処理中です。しばらくお待ちください。</div>
</form>
<script>
// 送信ボタン指定.
var subbtn = document.getElementById('subbtn');
var yorozuyaFormSubmit = document.getElementById('yorozuya_form-submit');
subbtn.addEventListener( 'click', function(e) {
// デフォルトの動作（送信）を停止.
e.preventDefault();
// ボタンを非表示.
subbtn.style.display ="none";
// 処理中の表示をONに.
yorozuyaFormSubmit.style.display ="block";
// google reCAPTCHA v3のトークン挿入と送信処理.
grecaptcha.ready(function() {
grecaptcha.execute('～～～～', {action: 'submit'}).then(function(token) {
// recaotchaトークン挿入場所指定.
var recaptchaResponse = document.getElementById('recaptchaResponse');
// トークン挿入.
recaptchaResponse.value = token;
// フォーム送信.
document.yorozuya_form.submit();
return false;
});
});
});
</script>
こんな感じもありです。
すべて実装しているので、問題があったらお知らせいただけると嬉しいです。
