How can I display form data from multiple fields on a different page in Webflow?
TL;DR
- Assign unique name attributes to form fields and set the form to redirect to a specific page.
- Use JavaScript to capture field values on submit and redirect with them as URL parameters.
- On the destination page, use JavaScript to parse the URL and insert values into elements by ID or class.
To display form data from multiple fields on a different page in Webflow, you’ll need to pass the submitted values (like name, email, etc.) to another page using URL parameters and then extract and display them using custom code.
1. Set Form Field Names and Submit Button
- Select each form field in Webflow and ensure each has a unique and meaningful name attribute (e.g., name="firstName", name="email").
- Make sure your form action is set to the page you want to redirect to. This can be done via custom JavaScript or using form success settings.
2. Use Custom Code to Redirect With Field Data
- Place custom JavaScript in the Form Success Message or inside an Embed element before the
</body>tag. - The script should:
- Capture form field values on submit
- Redirect users to a new page with those values as URL parameters (e.g.,
thank-you?firstName=John&email=john@example.com)
Example behavior: When the user submits the form, they are redirected to /thank-you?firstName=John&email=john@example.com.
3. Use JavaScript to Read URL Parameters on the New Page
- On your target page (
thank-you, etc.), insert an Embed element and use JavaScript to: - Parse the URL query string
- Insert values into the page using
textContentorinnerTextfor elements with known IDs or classes
For example:
- Have text elements with unique IDs, like
id="user-name"orid="user-email". - Your script would look for
?firstName=John&email=john@example.comin the URL and then insert "John" into#user-name, and so on.
4. Limitations to Know
- This works only for non-sensitive data, as anyone can see URL parameters.
- Webflow does not support session or server-side data passing natively, so all visible data is exposed to the front-end.
- This process requires a bit of JavaScript knowledge, as Webflow’s built-in tools don’t support native input transfer between pages.
Summary
To show form data from multiple fields on another page in Webflow, use JavaScript to pass field values via URL parameters during the form submission, then extract and insert those values with JavaScript on the destination page.
