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.
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.
In the Webflow Form Settings add the Basin Endpoint URL to the Action Field
Set the 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 ( Basin's Google Recaptcha site key. Use theirs not yours.)
data-callback with a value of onSubmit
data-badge with a value of inline
Example below.
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)