This page explains how to display and customize the reCAPTCHA v2 widget on your webpage.
Jan 29, 2013 Select the “Enable this key on all domains (global key)” so you can use the same reCAPTCHA key for all your sites. Click Create Key. Google will have 2 keys generated for your site, a public and a private key. Dec 05, 2014 Login to your Google account and create the app by filling the form. Select the reCAPTCHA v2 and in that select “I am not a robot” checkbox option. Once submit, Google will provide you following two information. Site key; Secret key; Integrate Google reCAPTCHA in your website.
Oct 17, 2019 Register the site where you want to use reCAPTCHA. In the setup, please choose between reCAPTCHA V2 and Invisible reCAPTCHA. You will then receive a Site key and a Secret key for the site. Go to your site's Formidable → Global Settings → reCAPTCHA. Insert your Site key and Secret key.
To display the widget, you can either:
- Automatically render the widget or
See Configurations to learn how to customize your widget. For example, you may want to specify the language or theme for the widget.
See Verifying the user's response to check if the user successfully solved the CAPTCHA.
Automatically render the reCAPTCHA widget
The easiest method for rendering the reCAPTCHA widget on your page is to includethe necessary JavaScript resource and a
g-recaptcha
tag. The g-recaptcha
tagis a DIV element with class name g-recaptcha
and your site key in thedata-sitekey
attribute:The script must be loaded using the HTTPS protocol and can be included from anypoint on the page without restriction.
Explicitly render the reCAPTCHA widget
Deferring the render can be achieved by specifying your onload callback functionand adding parameters to the JavaScript resource.
- Specify your
onload
callback function. This function will get called whenall the dependencies have loaded. - Insert the JavaScript resource, setting the
onload
parameter to the nameof your onload callback function and therender
parameter toexplicit
.When your callback is executed, you can call theYourgrecaptcha.render
methodfrom the JavaScript API.onload
callback function must bedefined before the reCAPTCHA API loads. To ensure there are no raceconditions:- Order your scripts with the callback first, and then reCAPTCHA
- Use the
async
anddefer
parameters in the `script` tags
Configuration
JavaScript resource (api.js) parameters
Parameter | Value | Description |
---|---|---|
onload | Optional. The name of your callback function to be executed once all the dependencies have loaded. | |
render | explicit onload | Optional. Whether to render the widget explicitly. Defaults to onload, which will render the widget in the first g-recaptcha tag it finds. |
hl | See language codes | Optional. Forces the widget to render in a specific language. Auto-detects the user's language if unspecified. |
g-recaptcha tag attributes and grecaptcha.render parameters
g-recaptcha tag attribute | grecaptcha.render parameter | Value | Default | Description |
---|---|---|---|---|
data-sitekey | sitekey | Your sitekey. | ||
data-theme | theme | dark light | light | Optional. The color theme of the widget. |
data-size | size | compact normal | normal | Optional. The size of the widget. |
data-tabindex | tabindex | 0 | Optional. The tabindex of the widget and challenge. If other elements in your page use tabindex, it should be set to make user navigation easier. | |
data-callback | callback | Optional. The name of your callback function, executed when the user submits a successful response. The g-recaptcha-response token is passed to your callback. | ||
data-expired-callback | expired-callback | Optional. The name of your callback function, executed when the reCAPTCHA response expires and the user needs to re-verify. | ||
data-error-callback | error-callback | Optional. The name of your callback function, executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry. |
JavaScript API
Method | Description |
---|---|
grecaptcha.render( parameters ) | Renders the container as a reCAPTCHA widget and returns the ID of the newly created widget. container The HTML element to render the reCAPTCHA widget. Specify either the ID of the container (string) or the DOM element itself. parameters An object containing parameters as key=value pairs, for example, {'sitekey': 'your_site_key', 'theme': 'light'}. See grecaptcha.render parameters. |
grecaptcha.reset( ) | Resets the reCAPTCHA widget. opt_widget_id Optional widget ID, defaults to the first widget created if unspecified. |
grecaptcha.getResponse( opt_widget_id ) | Gets the response for the reCAPTCHA widget. opt_widget_id Optional widget ID, defaults to the first widget created if unspecified. |
Google Recaptcha Api Key
Examples
Explicit rendering after an onload callback
Explicit rendering for multiple widgets
Google Recaptcha Generate Site Key Generator
Important: Version 1.0 of the reCAPTCHA API is no longer supported, please upgrade to Version 2.0. Learn more
Welcome to the developer documentation for reCAPTCHA! reCAPTCHA lets you embed aCAPTCHA in your web pages in order to protect them against spamand other types of automated abuse. Here, we explain how to add reCAPTCHA to your page.
Audience
This documentation is designed for people familiar with HTML forms and server-side processing.To install reCAPTCHA, you will probably need to edit some code.
We hope you find this documentation easy to follow. Make sure to join thereCAPTCHA developer forum to givefeedback and discuss the API.
Overview
API Keys
To use reCAPTCHA, you need tosign up for API keysfor your site. The keys are unique to the domain or domains you specify, andtheir respective sub-domains. Specifying more than one domain could come in handyin the case that you serve your website from multiple top level domains (forexample: yoursite.com, yoursite.net).
By default, all keys work on 'localhost' (or '127.0.0.1'), so you can alwaysdevelop and test on your local machine.
Integration
Once you've signed up for API keys, you can add reCAPTCHA to your site and customize the widget. If you're using one of the following programming environments or applications, click on the link below for further instructions.