How can I fix the issue with the "contact us" form on Webflow where it can still be submitted without ticking the recaptcha box?

Published on

September 22, 2023

Note

CommunityFAQ is not affiliated with Webflow. Click here if you'd like to visit Webflow's help resources.

To fix the issue with the "Contact Us" form on Webflow where it can still be submitted without ticking the reCAPTCHA box, you can follow these steps:

Ensure that reCAPTCHA is properly configured:

Go to the Google reCAPTCHA website and create a new site.
Choose the reCAPTCHA version you want to use (reCAPTCHA v2 Checkbox or reCAPTCHA v3).
Enter your website domain and generate the necessary credentials.
Make sure you copy the site key and secret key for the next steps.

Add reCAPTCHA to your Webflow form:

Open your Webflow project and navigate to the page containing your "Contact Us" form.
Drag and drop an HTML Embed element onto the page where you want to add the reCAPTCHA.
Paste the reCAPTCHA script code provided by Google into the Embed Code section.

Configure the reCAPTCHA settings:

In the HTML Embed element, add the data-sitekey attribute to specify your site key.
Set the required attribute to ensure the form cannot be submitted without ticking the reCAPTCHA box.
Customize the appearance and behavior of the reCAPTCHA by modifying the available options.

Verify the reCAPTCHA response:

In the Webflow Designer, select your "Contact Us" form.
In the settings panel, select the "Success" state of the form.
Add a new "Set Field Value" action to the form submission trigger.
Set the field value to the reCAPTCHA response (), which is available in the form submission object.

Test the reCAPTCHA integration:

Publish your Webflow project for the changes to take effect.
Visit the published website and fill out the "Contact Us" form.
Ensure that the form cannot be submitted without properly ticking the reCAPTCHA box.
Check your email or designated form submissions collection to see if the form submission is recorded correctly.

By following these steps, you should be able to fix the issue where the "Contact Us" form on your Webflow site can be submitted without ticking the reCAPTCHA box. Implementing reCAPTCHA helps protect your form from potential spam or abusive submissions.

Additional Questions:

How can I add reCAPTCHA to my Webflow form?
What is reCAPTCHA and why is it important for form security?
How can I configure reCAPTCHA v3 in Webflow?

How can I set the width for a custom code date field in Webflow?

How can I expand the functionality of the search feature on my Webflow site to include more than just titles, links, and descriptions?

Have you successfully built an on hover dropdown menu using the instructions on the Webflow forum?

How can I make the yellow box that appears after entering an email transparent in Webflow?

What could be causing the extra white space on the right side of the pages on mobile in this Webflow site?

Any suggestions on how to fix the issue in Webflow where project pages are shifted to the right and a grey area with vertical text appears on the left side?

How can I prevent multiple videos from loading their own script files on my Webflow site?

How can I create text anchors within an unordered list in Webflow?

Is there a way to set the HTML tag to overflow hidden or something when the button to open the light box is clicked in Webflow?

Can you help me troubleshoot why my anchor link in Webflow is not working even though it works in other platforms like Codesandbox?