hCaptcha is a privacy-focused anti-bot solution that helps prevent spam and password attacks, protect websites, and reward site owners. It is the most popular alternative to reCAPTCHA.
This article will guide you through adding the hCaptcha field in Fluent Forms for your WordPress site.
Fluent Forms supports hCaptcha in both General Forms and Conversational Forms templates.
Adding hCaptcha Field #
To learn how to add the hCaptcha field to Fluent Forms, follow the steps below:
Before using hCaptcha, you must configure it with a Site Key and Secret key. If you want to learn more details, read the hCaptcha Integration Guideline article.
First, go to the Forms section from the Fluent Forms Navbar, choose a desired Form, and click the Edit icon to open the Editor page of that form.
If you do not have any existing forms, read Create a Form from Scratch or Create a Form using Templates documentation to create a new one.
Once you are on the Editor page, click the Plus Icon in your form editor and open the Advanced Fields module. The Advanced Fields option is also in the right sidebar under the Input Fields tab.
Now, select the desired hCaptcha Input field by Clicking on it or Dragging and Dropping it into your editor.
Customizing the hCaptcha Field #
Once you add the hCaptcha field, you can customize it by hovering over it and clicking the Pencil Icon.
This will open the Input Customization tab, where you can modify the following settings:
Now, Located in the Input Customization Tab, these settings allow you to configure the essential aspects of the hCaptcha field:
A. Element Label: This is the field title the users will see when filling out the hCaptcha field in a form. You can enter any text here to help users understand the purpose of the field.
B. Name Attribute: The input field’s name attribute is the HTML equivalent of the same name. You don’t need to modify this.
Embed the Form into the Frontend #
Once you have customized the hCaptcha field, click the Save Form button to apply the changes.
To display the form on a specific page or post, Copy the Shortcode from the top-right corner and Paste it into your desired page or post.
Now, preview the form, click Preview & Design in the middle of the page.
Preview of Added hCaptcha Field #
Here is a preview of the form with the hCaptcha field:
Congratulations! You have successfully added hCaptcha to your form in Fluent Forms.
If you have any further questions, concerns, or suggestions, please do not hesitate to contact our support team. Thank you!
