Redirecting to custom URL after embedded form is submitted

Design help Custom code
1

What I want to accomplish:
To either display the native “success” state when a form is submitted or to redirect to a custom URL.

The Issue
I’m embedding a zoho form (using the ‘action’ + POST) on a custom multi-step form, but I can’t seem to avoid going into zoho’s ugly ‘thank you for submitting’ page after a user clicks ‘submit’ on the form.

I’ve tried many different solutions
including using finsweets redirect ‘enhance’ functionality
(link: Form Submit - No-code using Attributes) after seeing it applied in a video. But, that didn’t work (I’m guessing multi-step forms have different behaviors).

(see similar post about this issue but with no scripted solution: Redirecting to custom success page URL after submitting the form with POST method)

The only solution that’s kinda working is this ajax interception script I found on stackoverflow (link: javascript - How to post form submission to a URL and redirect on submission to a different URL - Stack Overflow) But— I’m getting a “block by CORS policy” issue after submission. The form technically submits, but there’s no redirection as I was hoping, the page just stays as it is.

This is my custom code in the before section of page settings:

<script>
$("#wf-form-form").submit(function(e) {
    e.preventDefault(); // avoid to execute the actual submit of the form.
    var form = $(this);
    var url = form.attr('action');
    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response 
               window.location.href = "https://www.google.com";
           }
         }); 
    });
 </script>

My question:
How can I either get the finsweet thing to work on a multi-step form or how can I fix the CORS issue so that the ajax script successfully redirects after submission?

Thanks in advance!

3

Since you’re submitting your form to Zoho, Zoho controls the response.
A few options;

  • Zoho may have a way for you to specify the page you want it to redirect to after a successful submission.
  • If you handle the form submission yourself, you can prepare the form data using script, submit it to Zoho, check the response, and then do whatever you like, such as display the form success message.

I’ve not used Zoho forms, but SA5’s form handlers do this with e.g. Make, Zapier, Basin and so on.

4

Thank you for the response!

I’m trying to create something on a tight (somewhat non-existent budget) and if I were to go to a paid plan zoho offers a very tempting cheap option which is why I chose it as my ‘base’. I spent so many hours/days figuring out how to use webflow’s + relume’s + my own styling with custom javascript to get zoho’s forms to submit that I’m in a sunk cost fallacy situation and don’t want to have to learn and set up a new system (e.g., zapier). Is there a way to use ajax to send the form submission (like in the script I posted) but not redirect the user to zoho’s form handling?

5

@xrmo - If Zoho supports it then you should be able to. Your answer lies over in Zoho’s documentation, not here.

6

How do does finsweet do it with “enhance” attribute as described here: Form Submit - No-code using Attributes ?

I basically want to do what they do. Without a multistep form, the finsweet ‘enhance’ solution kind-of works. When I have a multistep form the ‘enhance’ attribute breaks and doesn’t work anymore. If finsweet figured out a way to submit a custom form via POST but retain webflow’s native ‘success’ state, how can I do that too?

7

I haven’t used that Finsweet attribute. You’d have to check FS forums if you want to know more about it.

SA5 does a similar thing, while also handling data transport to specific services like Make and Zapier, and response handling.

The way I handled the success / error states there is to manually show/hide them. You find the elements and then e.g. hide the form and show the success state, depending on what you want to do.

8

I couldn’t find a solution so I just subscribed to zoho’s paid tier which does URL redirect. It’s not the solution I wanted (I preferred the custom success state of the form to be triggered). Thanks for the suggestions though!