Ajouter une clé reCAPTCHA v2 personnalisée

Disponible sur : tous les forfaits

Vous souhaitez parfois bénéficier de la protection anti-spam de reCAPTCHA sans rediriger vos utilisateurs vers une page hébergée par Formspree. Vous pouvez fournir une clé reCAPTCHA personnalisée dans les paramètres de votre formulaire et intégrer reCAPTCHA directement sur votre formulaire. Formspree utilisera alors votre clé reCAPTCHA pour communiquer avec le serveur reCAPTCHA et authentifier le jeton côté client.

Pour commencer, consultez la console d’administration reCAPTCHA. Créez une nouvelle clé (ou utilisez-en une existante) et sélectionnez un reCAPTCHA v2. Ajoutez votre domaine, puis cliquez sur Submit. Vous obtiendrez une clé de site et une clé secrète.

Screen_Shot_2019-09-30_at_10.16.09_AM.png

Accédez ensuite à l’onglet Settings de votre formulaire Formspree et assurez-vous que CAPTCHA est activé. Cliquez sur « Adjust settings », sélectionnez « Custom reCAPTCHA » sous CAPTCHA solution, et collez votre clé personnalisée dans le champ prévu à cet effet :

recaptcha v2 guide.png

La dernière étape consiste à ajouter le widget reCAPTCHA à votre propre site. Dans une configuration de formulaire standard, vous pouvez l’ajouter comme suit :

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="https://formspree.io/f/{form_id}" method="POST">
      <input type="email" name="email" placeholder="email@example.com" />
      <div class="g-recaptcha" data-sitekey="your_site_key"></div> <!-- replace with your recaptcha SITE key not secret key -->
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Si vous souhaitez une autre approche, la page pour développeurs Google reCAPTCHA propose une explication détaillée des différentes façons d’implémenter reCAPTCHA. Si vous utilisez votre propre champ, nous rechercherons un champ nommé g-recaptcha-response (le nom par défaut) — veillez à ne pas le renommer !

Si vous souhaitez rendre le champ reCAPTCHA obligatoire, vous pouvez le faire avec JavaScript et CSS. L’exemple suivant déclenche la validation HTML5 pour rendre le champ requis.

// javascript
window.onload = function() {
  var el = document.getElementById('g-recaptcha-response');
  if (el) {
    el.setAttribute('required', 'required');
  }
}

/* CSS */
#g-recaptcha-response {
  display: block !important;
  position: absolute;
  margin: -50px 0 0 0 !important;
  z-index: -999999;
  opacity: 0;
}