Webflow Form with useBasin Form Engine

Invisible Google reCaptcha and Honeypot - Ajax method

Maximum Spam blocking Config by WF Forum member - > Jeff S @webdev

The form below is configured for both honeypot and invisible reCaptcha. Source reference is https://usebasin.com/docs/features/spam-filtering

NOTE: UseBasin docs shows a space between data-sitekey. There should be none.

Note: The URL endpoint for this form is managed by Jeff S @webdev in Webflow Forums. Replace with yours in the form action field. Don't use mine. It is here for testing only. Any successful submissions will end up in my endpoint.

Requirements

An active Basin account, with an endpont confgured. See getting started at usebasin.com

Notes

Thanks to Pat Heick - @path for funding a chunk of the time it took to create this tutorial! :)

Create your endpoint in Basin and configure. Get your endpont URL and set up you form's action with it. Set method to Post. Make sure you edit your settings in Basin to "Require Valid reCAPTCHA response" once your done setting this up.

Steps to implement:

  • Create your form in Webflow.
  • Give your form Unique ID. Make a note of it. You will need to add it your custom code. In this case it is "email-form"
Setting the form ID (upper right)
  • Next add this code to the page Head custom code (it is also below in the code block).  Replace YOUR WEBFLOW FORM ID HERE with your forms unique ID. See above. Your ID should be inside the parentheses. You can copy the code block from this page custom code.
  • Add your Basin Endpoint URL to the Form's settings Action field.
  • Set the Form Method to Post
  • Add the class g-recaptcha to the form submit buttton.
  • Add the three custom data attributes to the submit button from below:
  • data-sitekey with a value of 6Lew3SMUAAAAAJ82QoS7gqOTkRI_dhYrFy1f7Sqy
  • data-callback with a value of onSubmit
  • data-badge with a value of inline
  • Example below.
Data Sources added to Submit Button
  • Add a Embed element in the form (I placed it above the Name. It is hidden anyway.)
  • Add the code <input type="hidden" name="_gotcha"></input> which you should copy from the html embed in the form below.
  • Optional - Modify the head code block to show the reCaptcha badge (shown below)

‍

‍

Head Code Block

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.