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?

Passing UTM parameters in a hidden field using Webflow forms and integrating them with Mailchimp can involve several clear steps. Here's how you can achieve this:

​

1. Access Webflow Designer

• Open your Webflow project and navigate to the page with the form that you want to modify.
• Go to the Webflow Designer and select the form element where you want to pass the UTM parameters.

​

2. Add Hidden Fields to the Form

• Add a hidden input field for each UTM parameter you want to capture (e.g., UTM source, medium, campaign).
• To add a hidden field, drag a "Form Input" and set its type to Hidden.
• For each hidden field, set the Name attribute to correspond to the UTM you wish to track (e.g., utm_source, utm_medium, utm_campaign).

​

3. Use Custom Script for UTM Extraction

• First, make sure that the UTM parameters are present in your page URL.
• Add a custom script to your project to extract these parameters and populate the hidden fields. You can add this script to the Page Settings in the "Before </body> tag" section or use Site settings for it to apply to multiple pages.
• Use the script to parse the URL and find each UTM parameter, then use JavaScript to populate the hidden fields you created. For example:

  ```javascript

  <script>

    (function(){

      var urlParams = new URLSearchParams(window.location.search);

      document.querySelector('input[name="utmsource"]').value = urlParams.get('utmsource');

      document.querySelector('input[name="utmmedium"]').value = urlParams.get('utmmedium');

      document.querySelector('input[name="utmcampaign"]').value = urlParams.get('utmcampaign');

    })();

  </script>

  ```

​

4. Configure Mailchimp Integration

• Ensure your Webflow form is integrated with Mailchimp by going to Project Settings > Integrations and following the Mailchimp integration setup.
• Match the hidden fields in your Webflow form with the corresponding fields in your Mailchimp audience. You may need to create custom fields in Mailchimp to store UTM data.

​

5. Test the Setup

• Publish your site and append some UTM parameters to the URL, such as ?utmsource=testsource&utmmedium=testmedium&utmcampaign=testcampaign.
• Submit the form and check Mailchimp to verify that the UTM parameters have been captured correctly.

​

Summary

To pass UTM parameters through a Webflow form integrated with Mailchimp, you need to: add hidden fields in your form, use a JavaScript snippet to populate these fields from the URL, and ensure Mailchimp is set up to accept these values. Test the implementation to confirm success.