How can I include UTM parameter data in my Webflow form submission to track sources like social media and Google?
TL;DR
- Add hidden form fields to your Webflow form for each UTM parameter you want to track.
- Use custom JavaScript to capture UTM parameters from the URL and populate the hidden fields.
- Publish your site, test the form with UTM parameters, and verify that submissions contain the UTM data.
To track UTM parameters in your Webflow form submissions, you'll need to capture the UTM data and send it with the form. Here’s how you can do it:
1. Add Hidden Form Fields
- Open your Webflow project and navigate to the page with the form.
- Add hidden fields to your form for each UTM parameter you want to track (utmsource, utmmedium, utm_campaign, etc.).
- Ensure these fields have appropriate names matching the UTM parameters.
2. Use Custom Code to Capture UTM Parameters
- Go to your page settings in Webflow and scroll to the Before </body> tag section.
- Insert a custom script that reads URL parameters and populates the hidden fields. Use JavaScript to achieve this:
- Identify UTM parameters in the URL using
URLSearchParams. - Assign the parameter values to corresponding hidden fields.
3. Publish and Test Your Form
- Publish your site for the changes to take effect.
- Test your form by accessing your page with different UTM parameters in the URL (e.g.,
?utmsource=facebook&utmmedium=social&utmcampaign=springsale). - Submit the form and ensure the UTM data is recorded in form submissions.
4. View Form Submissions with UTM Data
- Access form submission data in Webflow’s dashboard.
- Verify that the UTM parameters appear alongside other form inputs.
Summary
By adding hidden form fields and using custom JavaScript to populate them with URL-derived UTM parameters, you can effectively track and store source data from social media, Google, and other campaigns within your Webflow form submissions.