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.
After the installation, navigate to API Keys & Tokens and fill in the Secret Key (which can be found in your hCaptcha profile settings).
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.
Upgrading the 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.
Navigate to the CMS View by clicking the SiteManager Logo in the top left and go to the Form Component you want to upgrade. Click the settings button (3 dots) and click Code. Once in the Code View, go to the sublevel of the form where all the items are located (Usually called 'Build Form').
In this sublevel you will see all items which you can already add to your SiteManager Form. By pressing the '+' button in between one of the items, we get a popup to create a new item. In this example we will call this item 'Captcha Field' to stay consistent.
After clicking Add in the popup, a sidebar will open with the option to add Snippets and/or Inputs Fields. To make the setup easier, we have provided a snippet called 'hCaptcha' which will include all required fields for a working captcha.
Once the captcha is added, make sure the added item (which we previously named Captcha Field) is set to List and not Single so that it can be added and/or removed in the CMS View.
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 these steps are completed, we are done in the Code View, now we can return to the CMS View by clicking the SiteManager logo in the top left again.
Edit the Form by clicking the pencil or quick edit buttons (or double-clicking the component) and add the newly added Captcha Field to your Form.
Fill in the site key from your hCaptcha account in the respective field.
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!