Is it possible to pass a variable to another page upon form submission in Webflow?

Published on
September 22, 2023

Yes, it is possible to pass a variable to another page upon form submission in Webflow.

Webflow provides a built-in form submission function that allows you to collect user input and send it to an email or a third-party service. However, passing a variable from one page to another requires a little bit of custom code. Here's how you can achieve it:

  1. Create a form on the first page: Start by adding a form element to the desired page in Webflow. Include all the necessary input fields for collecting user information.

  2. Add a custom attribute to the input field: In order to pass the value of an input field to another page, give the input field a custom attribute. You can do this by selecting the input field, going to the Settings panel on the right sidebar, and adding a new custom attribute (e.g., data-variable). Assign a unique name to the custom attribute.

  3. Retrieve the variable on the second page: On the second page, where you want to display the passed variable value, add a custom code embed element. In the embed code, you can use JavaScript to retrieve the variable value from the URL parameters. For example:

<script>  // Retrieve the value from the URL  const variable = new URLSearchParams(window.location.search).get('variable');  // Display the value on the page  document.getElementById('variableValue').textContent = variable;</script>
  1. Make sure to have the correct form submission action URL: In order for the form submission to go to the desired page, make sure to set the form action URL to the second page URL in Webflow's form settings.

With these steps, you can pass a variable from one page to another upon form submission in Webflow. Remember to adjust the JavaScript code based on the custom attribute name and the element ID used on the second page.

Example:

Let's say you have a form with an email input field on the first page. You want to pass the entered email value to the second page and display it. Here's what you need to do:

  1. Add a custom attribute to the email input field on the first page: Set the custom attribute name as data-email.

  2. Retrieve the email value on the second page using JavaScript:

<script>  const email = new URLSearchParams(window.location.search).get('email');  document.getElementById('emailValue').textContent = email;</script>
  1. On the second page, add an element (e.g., <p id="emailValue"></p>) where you want to display the email value.

By following these steps, you can pass the email value from the first page to the second page and display it using custom code in Webflow.

Additional questions:

  1. How can I pass multiple variables between Webflow pages upon form submission?
  2. Can I pass variables to an external API instead of another Webflow page?
  3. Are there any limitations or considerations when passing variables between Webflow pages using custom code?