How can I pass the UTM parameters of a submitter in a hidden field using Webflow form and integrate it with Mailchimp? I've tried various solutions from different sources but have been unsuccessful so far. Any ideas on how to make it work?
- Add UTM parameters to URLs to track source data.
- Create hidden fields in Webflow forms to store UTM parameters.
- Use JavaScript to populate hidden fields with UTM parameters from the URL.
- Integrate Webflow form data with Mailchimp, ensuring UTM data is mapped correctly.
- Test the integration by submitting forms and verifying data in Mailchimp.
To pass UTM parameters of a submitter into a hidden field in Webflow and integrate this data with Mailchimp, you'll need to follow a few steps. This involves capturing UTM parameters via URL, storing them in hidden form fields, and ensuring that this data is sent correctly to Mailchimp.
1. Add UTM Parameters to the URL
- Ensure that your URLs are appended with UTM parameters (e.g., ?utmsource=google&utmmedium=cpc).
2. Create Hidden Fields in Webflow Form
- Go to your Webflow project and navigate to the form you want to edit.
- Add hidden fields for each UTM parameter you want to track (e.g.,
utm_source,utm_medium,utm_campaign).
3. Capture UTM Parameters with JavaScript
- Use JavaScript to retrieve UTM parameters from the URL and populate them into the hidden fields.
- Add the following script to your Webflow project to handle this:
```javascript
<script>
function getUrlParameter(name) {
name = name.replace(/[[]/, '\[').replace(/[]]/, '\]');
var regex = new RegExp('[\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/+/g, ' '));
}
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('[name="utm_source"]').forEach(function(field) {
field.value = getUrlParameter('utm_source');
});
document.querySelectorAll('[name="utm_medium"]').forEach(function(field) {
field.value = getUrlParameter('utm_medium');
});
document.querySelectorAll('[name="utm_campaign"]').forEach(function(field) {
field.value = getUrlParameter('utm_campaign');
});
});
</script>
```
- Go to the page settings on Webflow where the form is located.
- Paste the script in the Custom Code section (inside the
<head>tag).
4. Integrate with Mailchimp
- Integrate your Webflow form with Mailchimp using Zapier or another third-party integration tool if not directly connected.
- Ensure the hidden fields containing UTM data are mapped to corresponding fields in Mailchimp.
5. Test the Integration
- Test the form submission by accessing the page with a URL containing UTM parameters.
- Check Mailchimp to verify that UTM data is correctly captured.
Summary
In summary, you need to capture UTM parameters from the URL, store them in hidden fields of a Webflow form using JavaScript, and ensure these fields are properly integrated with Mailchimp. This involves creating hidden fields, adding a script for capturing parameters, and integrating with a third-party service for seamless data transfer.
