Webhook Form Redirect with fields in the url

Question

Redirecting a webhook form to another page is easy using this method: https://discord.com/channels/955905230107738152/1249714434570453073/1249763312984658051.However, is it possible to redirect to a URL that looks something like this:https://website.com/thank-you-page?email={{email_input}}&name={{name_input}}The URL needs to be built after submitting the webhook form, and then performing the redirect. I tried adding a script in the "Success box" that looks something like:
let userEmail = document.getElementById('form-name') let userName = document.getElementById('form-email')
const redirectUrl = /thank-you-page?email=${encodeURIComponent(userEmail)}&name=${encodeURIComponent(userName)}; But it didn't pass the values to the thank you page URL. The use case for this is using zaraz.track to get the email and name for a Facebook Pixel integration.

Oleg Isonen · Answer

sounds like gpt should be able to answer that easily, since its a generic js question

Luis · Answer

Thanks for the reply, Oleg. This is the script I tried in the webhook success box. The code is straightforward, but it is not working. It could not access ID: "form-name" and ID: "form-email".

GPT says: Webstudio modifies the DOM (e.g., removes the original form fields or replaces the entire form section with the success message) before your custom script in the success message area is executed.

Is that accurate, or is the script not correct?

Oleg Isonen · Answer

first of all add type module to the sscript, otherwise your constants are global and on second execution will raise an error

Oleg Isonen · Answer

second , the elements you are trying to access, are they still visible when success is rendered? if not then you can't get them from the document with document.getElementById

Oleg Isonen · Answer

I know understand what you are trying to do, you want to redirect via success but you want to access the data in the form that's hidden upon success

Oleg Isonen · Answer

one option could be to remove the binding from show prop on the form content, so that it doesn't get removed from the dom and hide it using display: none instead.

Oleg Isonen · Answer

now form content component has data-state="success" or data-state="error" attribute

Oleg Isonen · Answer

now you can access with the script and hide that form yourself from the success message and at the same time read the values you need

Join the Webstudio community

Webhook Form Redirect with fields in the url