Redirect via Webhook After Form Submission

[adalys]

Hello all! At one point, using a combination of custom code and Make webhooks, we were able to redirect to unique links via form submission. I’m trying to do so again, but am running into a lot of trouble. Here’s my current workflow:

Pre-requisite: add the following code into Settings > Custom Code > Code Inside Header:

<script>
document.addEventListener("DOMContentLoaded", function() {
$(document).ajaxSuccess(function( event, xhr, settings ) {
if(xhr.responseText) {
const json = JSON.parse(xhr.responseText);
if(json && json.redirect) {
window.location.href = json.redirect;
}
}
});
});
</script>

1. User submits a form. Softr form settings should not be “Open Page.”

2. On submission, Softr sends the info to a Make webhook, like so:
   

3. Make receives the webhook.

4. Make then issues a 200 webhook response, with a redirect to a given site, like so:
   

5. What’s then supposed to happen is that the script added to the custom header above watches for the operation’s success, and then redirects to the website listed in Make. That’s not happening, though.

I’ve built this workflow before, but for some reason now I can’t get it to work. Can anyone spot something I’m missing or an error I’m making, or can anyone confirm that the above code is no longer functional with the React update?

[artur]

@adalys are you using a new form block ?

[adalys]

Hi @artur ! Yes, I am.

[artur]

@adalys we transitioned form blocks to react and few things changed. We will be sharing a code sample on how to handle it in the next few days

[Nickshas]

Hi @artur Any update on this? I am in the exact same situation too.

Thanks!

[artur]

@Nickshas and @adalys can you try the code below:

<script>
    window.addEventListener('submit-form-success-form1', (e) => {
        const response = e.detail.response || {};
        const data = response.data;
        if (data && data.redirect) {
            window.location.href = data.redirect;
        }
    });
</script>

This code will be working with new form blocks

[Nickshas]

Thank you! This has worked for me!

[Elise]

Hi @artur, @adalys and @Nickshas

The new script finally works for me Thanks a lot

I would like to share a tip that took me a while to find : don’t forget to use “https://…” in the redirect URL

[dcoletta]

I added this script to Scissors.

[dcoletta]

@Artur I’m seeing something unexpected.

I would have thought that the name of the event being dispatched would be submit-form-success- followed by the id of the form.

What I’m actually seeing is that the name of the event being dispatched is always submit-form-success-form1 no matter what the id of the form is.

Is this a bug or expected behavior?

[artur]

this must be a bug @dcoletta let me check with the team!

[artur]

@dcoletta we checked and seems to be working fine can you perhaps do a loom and show the issue ?

[dcoletta]

I can’t reproduce it any more. I think I must have made a mistake in my testing. Sorry about that! All is well.

[Jakob]

Does anyone know of a similar solution for redirecting to a dynamic URL when the form is creating a new AT record?

[arman_knowlmart.com]

I have multiple forms on the same page and it appears the script only works on the 1st form created? The redirect doesn’t work for me on form2 and form3.

[arman_knowlmart.com]

I think I’ve figured out how the script works. The form name needs to match this part of the script:

window.addEventListener('submit-form-success-**form name**', (e) => {

[aj_martin]

Would be very helpful or is there a way to append one of the form field value pairs to the redirect string ?

[RyanRad]

@artur Is there a way to make this redirect happen within a modal? Its works when the redirect happens from a page but not when a form is submitted within a modal. I thought maybe it was Stripe blocking the opening of a payment link in a modal, so I switched the URL to google to test but that would not open in the modal either, so I’m assuming this is something I can workaround with the custom code in Softr? Attached is a screenshot of what the redirect inside the modal looks like. Any help sorting this out would be greatly appreciated!

[EnigmaXXIII]

@artur I’m noticing that whenever I have a webhook response module in Make, Sofrt will continually retrigger the initial wehbook every minute until it times out. So Make is getting triggered twice per form submit, and no response received. This only happens (I think) when the Make flow takes over 60 seconds to complete. When I remove the webhook response from the end of the Make flow entirely, the form only triggers once.

If the entire Make flow takes <60 seconds, the webhook response is correctly received by Softr.
So it must be something to do with timeouts? But I thought webhook timeouts were 120 seconds. Is this a bug?

[artur]

@EnigmaXXIII I tried it out and it did send only one and the request took 75 seconds. Do you have anything visual to show? that could help me.
BTW keep in mind typically there is a preflight request and real request when it comes to calling this party APIs in case it helps.