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 add vertical navigation dots using Fullpage.js on my Webflow website?

Can I reverse an uploaded icon directly in Webflow?

How can I move the image on top of 'Tonic Service Features' within a rich text block in mobile view without it changing in desktop view on Webflow?

In Webflow, how can I customize the navigation in fullpage.js to display numbers instead of bullets and have an active style for the current page?

How can I embed a custom Google Map style into a section element in Webflow while ensuring that it fills the entire section and has a static content overlay?

How can I display multiple authors on a blog post header without including a comma after the last author using Webflow?

Is it possible to combine 'javascript:delay('URL') with 'javascript:history.back()' in Webflow for creating an 'about' page with a page transition and a back button?

How can I create a rating scale with emoji in Webflow? Are there any external widgets or custom code resources that I can use for this?

How can I create a button in Webflow that generates and displays a random number when clicked?

Is there a way to add custom code in Webflow to make all external links on a site "noopener" or "noreferrer" as recommended by Google Lighthouse?