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?
TL;DR
- Set Webflow form to capture user inputs and redirect with a URL containing query parameters for name, email, and phone.
- Configure Typeform to recognize these parameters as hidden fields for data transfer.
- Test to ensure data is correctly transferred from Webflow to Typeform.
Passing form inputs like name, email, and phone number from a Webflow form to a Typeform through hidden fields can be done by following these steps:
1. Set Up Your Webflow Form
- Ensure your Webflow form collects the name, email, and phone number.
- Include input fields with unique IDs or names. For example, set
name,email, andphone.
2. Create Redirect URL with Query Parameters
- Set the form's redirect URL to include query parameters that capture input values.
- Use a syntax like:
https://yourtypeformurl.com?name={{name}}&email={{email}}&phone={{phone}}.
3. Configure Hidden Fields in Typeform
- Go to your Typeform settings and identify the section for hidden fields.
- Define the hidden fields using the same labels as your Webflow query parameters: name, email, phone.
4. Add Logic for Query Parameters
- Configure Typeform to automatically capture and use these hidden fields by linking them to relevant form questions or simply tracking them within your Typeform analytics.
5. Test the Integration
- Perform a test submission on your Webflow form.
- Confirm that the information successfully transfers to your Typeform, populating the intended hidden fields.
Summary
Set your Webflow form to redirect to a Typeform link with query parameters reflecting the user's name, email, and phone. Then, configure your Typeform to use these parameters as hidden fields for seamless data transfer between the two platforms.