How to Add re-CAPTCHA to a Form for Better Security

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

In this tutorial, you will learn how to add CAPTCHA to a form using RTMForm to enhance security and protect your website from spam and automated bot submissions.

Make sure you have updated RTMForm Builder to version 1.2.6 before starting.

1. Access Form Settings

Navigate to RTMKit > Settings > Form Settings and click “Create From Here” to configure your reCAPTCHA integration.

2. Select Google reCAPTCHA Version

• Choose the version that matches your Google API credentials (v2 Checkbox, v2 Invisible, or v3).
• Input the URL of the website where you want to add the reCAPTCHA protection.
• Provide a specific name for your project to help identify it in your dashboard.
• Don’t forget to click the Submit button to save your settings.

Make sure the website URL you enter matches the domain you registered in the Google reCAPTCHA Admin Console. If they don’t match, the captcha will fail to load and show a “Domain Mismatch” error.

3. Enter Your Credentials

• Once the label is successfully registered, copy the Site Key and Secret Key, then paste them into the Form Settings.

• Go back to the Form Settings page to apply the keys you just copied.
• Ensure that the version you select here matches the one you registered in the Google reCAPTCHA Admin Console.
• Site Key: Copy and paste the site key provided by the Google reCAPTCHA Admin Console.
• Secret Key: Enter the secret key to enable secure server-side verification.
• Click Save Changes to finalize and activate the settings.

4. Add the Widget to your Form

• Locate the form you want to protect and click “Edit with Elementor” to open the visual builder.

• Search for the reCAPTCHA widget in the side panel.
• Drag and Drop the widget and place it inside your form structure, typically before the submit button.

5. Content Configuration

In this section, you can configure the core settings of the widget:

• reCAPTCHA Theme: Choose between Dark or Light mode to ensure the widget blends perfectly with your website’s background.
• Warning Message: Customize the Warning Message that will appear if a user fails the validation or forgets to check the box.

6. Style Customization

In this tab, you can fine-tune the appearance of the widget and its associated text to ensure it meets your design standards:

• Alignment: Adjust the Alignment to the Left, Center, or Right to match the flow of your form fields.
• Text Color: Customize the Text Color for the warning messages or labels to maintain consistency with your brand’s color palette.
• Typography: Open the Typography settings to change the font family, size, weight, and style of the helper text, ensuring a clean and modern look.

• reCaptcha will be displayed on the frontend.

• Don’t forget to click Publish button to save all your changes and make the reCAPTCHA active on your live website.

6. reCAPTCHA Display on Website

Once the configuration is complete and published, the reCAPTCHA will be active on your live site :

• re-CAPTCHA v2

• re-CAPTCHA v3