Skip to content
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:
Steps:
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:
<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:
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.