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?
- Set Webflow form method to
GETand ensure fields for name, email, and phone exist. - Use JavaScript to redirect users after form submission, appending form data as URL parameters.
- Configure Typeform's Hidden Fields (
name, email, phone) to capture and use these values. - Test by submitting the Webflow form and verifying data transfer in Typeform.
You can pass name, email, and phone from a Webflow form to a Typeform using URL parameters and Typeform's hidden fields. Here's how:
1. Set Up the Webflow Form
- Ensure your form has input fields for name, email, and phone.
- Set the form method to
GETin the Form Settings (Webflow forms default toPOST, so you’ll need a workaround like using a custom form action or JavaScript for URL redirection).
2. Redirect to Typeform with URL Parameters
After form submission, redirect users to the Typeform link while passing the form data as URL parameters.
Example redirect URL format:
```
https://yourtypeform.com/to/xyz123?name=John&email=john@example.com&phone=1234567890
```You may need JavaScript/JQuery to construct this URL dynamically:
```javascript
```
Replace
yourtypeform.com/to/xyz123with your actual Typeform link.This script prevents the default submission and redirects with the form data.
3. Configure Hidden Fields in Typeform
- In Typeform, go to Settings > Hidden Fields.
- Add fields matching your URL parameters: name, email, phone.
- Typeform will automatically populate these values when the user arrives via the modified URL.
4. Test the Data Transfer
- Fill out the Webflow form and submit it.
- Check if the redirected Typeform populates the hidden fields correctly.
Summary
You need to capture Webflow form data, append it to the Typeform URL, and configure Typeform to recognize these hidden fields. Using JavaScript ensures a seamless transfer without requiring a database or third-party automation tools.