How can I pass the name, email, and phone inputs from a Webflow form on a landing page to a TypeForm on the next page, using the hidden fields feature?

To pass form inputs from a Webflow landing page (name, email, and phone) to a Typeform loaded on the next page, you can use URL parameters plus Typeform’s Hidden Fields feature.

1. Update Webflow Form Page to Pass Parameters

• In Webflow, go to your landing page where the form is submitted.

• Select the form element and set the Form Action URL to the next page's URL with URL parameters.

• Use input field name attributes that match your hidden fields: for example:

• Name field → name="name"

• Email field → name="email"

• Phone field → name="phone"

• Set the form’s method to GET if you're not using form submission processing (such as Zapier or Webflow's built-in submissions).

• Construct the redirect URL like this:
  /next-page?name=[name]&email=[email]&phone=[phone]

To do this dynamically:

• Use JavaScript to build the redirect URL on form submit and forward the user.

2. Add Hidden Fields to Your Typeform

• Go to your Typeform project and open the Hidden Fields panel.
• Add the same fields: name, email, phone (lowercase, no spaces).
• Typeform will now listen for these names in the query string (URL parameters).

Example Typeform URL with hidden fields:
https://your.typeform.com/to/abc123?name=John&email=test@example.com&phone=1234567890

3. Embed or Link to the Typeform with URL Parameters

If the Typeform is embedded on a Webflow page, pass the parameters from the landing page and append them when loading the embed.

Add JavaScript to construct the Typeform iframe src dynamically:

• On your next page, grab window.location.search
• Append it to your Typeform embed URL
• Dynamically set the iframe src using JavaScript like:

const query = window.location.search;const iframe = document.querySelector("iframe");iframe.src = "https://your.typeform.com/to/abc123" + query;

Make sure Webflow doesn't lazy-load the iframe before this runs (add loading="eager" if needed).

4. Test the End-to-End Flow

• Submit your Webflow form with test name/email/phone.
• On the next page, confirm the Typeform loads and shows the correct data in the hidden fields (you can use Logic Jumps or variable piping to verify).

Summary

To pass data from a Webflow form to a Typeform:

• Set matching field names in Webflow for name, email, and phone.
• Use query parameters to send values to the next page.
• Enable hidden fields in Typeform with matching names.
• Capture the URL parameters into the Typeform (via direct link or dynamic embed).

This lets you personalize or pre-fill Typeform content based on initial form input.