Aggiungere una chiave reCAPTCHA v2 personalizzata

Disponibile su: Tutti i piani

A volte vuoi i vantaggi della protezione antispam di un reCAPTCHA, ma non vuoi reindirizzare i tuoi utenti a una pagina ospitata da Formspree. Puoi fornire una chiave reCAPTCHA personalizzata nella pagina delle impostazioni del tuo modulo e incorporare il reCAPTCHA direttamente nel modulo. Useremo quindi la tua chiave reCAPTCHA quando comunichiamo con il server reCAPTCHA per autenticare il token lato client.

Per iniziare, visita la console di amministrazione reCAPTCHA. Crea una nuova chiave (o usane una esistente) e seleziona un reCAPTCHA v2. Aggiungi il tuo dominio e poi fai clic su Submit. Ti verranno presentate una site key e una secret key.

Screen_Shot_2019-09-30_at_10.16.09_AM.png

Ora visita la scheda Settings del tuo modulo Formspree e assicurati che il CAPTCHA sia abilitato. Fai clic su “Adjust settings”, seleziona “Custom reCAPTCHA” nella sezione CAPTCHA solution e incolla la tua chiave personalizzata nel campo fornito:

recaptcha v2 guide.png

L’ultimo passaggio consiste nell’aggiungere il widget reCAPTCHA al tuo sito. In una configurazione standard del modulo, puoi aggiungerlo così:

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

Se vuoi fare qualcosa di diverso, la pagina per sviluppatori di Google per reCAPTCHA fornisce una spiegazione approfondita dei diversi modi per implementare il reCAPTCHA. Se usi un tuo campo, cercheremo un campo chiamato g-recaptcha-response (il nome predefinito del campo), quindi non sovrascriverlo con un nome diverso!

Se vuoi rendere obbligatorio il campo reCAPTCHA puoi farlo usando javascript e CSS; l’esempio seguente farà sì che il campo sia obbligatorio usando la validazione HTML5.

// 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;
}