Can a Webflow page accept URL parameters to pass answers from a Typeform quiz and add them as hidden fields to a Webflow form for collecting contact details?
TL;DR
- Add hidden fields to your Webflow form to capture URL parameters from Typeform.
- Configure Typeform to redirect with parameters to your Webflow page.
- Insert a custom script in Webflow to read URL parameters and fill hidden form fields.
- Test the setup by submitting a Typeform entry and checking the form captures the data correctly.
Webflow does not natively support passing URL parameters to Webflow forms as hidden fields. However, you can achieve this functionality with a small custom script. Here’s a step-by-step approach:
1. Prepare Your Webflow Form
- Add the necessary contact fields to your Webflow form in the Designer.
- Include hidden fields within the form to capture the URL parameters coming from Typeform.
2. Use Typeform to Pass URL Parameters
- In Typeform, set up the quiz to redirect to your Webflow page upon completion.
- Format the redirect URL to include the answers as parameters (e.g.,
yourwebsite.com?name=John&email=john@example.com).
3. Add a Custom Script to Your Webflow Page
- Go to the Page Settings of the Webflow page that Typeform will redirect to.
- In the Custom Code section, add a script that reads the URL parameters and assigns them to the hidden fields in your form.
Sample Script Example
- Use a script like the following as a guide to fetch URL parameters:
- Use
URLSearchParamsto capture parameters. - Assign the values to the hidden form fields based on their name attributes.
4. Test Your Setup
- Submit a Typeform quiz entry to test the redirection with parameters.
- Verify that the Webflow form captures and includes these values as intended.
Summary
By using a custom script, you can effectively pass URL parameters from a Typeform quiz to a Webflow form, capturing the quiz responses in hidden fields. This requires setting up a redirect in Typeform and adding a script to your Webflow page.