2016-07-22 7 views
0

Je cherche à utiliser Google Recaptcha à ajouter à mon site Web. Le formulaire html a simplement besoin d'appeler l'action MAILTO si la recaptcha renvoie true au bouton d'envoi. Ce code est simplifié dans le <head> et <body>.google recaptcha pour envoyer un e-mail

<head> 
    <script type="text/javascript"> 
     var onloadCallback = function() { 
     grecaptcha.render('html_element', { 
      'sitekey' : 'my key' 
     }); 
     }; 
    </script> 
    <script src='https://www.google.com/recaptcha/api.js'></script> 
</head> 

<body> 
    <form action="MAILTO:[email protected]" method="post" enctype="text/plain"> 
     Name<br><input type="text"><br><br> 
     E-mail<br><input type="text"><br><br> 
     <input type="submit" value="Send"> 
     <input type="reset" value="Reset"> 
     <div class="g-recaptcha" data-sitekey="mykey"></div> 
    </form> 

    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" 
    async defer> 
    </script> 
</body> 

Le seul problème est que je suis nouveau javascript afin google's javascript API a bien suit été difficile. Le bouton send peut être appuyé à tout moment.

En bref ce que je voudrais savoir est:

  1. Comment permettre que le bouton d'envoi de fonctionner lorsque le captcha de google retourne true.
  2. Comment centrer le captcha dans css.
+0

Que voulez-vous? Les spambots ne "visitent" pas votre site, ils l'explorent. Ils trouveront votre email dans votre code source. Utiliser googlerecaptcha pour le masquer ne fonctionnera pas. Vous devez vérifier la réponse google sur votre backend, et si positif renvoyer l'adresse e-mail au client –

+0

Huh, je n'étais pas au courant de ce fait. Donc, essentiellement, aurais-je besoin de poster le formulaire et accéder aux données via PHP? – Max

+0

Pour le rendre aussi spamsecure que possible oui. –

Répondre

0
<script type="text/javascript"> 
var verifyCallback = function(response) { 
//called when success 
document.all.body.hide.style.display="block"; 
}; 
var onloadCallback = function(){ 
grecaptcha.render('verify', { 
'sitekey' : 'your_site_key', 
'callback' : verifyCallback, 
'theme' : 'dark' 
}); 
}; 
</script> 
</head> 
<body> 
<div id="verify"></div> 
<form> 
<button type="submit" id="hide">Submit</button> 
</form> 
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> 
</script> 
<style>#hide{display:none;}</style> </body></html> 
+0

Bonjour Jonas. Votre code ne semble pas générer de réponse pour afficher le bouton Envoyer lors du rendu de l'appel Google Check. Toute aide serait grande – Max

+0

Toutes les erreurs (regardez la console) et ce qui ne fonctionne pas exactement? –

+0

Donc je pense que votre code fait le contraire de ce que je cherche. Je voudrais que le bouton de soumission apparaisse, après recaptcha de google renvoie True. – Max