How to get reCaptcha 2.0 Working on Webflow While Posting to an External Server

Using Basin and Webflow

Author:
Scott Boyington
Published on:
August 15, 2019
| Updated on:
August 15, 2019 6:51 PM

Webflow is an amazing tool which can make many projects much easier to do. However, there are some limitations to the service when it comes to the source of forms. To use the internal forms in Webflow, you must add the form into your website and have a Captcha key included in the Webflow settings to use the form. We know most forms are used to gather leads and client info,we want that data sent to services like HubSpot, Freshsales, and Pardot as this will help generate leads. Because we want to post we cannot use the “reCaptcha”as it will be bypassed because we don’t have the server back end and cannot edit the files to make it work. This work around is simple and requires very little actual code.

 

Basin Page
Requirements

Webflow Hosting (or Self Hosted) with a plan that allows Custom Code (or you could add code to the exported HTML)

A Basin account. https://usebasin.com/

Resources

Basin Documentation
https://usebasin.com/docs

Google reCAPTCHA V2 Documentation https://developers.google.com/recaptcha/docs/display

Webflow - Custom code in the head and body tags
https://university.webflow.com/article/how-to-add-custom-head-and-body-code-to-a-webflow-site

 

How to make Captcha work with exporting

 

First you will need to set up a free account with usebasin.com.

 

After you have made an account you will need to create your first endpoint. Use the “hamburger” drop down  menu on the top left of the screen.

 

After you have made your first endpoint, go to the menu “setting”on the top of the screen. This will allow you to copy your end point into your Webflow settings. Now, In Webflow, click on your form and select the gear on the top right. Change your method to “Post” and paste your URL into the Action.

 

Form setup

Now that your done your with your endpoint, go to edit on the top in Basin. Then scroll to the bottom and turn on AJAX and reCaptcha.

Enable Basin Code

Now we add our first code to the page. You will need to go to Page Settings -> Custom Code -> Head and paste in this code.

 

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

Form setup Webflow

You will have to add a HTML embed block to the form you are using.

 

First part is this snippet of code. This will make our JavaScript work in a minute by tricking bots to clicking this submit button being hidden and make the form fail.

<input type="hidden"name="_gotcha"></input>

Then under what you just added in your HTML block we will add this under snippet of code. This is the reCaptcha that will make your form not work when a bot fails it or a human. We don’t need to change the site key as its Basin’s site key that we want to use.

<div class="g-recaptcha"data-sitekey="6Lew3SMUAAAAAJ82QoS7gqOTkRI_dhYrFy1f7Sqy"></div>

 

Here is the finished product for your HTML box that you will need.

<input type="hidden"name="_gotcha"></input>
<div class="g-recaptcha"data-sitekey="6Lew3SMUAAAAAJ82QoS7gqOTkRI_dhYrFy1f7Sqy"></div>

HTML Embed Setup

Now to make it all work we will need some custom code that was created by Jason from the Webflow forums.

 

Past the following code into Page Settings -> Custom Code-> Body Closing Tag

<script type="text/javascript">
   /* apply only to forms with the action pointing to Basin */
  $('form[action^="https://usebasin.com"]').each(function (i,el) {
       form = $(el);
      form.submit(function (e) {
           /* stop the form from submitting */
          e.preventDefault();
           form =$(e.target);
           /* get the form's action parameter and add ".json" to the end */
           action =form.attr('action') + '.json';
           /* submit the form via ajax */
           $.ajax({
               url:action,
              method: "POST",
               data:form.serialize(),
              dataType: "json",
              success: function (data) {
                   if(data.success) {
                      /* successful submission - hide the form and show the success message */
                      parent = $(form.parent());
                      parent.children('form').css('display', 'none');
                      parent.children('.w-form-done').css('display', 'block');
                   }else {
                      /* failed submission - log the output to the console and show the failure message */
                      console.log(data);
                      parent.find('.w-form-fail').css('display', 'block');
                   }
               },
               error:function () {
                   /*failed submission - show the failure message */
                  parent.find('.w-form-fail').css('display', 'block');
               }
           });
       });
   });
</script>

Code to post into webflow

And that’s it, try it out! You will see that you will get the form sent to basin. If you need to send that data to another service like HubSpot, Freshsales, and Pardot you can use Zapier to hook into those programs and post to them when the data is received from basin. Sign up to our newsletter for when we create a blog post on how to do that.

So, what’s next? We created a test form for you to try out. Take a look.

Category:
Webflow Tips
Tags:
Tips and Tricks

LATEST Posts

Site Redesign

Working on changing the site into the new sleek website...

Read More