Custom reCaptcha v2 with Javascript Form

Support
,
1

Hello, I am having trouble setting up my Google reCaptcha v2 with a javascript forum (using Svelte/Sapper). The form does work.

I have followed: Spam filters | Netlify Docs

  • registered for API key & secret (v2)
  • added site keys to environment variables in Netlify dashboard
  • added `data-nelify-recaptcha=“true” as form attribute

Do I also need to have script src="https://www.google.com/recaptcha/api.js" added to the page?

Do I also need to have an element above the submit button?
<div class="g-recaptcha" data-callback={verifyUser} />

In which case do I write my own verifyUser function?
Also do I need to add g-recaptcha-response to the form data request? How do I do that in this case?

  // form
 let formSubmit = false;
let formData = {
name: "",
phone: "",
email: "",
message: ""
};

const encode = data => {
    return Object.keys(data)
      .map(key => encodeURIComponent(key) + "=" + encodeURIComponent(data[key]))
      .join("&");
  };

  function handleSubmit() {
    // post to netlify
    fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: encode({
        "form-name": "myFormName",
        ...formData
      })
    })
      .then(() => {
        formSubmit = true;
        console.log(formData);
      })
      .catch(error => alert(error));
  }
2

Hey @jSwtch,
I think you’re almost there! Yes, you do need that script in your site’s <head>. And in the form body, I believe you’ll need
<div class="g-recaptcha" data-sitekey="your_site_key"></div>

This person ran into something similar:

Let us know if that fixes things for you.