Webflow sync, pageviews & more.
NEW
Answers

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?

To pass UTM parameters of a submitter to a hidden field in a Webflow form and integrate it with Mailchimp, you can use a combination of JavaScript and Webflow's interactions. Here's how you can achieve this:

Step 1: Add hidden fields to your Webflow form
First, make sure you have the necessary hidden fields in your Webflow form to capture the UTM parameters. You can add these fields by going to your form settings, clicking on the "Add Field" button, and selecting the "Hidden" field type for each parameter you want to capture.

Step 2: Get the UTM parameters in JavaScript
To retrieve the UTM parameters from the submitter's URL, you'll need to add some JavaScript code to your Webflow project. You can do this by going to your project settings, selecting the "Custom Code" tab, and adding the following code inside the "Footer Code" section:

```javascript

```

Make sure to replace `'.w-dyn-form'` with the appropriate CSS class or ID selector of your form element. If your form has a custom class or ID, you can use that instead.

Step 3: Integrate with Mailchimp
To integrate the form with Mailchimp, you'll need to set up a Mailchimp account and connect it to your Webflow project.

1. In your Webflow project, select the form element.
2. In the right sidebar, go to the "Settings" tab and click on "Add Action".
3. Choose the "Mailchimp" option from the list of available actions.
4. Click on the "Connect Mailchimp" button and follow the prompts to connect your Mailchimp account.
5. Once connected, select the desired audience list from Mailchimp.
6. Map the form fields to the corresponding fields in your Mailchimp audience. Make sure to map the hidden fields for the UTM parameters as well.

That's it! Now, when a user submits the form, the UTM parameters will be captured and passed to the hidden fields, which will then be sent to Mailchimp along with the rest of the form data.

Remember to test the form thoroughly to ensure that the UTM parameters are being passed correctly and integrated with Mailchimp as expected.

Note: This solution assumes that your UTM parameters are present in the URL of the page where the form is located. If you're using paid advertising platforms like Google Ads or Facebook Ads, they should automatically append the UTM parameters to the URL. However, if you're using UTM parameters in other scenarios, make sure they are present in the submitter's URL for this solution to work.

Rate this answer

Other Webflow Questions