In this article you will learn how to upgrade your existing SiteManager Form with a captcha powered by hCaptcha.
You will need
- A SiteManager Form (from our Platform Library or Snippet)
- An account on hCaptcha
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:]
Video Tutorial
First Steps
Our first step will be installing the hCaptcha (Secret Key) from the Upgrade Center. We first have to navigate to Project > Upgrade Center.
Next up, click on "Integrations"
In this overview we'll find: hCaptcha (Secret Key). Click on Add to Site.
If hCaptcha (Secret Key) isn't available in this list, hCapcha (Secret Key) has already been installed in your project.
To confirm this, check Project > API Keys & Tokens
If there's already a Google Recaptcha secret key installed in your project, you can use this field as well to fill in your hCaptcha secret key.
After the installation, navigate to API Keys & Tokens and fill in the Secret Key (This key can be found in your hCaptcha profile settings).
Important
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
Upgrading your form
If there already is a Captcha available in your form, and you just want to know how to set it up, you can continue to the next step.
To upgrade an existing form component, we need to navigate to the Code View by clicking on the 3 dots > 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 set up the required fields
Adding the new captcha
If you add a captcha to your component, for example "Form w/ Content Banner", all other uses of this component will require a captcha to be able to submit.
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.
We'll then navigate to "Build Form"
In our form, we can now add our new hCaptcha field with the "+" button.
Once the hCaptcha field is added, we can enter the sitekey.
Head over to the dashboard in hCapatcha to find your Sitekey
Options
Size
In this dropdown you can choose how the hCaptcha field is being shown, by default this will be set to "Normal".
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.
Site Key vs Secret Key
The Site key & Secret key are both needed & are different from each other!
All done!
You successfully added a captcha to your form, don't forget to publish your changes!