Using reCAPTCHA with your form

Configuring FormMail

This page explains how to add the reCAPTCHA widget to your HTML form. If you need to know how reCAPTCHA works, please read the information provided by GoogleOpens in a new window.

If you're using our Hosted Forms service with a converted form, skip to the "Adding..." sections below.

If you're using our Hosted Forms service with a designed form, you don't need to read this page at all!

For the complete information about configuring FormMail for reCAPTCHA , please refer to the reCAPTCHA How-To guide.

These are the instructions for the "I'm not a robot" version of reCAPTCHA. For Invisible reCAPTCHA, read the section below.

Here's what you need to do:

Signup on the reCAPTCHA websiteOpens in a new window to obtain a site key and a secret key. Make sure you choose reCAPTCHA V2.
Add the reCAPTCHA Challenge Widget. You need to decide where in your form you want to display the Captcha request (just before the Submit button is a good place). Please view the detailed instructions and sample HTML code. The instructions you want have the heading "Automatically render the reCAPTCHA widget".
Install the reCAPTCHA widget code into the <head> section of your page:
```
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
```
Display the reCAPTCHA widget in your HTML (just before your submit button, for example):
```
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
```
Replace your_site_key with your reCAPTCHA site key (this is not the secret key; it's the other one.)
Reload your HTML form in your browser. It should now display the reCAPTCHA widget.
You must derive a field called "imgverify" from the reCAPTCHA field "g-recaptcha-response" so that FormMail receives the user's CAPTCHA input. Here's an example of this:
```
<input type="hidden" name="derive_fields"
      value="imgverify=g-recaptcha-response" />
```

These are the instructions for the invisible version of reCAPTCHA. For normal reCAPTCHA, read the section above.

Invisible reCAPTCHA doesn't annoy users because it only asks a user to prove he/she is human if they don't act like a human.

For most people, it's completely invisible, but still protects you from spam.

Here's what you need to do:

Signup on the reCAPTCHA websiteOpens in a new window to obtain a site key and a secret key. Make sure you choose Invisible reCAPTCHA.
Ensure your form tag has a unique "id" attribute, like this:
```
<form id="Contact_Form" ... >
```

Install the reCAPTCHA widget code into the <head> section of your page:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Create a JavaScript function to submit the form once Invisible reCAPTCHA has done its work. Put this immediately below the widget code above in the <head> section. Make sure you replace "Contact_Form" with the actual id attribute of your form tag:
```
<script>
    function onSubmit(token) {
        document.getElementById("Contact_Form").submit();
    }
</script>
        
```
Add 3 attributes to your submit button (class, data-callback, data-sitekey):
```
<input type="submit" value="Submit" class="g-recaptcha" data-callback="onSubmit" data-sitekey="your_site_key" />
        
```
Replace your_site_key with your reCAPTCHA site key (this is not the secret key; it's the other one.)

The data-callback attribute is the name of the JavaScript function you added a few steps back.
Reload your HTML form in your browser. You will only see a reCAPTCHA brand box in the bottom right of your window. Invisible reCAPTCHA shows nothing until you submit (and then only if you need to prove you're human.)
You must derive a field called "imgverify" from the reCAPTCHA field "g-recaptcha-response" so that FormMail receives the user's CAPTCHA input. Here's an example of this:
```
<input type="hidden" name="derive_fields"
      value="imgverify=g-recaptcha-response" />
```