Skip to content
English
Contact us
  • There are no suggestions because the search field is empty.

How to add hCaptcha to your SiteManager Form?

In this article you will learn how to upgrade your (existing) form with hCaptcha


You will need

  • A SiteManager Form (from our Platform Library or Snippet)
  • An account on hCaptcha

Important

hCaptcha will not work in older forms! An older form usually has the ID custom_form[:swpageitemid:] while a newer form will have the ID s-form[:swpageitemid:]_[:swpagelistid:]

hCaptcha needs 2 keys to work: Site key & Secret key. These keys are different from each other. Make sure to use them in the correct place

First Steps

Our first step will be to head over to hCaptcha aand create an account.  
If you already have an account you can skip this step and continue on the next step 

After signing up you'll see your Secret Key, you can copy this and paste this in a safe location.

Installing the integration

When we have setup our keys in hCaptcha, the next step is to install the hCaptcha Integration from the Integrations Overview.

After installing the integration, click on Connect to open the popup. 

This will show us a popup where we have to paste our Secret Key.

Secret Key

In the popup, we will need to fill in our Secret Key. If you haven't copied it to a safe location when signing up, you can reset your Secret Key. To do this, we head over to the hCaptcha dashboard, here we click on our profile image > Settings.

You can also navigate directly navigate to the settings page using this link

In the settings, you'll find a section with the secret key.

This will only show a part of the Secret Key!

 

If needed you can change this key by clicking on Generate New Secret. When creating a new Secret Key, you'll also need to update this in the integration settings. To do this, you'll have to Disconnect & Connect the integration in the Integrations Overview

Upgrading your form

If there already is a Captcha field available in your form, and you just want to know how to set it up, you can continue to the next step.

Next up, is upgrading your form with a captcha field. To upgrade an existing form component, you have two options (click on the name to be taken to the section that applies to your form):

  • No‑code Editor: If the form was created using the no-code editor or added from the project library.
  • Code Editor: If the form has been created using the Code Editor

To know which type of form you have, we can click on the No-Code Editor icon as shown in the image below.

 

In the No-Code Editor, you'll see a block named Form on the left side in the Layers panels. A Form that has been made usng the Code Editor, will have this icon in front of it: "<>".

 

If your component has been using no-code editor, you'll see the form fields like in the image below.

 

No-Code Editor

Only use this section if your form has been using the No-Code Editor or if it has been installed from the Platform Library. If you are not sure, check out the section above: No-Code vs Code 

To add hCaptcha to your form using the No-Code Editor, click on the No-Code Editor icon.

 

Next up, we need to click on the three dots next to form > Add element

 

 

This will open a popup, in this popup navigate to Form Elements. At the end of the list, we'll find the block: hCaptcha. Click on the block to install it in your form

 
Click Save & Exit to exit the No-Code Editor. You can then continue adding the block to your form in the next step: Adding the new captcha

Code Editor

Only use this section if your form has been using the Code Editor. If you are not sure, check out the section above: No-Code vs Code 

To add hCaptcha to your form using the Code Editor, click on the Component Settings > View Code 

 
Once we are in the Code View, we'll continue by navigating to "Build Form"

In this overview, you'll see all the blocks that you can already add to your form. We can add new blocks by clicking on the "+" button. 

In our newly created block, we will click on "CMS configuration", on the right-hand side we'll search for the hCaptcha snippet.

The snippet will add everything needed for hCpatcha to work. You can then click save changes, exit the Code Editor by clicking the SiteManager logo in the left corner of the screen and continue to the next step: Adding the new captcha 

Adding the new captcha

Once the previous steps are complete, we are done in the Code View. You can exit out of the Code View by clicking on the SiteManager Logo in the top left corner.

Let's go to a page with a form. To edit our form, click on the pencil icon.

 

In this view we continue by clicking on Edit Form

 

This will show us all the blocks that are already in this form

This will open a popup where we can find our newly created hCaptcha block

Once the hCaptcha field is added, we can enter the sitekey.

If you add a captcha field to your component, for example "Form w/ Content Banner", all other uses of this component will require a captcha to be able to submit.


Site Key

To find your Site Key, we go back to the dashboard in hCaptcha. Here we click on the tab: Sites

 

In this overview you can add a new site by clicking on Add Site

This will open the next screen, to fill in the basic information.

You don't need to add a domain, this is optional

In the settings screen, you have the option to change the difficulty of the hCaptcha that the user will see

We can then click on Save > Finish

Your Site Key has been created, be sure to click on the icon to copy the site key

We can head over to SiteManager, and paste our Site Key in the empty field.

Options

Size

In this dropdown you can choose how the hCaptcha field is being shown, by default this will be set to "Normal". Other size options are: Compact & Invisible

To hide the hCaptcha, you can use the option Invisible. This is a new addition to the hCaptcha snippet. 

hCaptcha also has a premium feature (called passive mode) but this is not needed.

If you have an existing hCaptcha, the option Invisible needs to be added manually.

Theme

You can also change how hCaptcha is being show. By default, this will use the "Light" mode.

Theme will not work when size has been set to Invisible.

All done!

You successfully added a captcha to your form, don't forget to publish your changes!