Form submissions to third-party service with native interactions

Community resources Webflow Tips
27

I’ve also updated the code to include a redirect after successful form submission. If the redirect URL is set, it will redirect, if it’s not set, it will show the native success message.

image

 <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>
4 Likes