What are some quick and easy ways to add UTM parameters to URLs using Webflow without needing any JavaScript knowledge?
TL;DR
- Manually edit external URLs in Webflow link settings to append UTM parameters.
- Use CMS fields to dynamically insert UTM strings into CMS template/page links.
- Add UTM parameters to form action URLs for external integrations.
- Set up 301 redirects in Project Settings to point short URLs to UTM-tagged destinations.
Adding UTM parameters to URLs in Webflow can be done easily without JavaScript by manually editing your link URLs or using Webflow's CMS and Link Settings. Here are several quick methods.
1. Manually Add UTM Parameters to Button or Link URLs
- Select the Link Block or Button in the Webflow Designer.
- In the Element Settings Panel, look for the Link Settings.
- For the external URL, append the UTM string directly.
Example:https://yourdomain.com/landing-page?utm_source=facebook&utm_medium=social&utm_campaign=summer_sale - This works for text links, button links, and link blocks.
2. Use the CMS to Add Dynamic UTM Parameters
- In the CMS Collection, add a Plain Text field called something like “UTM String”.
- Input UTM parameters per item, such as:
?utm_source=email&utm_medium=footer&utm_campaign=monthly_newsletter. - In a Template Page or Collection List, set the link field as:
https://yourdomain.com/page-name+ [UTM String field] using a Text field merge in the link settings. - This allows dynamic linking with custom UTM codes.
3. Use Webflow's Form Action URL for UTM Capture
- If you’re sending users to a form on another site (e.g., a HubSpot or MailChimp form), you can include UTM parameters in the Form Action URL.
- Open Form Settings, and update the Action field to include the UTM parameters.
- Important: This only works if you're using custom form integrations, not Webflow's native form submission.
4. Use Webflow’s Native Redirects (if needed for shortened UTM links)
- Go to Project Settings > Hosting > 301 Redirects.
- Create a shorter or custom URL that redirects to a full UTM-tagged URL.
- Example: redirect
/newsletter→https://yourdomain.com/signup?utm_source=web&utm_medium=nav&utm_campaign=subscribe.
Summary
You can add UTM parameters in Webflow easily by editing external link URLs, using CMS custom fields, or setting up redirects without needing JavaScript. This allows for full UTM strategy implementation directly within the Webflow interface.