보이지 않는 reCAPTCHA를 기존 문의 양식에 추가

Question

안녕하세요!

보안 기능을 추가하려면 Invisible reCAPTCHA를 기존 양식 및이 경우 연락처 양식에 추가하고 싶습니다.

기존의 코드를 참조하십시오 : 내가 googlw 다시 보안 문자 사이트에서 코드를 삽입하려고

<script> 
 
var blogId = '12345678901'; 
 
var contactFormMessageSendingMsg ='Sending...'; 
 
var contactFormMessageSentMsg = 'Your message has been sent.'; 
 
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.'; 
 
var contactFormEmptyMessageMsg ='Message field cannot be empty.'; 
 
var contactFormInvalidEmailMsg = 'A valid email is required.' 
 

 
var widgetLoaded=false; 
 
function sendEmailMsg() { 
 
if(widgetLoaded== false) { 
 
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); 
 
widgetLoaded=true; 
 
document.getElementById('ContactForm1_contact-form-submit').click(); 
 
} 
 
return true; 
 
} 
 
</script> 
 
<form name='contact-form'> 
 
<div>Your Name : </div> 
 
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/> 
 
<div>Your Email: <em>(required)</em></div> 
 
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/> 
 
<div>Your Message: <em>(required)</em></div> 
 
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> 
 
<p></p> 
 

 
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' onclick="sendEmailMsg()"/> 
 

 

 
<div style='text-align: center; max-width: 450px; width: 100%'> 
 
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> 
 
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> 
 
</div> 
 
</form>

을하지만 늘 일 :

<button class="g-recaptcha" data-sitekey="my site key" data-callback='sendEmailMsg()'>Submit</button>

콜백에 함수를 나타낼 필요가 있거나 클래스와 ID를 구성해야합니까 ??

도와주세요!

Answer 1

sendEmailMsg()으로 직접 전화하지 마십시오. ,

<script src="https://www.google.com/recaptcha/api.js" async defer></script> 
<script> 
    function onSubmit(token) { 
    sendEmailMsg(); 
    } 
</script> 

전화 onSubmit 기능을 사용자의 클릭 이벤트를 제거하고 제출 기존의 버튼 구글에 필요한 클래스와 데이터를 입력 :

<input class='g-recaptcha contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' data-sitekey='your site key' data-callback='onSubmit()'/> 

Google documentation에 명시된 바와 같이, 당신은 콜백 함수를 호출해야

전체 코드는 다음과 같습니다.

<script src="https://www.google.com/recaptcha/api.js" async defer></script> 
<script> 
    function onSubmit(token) { 
    sendEmailMsg(); 
    } 
</script> 
<script> 
    var blogId = '12345678901'; 
    var contactFormMessageSendingMsg = 'Sending...'; 
    var contactFormMessageSentMsg = 'Your message has been sent.'; 
    var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.'; 
    var contactFormEmptyMessageMsg = 'Message field cannot be empty.'; 
    var contactFormInvalidEmailMsg = 'A valid email is required.' 

    var widgetLoaded = false; 

    function sendEmailMsg() { 
    if (widgetLoaded == false) { 
     _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), { 
     'contactFormMessageSendingMsg': contactFormMessageSendingMsg, 
     'contactFormMessageSentMsg': contactFormMessageSentMsg, 
     'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg, 
     'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg, 
     'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg, 
     'title': 'Contact Form', 
     'blogId': blogId, 
     'contactFormNameMsg': 'Name', 
     'contactFormEmailMsg': 'Email', 
     'contactFormMessageMsg': 'Message', 
     'contactFormSendMsg': 'Send', 
     'submitUrl': 'https://www.blogger.com/contact-form.do' 
     }, 'displayModeFull')); 
     widgetLoaded = true; 
     document.getElementById('ContactForm1_contact-form-submit').click(); 
    } 
    return true; 
    } 
</script> 
<form name='contact-form'> 
    <div>Your Name :</div> 
    <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value='' /> 
    <div>Your Email: <em>(required)</em></div> 
    <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value='' /> 
    <div>Your Message: <em>(required)</em></div> 
    <textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea> 
    <p></p> 

    <input class='g-recaptcha contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Send' data-sitekey='your site key' data-callback='onSubmit()'/> 


    <div style='text-align: center; max-width: 450px; width: 100%'> 
     <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p> 
     <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p> 
    </div> 
</form>