Webflow sync, pageviews & more.
NEW

How can I display form data from multiple fields on a different page in Webflow?

TL;DR
  • Redirect users with form data as URL query parameters using JavaScript.
  • On the destination page, use JavaScript to extract those parameters or read from localStorage and display them in designated elements with specific IDs.

To display submitted form data from multiple fields on a different page in Webflow, you need to store and pass that data since Webflow doesn’t natively support dynamic form sessions across pages.

1. Use URL Parameters to Pass Form Data

  • After form submission, you can redirect users to another page and include form field data in the URL as query parameters.
  • In your form’s Form Settings, set the Redirect URL to something like:
    /thank-you?name=John&email=john@example.com
  • To do this dynamically:
  • Add custom code in the Form Page → Page Settings → Before tag area.
  • Use JavaScript to construct and redirect with the parameters from the form values.

2. Capture Query Parameters on the Destination Page

  • On the destination page (e.g., /thank-you), use custom JavaScript to parse the values from the URL.
  • Assign these values to specific HTML elements with unique IDs or class names.

Example snippet to get URL parameters (no raw code shown, just refer to using URLSearchParams):

  • Look for fields like ?name=John&email=john@example.com
  • Use document.querySelector("#name-field").textContent = name to inject the value.

3. Place Dynamic Text Elements for Output

  • On the thank-you page, add plain text elements with fixed IDs (e.g., id="name-output") where you want to display the data.
  • Your custom script will populate those elements using the extracted parameters.

4. Optional: Use Local Storage for Short-Term Data

  • If users might open the next page via navigation (not auto-redirect), you can also store form data in localStorage on submission.
  • On the next page, read the data from localStorage and show it in designated elements.
  • Make sure to clear storage after use if data should not persist.

Summary

To display form data on a different Webflow page, pass the data via query parameters or localStorage, then use custom JavaScript to extract and inject it into static elements. Webflow doesn’t support this out-of-the-box, so light scripting is needed.

Rate this answer

Other Webflow Questions