Form submissions to third-party service with native interactions

Thanks Jeff!

Are there step by step instructions for this somewhere? My developer and I weren’t able to figure it out.

1 Like

Hi Jeff,

I spent over 5 hours trying every variation and reading every single comment on every forum, and it’s still not working for me.

The regular reCAPTCHA works, just not the invisible one.

Here is a quick video where I’m sure someone can quickly point out what I’m doing wrong:

The page I am testing it on is https://www.doorloop.com/demos

The page is broken because of the code that seems to break the page.

Thank you in advance for your time and help!

Sadly, it seems like UseBasin support is non-existent as they haven’t responded to a single email.

I promise everyone, once I figure this out I will make a super easy video tutorial for all of you.

@webdev - would love your input on what I’m doing wrong. I feel like I’m so close. See previous video post if possible. Thank you!

@DavidDL - This should help you along…
https://usebasin-recaptcha.webflow.io/ajaxified

1 Like

WOWOWOW. You. Are. AMAZING. It worked!!

I can’t believe you put this together, this is 100x better than UseBasin’s own documentation and summarizes EVERYTHING!!

THANK YOU JEFF!!

P.S. Any idea why email validation doesn’t work anymore after this code? If I type in “abc123” to the email field, it will go through.

Validation is/should be happening client side (HTML5 type EMAIL). You can add a regex pattern to limit input or use more sophisticated validation libraries. There is no server side validation so there are limits.

Thank you!

For anyone in the future that needs to setup Invisible reCAPTCHA with Webflow & Usebasin, here are my full instructions:
https://docs.google.com/document/d/1zC8hHN0_XHqKP96_OFckQ9wechoP1fJEI32YSCUDZbo/edit?usp=sharing

And here is my tutorial video:
https://www.loom.com/share/d372c45c681d4a31be89ac9a1d54e95a

Big thank you to Jeff S @webdev in Webflow Forums, Matt from Usebasin, and Pat Heick @path for help with this.

Hello,

I am trying to implement UseBasin in Webflow with fileupload. I tried the great instruction and clonable @Diarmuid_Sexton provided.
But I failed. The send button is not working. Its doing nothing.

Could someone have a look and give me support with this?

read-only

@Joe_Hohman, @webdev, @Diarmuid_Sexton, @DavidDL

Hi, Webflow fans and experts! :wave:t2:

I’m almost finished creating my first fully-fledged personal website on Webflow, however, I would like to export it and host it for free elsewhere, hence I needed a solution to make forms work on my exported website. I found this article and decided to give it a go — I do get submissions which is really cool! Sadly, I’ve tried a bunch of things, but couldn’t make native success/error and Google reCaptcha work: I did add the custom code to projects settings and on the page, but they still aren’t working. Maybe Google’s reCaptcha does work, I didn’t see a popup — I dunno if it really works though. As for the success/error messages — no luck :frowning: Maybe this option is available only for paid Basin users, though I didn’t see any note on that in guides regarding the matter. So I suppose free users can do that.

Forgot to mention a really important thing: for some reason, required fields stopped being required! Now, it’s possible to submit a form with no information (there is a currency field, so it’s USD by default)! I don’t know why it doesn’t work, really. I did everything according to the guide. I really hope there is a mistake on my side because I worked all day long on the website, so I just missed it — it will be super sad if it’s impossible to make the field required for some reason on my website.

Here is my read-only link: https://preview.webflow.com/preview/alaverdyan?utm_medium=preview_link&utm_source=designer&utm_content=alaverdyan&preview=5cbbee1cf1a5b69fabf1d9d452f1111c&workflow=preview

The project’s head code:

<!-- Google reCaptcha script -->

  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  
  <script>
    function onSubmit(token) {
    document.getElementById("contact-form").submit();
    }
  </script>
  
  <style>
    .grecaptcha-badge {
    display: none;
    }
  </style>

The project’s footer code:

<!-- Basin form success/error messages redirect -->

 <script>
 // 3RD PARTY FORM - WITH FILE UPLOAD AND NATIVE INTERACTIONS (INCLUDES REDIRECT & SUBMIT BUTTON WAITING TEXT)
  $('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';
      // DISABLE ALL BUTTONS IN FORM
      $(e.target).find('input[type=submit]').attr("disabled", true);
      // GET REDIRECT URL
      var dataRedirect = $(e.target).attr("redirect");
      // GET & SET "WAITING TEXT" FROM BUTTON - I.E. "SENDING..." ONCE FORM IS BEING SUBMITTED
      var dataSubmitText = $(e.target).find('input[type=submit]').attr("value");
      var dataWait = $(e.target).find('input[type=submit]').attr("data-wait");
      $(e.target).find('input[type=submit]').attr("value", dataWait);
      // SUBMIT THE FORM VIA AJAX
      $.ajax({
        url: action,
        method: "POST",
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function(data) {
          if (data.success) {
            if (dataRedirect !== undefined){
            	// SUCCESSFUL SUBMISSION - REDIRECT TO PAGE (IF SET)
              window.location.href = dataRedirect;
              } else {
              // 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');
              //enable all buttons in form
              $(e.target).find('input[type=submit]').attr("disabled", false);
              $(e.target).find('input[type=submit]').attr("value", dataSubmitText);
              }
          } 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');
            // ENABLE ALL BUTTONS IN FORM
            $(e.target).find('input[type=submit]').attr("disabled", false);
            $(e.target).find('input[type=submit]').attr("value", dataSubmitText);
          }
        },
        error: function() {
          // FAILED SUBMISSION - SHOW THE FAILURE MESSAGE
          parent.find('.w-form-fail').css('display', 'block');
          // ENABLE ALL BUTTONS IN FORM
          $(e.target).find('input[type=submit]').attr("disabled", false);
        }
      });
    });
  });
 </script>

Thank you for your replies in advance! I really appreciate it! :relaxed:

Georgy :man_technologist:t2:

I don’t have the time to review everything in your post but I can tell you that Google ReCaptcha will not work on an exported site without you integrating it on your own, which requires server side code.

Thanks for such a fast reply, Jeff!

I didn’t know that about reCaptcha. I guess I will need to find a way to add it on GitHub Pages haha.

I hope the success/error messages issue will be solved. Maybe I do need to have a paid plan, and it’s just no one mentioned about it.

Just quick reviewed your JS, With basin you don’t need it on your side as basin uses it’s own API key and has integrated it into its endpoints.

See the writeup I did in 2019. Still current. Webflow Form using Basin with Ajax Submit and Google reCaptcha Checkbox + Honeypot (wfhow.com)

1 Like

Hi, Jeff!

The form started to work when I remove everything related to Google reCaptcha — I don’t know why it was interfering with another script. Now I get a custom success message which is what I wanted to see! Thanks a lot!

Hello all, (@Joe_Hohman @webdev )

I used the above code to have the form pushed to usebasin and have visitors redirected to a specific page.
Now all of the sudden the redirect doesnt work anymore. I am getting CORS errors.
Really frustating…

Hey @new_work_city ,

My name is Tom from Basin (usebasin.com).

Were you able to sort this out? Feel free to reach out to us and we can help you out.

support@usebasin.com

Tom

Just want to thank @Joe_Hohman @Diarmuid_Sexton for the original and tweaked version of the script. Worked a charm!

Also @Tom_Fast, thank you for making it so easy to contact Basin and find assistance. You guys at Basin are a fantastic bunch :+1:

1 Like

Hi @Egon_Sung ,

My name is Tom, from Basin (usebasin.com).

I realize this is super late. My apologies for the confusion. We’ve recently updated our UI and UX and I hope it’s a lot clearer now.

The pricing page also gives you a quick rundown of the difference in features: Basin Pricing and Free Trial

I hope that helps others as well.

Thanks

Thank you very much for the information, I think it will work very well.

Has anyone found a solution for the issue that @GeorgyDesign mentioned where required fields are no longer required?

I have my form set up and submitting to Basin just fine. The problem is that it submits whether or not any required fields are left blank.