Ajouter reCAPTCHA Invisible dans un formulaire de contact existant

Question

Bonne journée!

Pour ajouter une fonction de sécurité, je souhaite ajouter reCAPTCHA Invisible à mes formulaires existants et, dans ce cas, le formulaire de contact.

S'il vous plaît voir le code existant:

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

j'ai essayé d'insérer le code de la googlw re captcha site, mais il ne fonctionnera pas:

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

dois-je juste indiquer la fonction sur le rappel ou ai-je besoin de configurer la classe et l'id ??

Aidez s'il vous plaît!

Answer 1

Vous ne devez pas appeler directement le sendEmailMsg(). Comme indiqué dans Google documentation, vous devez appeler votre fonction dans le rappel:

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

Appel fonction onSubmit, retirez votre événement de clic et de mettre la classe et les données requises par Google dans votre bouton existant soumettre:

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

Et voici votre code complet:

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