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
- Enable URL parameters in Typeform by editing the redirect URL with placeholders for quiz answers.
- Add hidden fields in your Webflow form to match the URL parameters.
- Use custom JavaScript to populate hidden fields with URL parameters in Webflow.
- Test the setup to ensure parameters are captured correctly in form submissions.
You want to know if a Webflow page can accept URL parameters from a Typeform quiz and add them as hidden fields in a Webflow form. Yes, this is possible with some custom setup.
1. Enable URL Parameters in Typeform
- Find the Thank You Screen you want to use after the quiz completion in your Typeform.
- Edit the Redirect URL to include query parameters. For example:
https://yourwebflowpage.com/form-page?param1=value1¶m2=value2. - Use Placeholders to dynamically insert answers from Typeform into the URL parameters.
2. Add Hidden Fields to Your Webflow Form
- Open the Webflow Designer and navigate to the page with your form.
- Add hidden input elements to the form for each parameter you plan to capture.
- Set the ID or Name attribute of each hidden input field to match the URL parameters.
3. Use Custom Code to Populate Hidden Fields
- Go to Project Settings in your Webflow dashboard.
- Add Custom Code in the "Before </body>" section to read URL parameters and populate the hidden fields.
- Example JavaScript Snippet:
```javascript
document.addEventListener("DOMContentLoaded", function() {
const urlParams = new URLSearchParams(window.location.search);
for (const [key, value] of urlParams.entries()) {
const hiddenInput = document.querySelector(input[name="${key}"]);
if (hiddenInput) {
hiddenInput.value = value;
}
}
});
```
- Publish Your Website to ensure the custom code takes effect.
4. Test the Integration
- Complete a Typeform quiz and ensure it redirects correctly with parameters.
- Visit the Webflow form page and submit a test entry.
- Check the form submissions to verify that hidden fields capture the intended values.
Summary
You can configure a Webflow page to accept URL parameters from a Typeform quiz by redirecting with the parameters, adding hidden fields to the Webflow form, and using custom JavaScript to populate these fields.
