Introduction

reCAPTCHA is a free service that protects your site from spam and abuse. It uses advanced risk analysis techniques to tell humans and bots apart.

Setting Up reCAPTCHA on New Forms

To enable reCAPTCHA on a form, you must first have setup your Integration keys: Integrations.

You can enable reCAPTCHA from the "reCAPTCHA" tab, while editing an existing form. There are two types of captcha available:

v2

Check the checkbox to enable it and select "reCAPTCHA v2" from the dropdown. Click save when you're done.

Finally, ensure that you include the following line of code in your form layout: 

{% include 'recaptcha' -%}

 

v3

Check the checkbox to enable it and select "reCAPTCHA v3" from the drop down and define your sensitivity score (between 0.0 and 1.0). You can also define an action if you wish. Click save when you're done.

Finally, ensure that you include the following line of code in your form layout: 

{% include 'recaptcha' -%}

Updates for Existing Forms Created before December 2019

We have made some updates to the way that reCAPTCHA is rendered within forms. This is based on feedback from the community that the server side validation of reCAPTCHA was confusing for end users and also harder to account for error messaging.

We are changing the way that the reCAPTCHA tag is entered into layouts. If you are using reCATPCHA with custom layouts then you will need to update them the next time you save your form (you will reminded to do so in the Form Builder UI). The forms will stay backwards compatible until this time, and if you are using default layouts then they will update automatically for you.


Step 1) Update the ReCaptcha tag in the Form Layout

Currently your custom layout will have a line that looks like either:
{% spam_protection "recaptcha_v2" %}
or
{% spam_protection "recaptcha_v3", action: "signup" %}

To update this, simply remove that line and replace it with the following:

{% include 'recaptcha' -%}

Step 2) Update the Form Submission function in the Form Layout

To use the new ReCaptcha, you'll need to make sure your Form is using the version 2 JavaScript function. This may already be the case!

To check this, find the Submit Button in your Form Layout. (PayPal payment Forms may not have this button, but if that applies to your Form, you can skip this step). The button will probably be an HTML <button> element and should have an "onClick" attribute containing a function for submitting the Form.

<button class="btn buttonAccent" onClick="formSubmit(this,'form_1',error);">Send Form for Assistance <i class="fas fa-spinner fa-spin no-spin"></i></button>


It's the function you'll need to check at this stage. Change from the old function:

onClick="formSubmit(this,'form_1',error);"

To:

onClick="s_form_submit_v2(this,'form_1',error);"

It's very important not to change any of the arguments in the brackets- leave them as they were already in the Form- just change the function name!

Step 3) Update the IDs of the Name and Email Fields


The new function requires certain fields to have special IDs so that can be found easily in the Form. Check the table below and give each field the correct ID:

Field

Mandatory ID

Name

id="s_name"

Email

id="s_email"

What if I want to have separate fields for first name and last name?

Siteglide requires a single field for a whole name. However, you can add as many other name fields as you need. This article describes how you can automatically populate the name field using JavaScript.

Step 4) Add a Hidden User ID field

If you don't already have it, add the entire hidden field for User ID at the top of your Form:

<input name="{{ form_builder.fields.properties.user_id.name }}" id="s_user_id" type="hidden" value="{{session.current_user.id}}" />

Related Articles

Did this answer your question?