將隱形reCAPTCHA添加到現有的聯繫表格中

要添加安全功能，我想添加隱形reCAPTCHA到我現有的窗體，在這種情況下，聯繫表單。

請參閱現有代碼：

<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>

我試圖從googlw重新驗證碼網站中插入代碼，但它不會工作：

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

我需要只是指出回調函數還是我需要配置類和ID？

請幫忙！

來源

2017-04-26 BoogerT

您不應直接致電sendEmailMsg()。正如Google documentation說，你要調用你的函數在回調：

<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()'/>

這裏是你的完整編碼：

<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>

來源

2017-07-25 08:46:18 ebaynaud

將隱形reCAPTCHA添加到現有的聯繫表格中

回答

相關問題