How to disable auto redirect from getform.io endpoint

Hi, all.

I created a landing page with a form in Webflow.
The form is using POST method with getform.io
How do I disable the redirection to the Thank you page?

I could disable the Thank You page redirection using UseBasin form endpoint. But have no idea how to do it using getform.io

Below are the code used to disable UseBasin form endpoint while keeping Webflow form success and error message. I would need it to work with getform.io

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

Why not follow their example?

I tried following that. But it doesn’t show the native success or error message. Anyway, I got it worked somehow. Not sure if it’s entirely correct, but it works. Sharing it below. :wink:

<script type="text/javascript">
$("#formID").submit(function(e){
  e.preventDefault();
  var action = $(this).attr("action");
  var data = {};
  $(this).serializeArray().map(function(x){data[x.name] = x.value;}); 
  $.ajax({
    type: "POST",
    url: action,
    data: JSON.stringify(data),
    contentType: "application/json",
    headers: {
      "Accept": "application/json"
    }
  }).done(function() {
     $('form').css('display','none');
     $('.w-form-done').css('display','block');
  }).fail(function() {
     $('.w-form-fail').css('display','block');
  });
});
</script>
2 Likes

For anyone using this code today, know that you may need to delete the line:
contentType: “application/json”,

If you’re getting errors in the console that say:
Access to XMLHttpRequest at ‘https://hooks.zapier.com/hooks/catch/14154165/bveainc/’ from origin ‘https://lo-harris.webflow.io’ has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

I had to do this for Zapier, and then I stopped getting webflow form errors and everything worked as expected!