Form CAPTCHA HTML Object

The form CAPTCHA data is an HTML object. If the CAPTCHA type is reCAPTCHA then you can programmatically manipulate some of the tag data. 

The reCAPTCHA output is something like this:

<div class="g-recaptcha" data-sitekey="WEBSITEKEYHERE" data-theme="light" data-size="normal" data-image="image"></div>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>

You can alter the data attributes for the <div> tag and you can add attributes to the <div> tag.

It is not recommended to change the "data-sitekey" value.

The following core reCAPTCHA attributes can be altered:

  • class
  • image
  • size
  • theme

Class

You can add additional classes to the <div> tag if you want. You should always append new classes and never overwrite the class value.

The class for the div must contain "g-recaptcha" in order for the reCAPTCHA element to be generated. You can add classes but you should not overwrite the class value.

{% set form.captcha.class = form.captcha.class ~ ' myClass' %}

Image

If additional validation is required then you can choose whether or not reCAPTCHA will show images or audio.

The data-image attribute can be one of two values:

  • image
  • audio

The value must be lowercase.

{% set form.captcha.data.image = 'image' %}

{% set form.captcha.data.image = 'audio' %}

Size

The data-size attribute can be one of two values:

  • normal
  • compact

The value must be lowercase.

{% set form.captcha.data.size = 'normal' %}

{% set form.captcha.data.size = 'compact' %}

Theme

The data-theme attribute can be one of two values:

  • light
  • dark

The value must be lowercase.

{% set form.captcha.data.theme = 'light' %}

{% set form.captcha.data.theme = 'dark' %}

Other HTML attributes

You can set other attributes to the <div> tag if you want.

{% set form.captcha.id = 'myId' %}

{% set form.captcha.data.myKey = 'my value' %}

Script tag

You cannot alter the script tag that is generated.