Webflow form to Mailchimp integration

Project goal:

this is a quick guide how to integrate mailchimp to webflow without any kind of custom code or use third party integration tool like zapier or make.com

Here is the best youtube explanation I’ve found so far:

⁠

https://www.youtube.com/watch?v=_46g6MB143I&ab_channel=MikePecha⁠

⁠

Steps:

On Mailchimp:

search Audiance or create a new one if you are creating more than one on your Webflow site.

click Sign up forms

click embedded forms → create a new one.

copy the action code inside the double quotes. (”...”)

Go to Webflow then build a form.

Click any form element and go to the settings panel on the right hand side.

click action and paste into the copied action snipet

turn method from get to post

The form right now is connected to Mailchimp. ✅

6. connect the individual fields to Mailchimp.

7. to do that go to Mailchimp and search Merge tags on the embed form settings.

8. important part to set up the custom fields in Mailchimp embed form fields. When you create a new embed form you only have just the e-mail, so it is crucial to toggle all of the created form field for the working integration.

Additional setup.

If you want to create checkboxes you should use Custom Javascript.

The script use the Webflow checkboxes and collect the checked checkboxes and push the label into a text-area. This text area is possible to show in Mailchimp as a listing data.

You should hide the text-area in the form.

here is the script:

document.addEventListener('DOMContentLoaded', function() {

const checkboxes = document.querySelectorAll('.w-checkbox-input');

const textArea = document.getElementById('reason-value');

checkboxes.forEach(checkbox => {

checkbox.addEventListener('change', updateTextInput);

});

function updateTextInput() {

const selectedLabels = Array.from(checkboxes)

.filter(checkbox => checkbox.checked)

.map(checkbox => {

// Find the associated label text

return checkbox.parentElement.querySelector('.w-form-label').textContent.trim();

});

textArea.value = selectedLabels.join(', ');

}

});

</script>

the text-area id in this example is: “reason-value”

codepan link:

⁠

https://codepen.io/zoltan-zsamboki/pen/oNrLyEW⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.