April 4, 2020

Integrating Mailchimp and Webflow — Webflow tutorial


Connecting a form to Mailchimp lets you collect
email signups. And you can USE Mailchimp to configure and
send marketing emails, newsletters, and targeted campaigns. So how do we tie this in to a real business
site? In this video, we’ll do this by grabbing the
action URL, setting the action and method in Webflow, and…that’s it. It’s that quick. Let’s start with the action URL. Our goal here is to grab (from Mailchimp)
this custom code snippet. Right here. This all happens in the Audience tab. Now. Yours might look different depending on your
account. If you see View Contacts here? You can just click it. If you don’t, you might need to create a
new audience first. Once we’ve selected our audience, we want
to view our list of contacts INSIDE that audience. And once we’re in the contacts? We can select Signup forms. So. We’re looking for the “form action URL.” What does that mean? Doesn’t matter. But it’s right here. We’re looking to grab everything in between
the quotes here. But if we click anywhere inside this field? Mailchimp designed this to automatically select
the ENTIRE code snippet. That’s not what we want. We only want the stuff in between the quotes. And there are two ways to get this. First, we can click and drag to select the
range we need, and before letting go (before we stop dragging), we can use Command C on
Mac or Control C on Windows to copy it to our clipboard). But this can be tedious. Especially for Grímur who not only had trouble
with multitasking, but also opened up a tear in spacetime. The other way to do it is to just copy and
paste the whole snippet into a text or code editor. Then you can grab the URL. Copy that to the clipboard. And that’s all we need for part 1. Part 2? We’re going to go back to Webflow, back to
our form. And we’ll select the form right on our canvas. Once we do? The element settings panel has all our specific
information we need. All we have to do? Is paste that action URL (the thing we just
copied to our clipboard)…and then set the method to POST. Now: one important note — the fields might
not link up properly if the names don’t match Mailchimp. So if you’re doing a field like phone number,
here’s how to do it. First, add a field in Webflow. We can option drag (or alt drag on Windows)
to duplicate (to place a copy of someth — the keyboard’s still floating — and when we
option drag, it makes a copy. So we can do that for the label and for the
field itself. We’ll double-click to edit that label, we
can call it phone number…but here’s the really important part. If we go into the settings on our field? We can set the field type. We’re going to come right back to this in
a second, so let’s leave this exactly how it is. Back in Mailchimp, from our Audience, go to
view contacts, and then again to signup forms. And before, we hit “embed form” but now
we’ll go to the form builder. Let’s scroll down and look at this. We can add new fields to the right, but phone
number is already in this one. So let’s go in and edit that (or at least
look at it). The field tag here is “Phone”. Why is that important? Because back in Webflow, we’ll want to make
sure the field name exactly matches (it should be identical to) the field tag in Mailchimp. And that’s it. We can publish our site, and the form should
be linked up to Mailchimp. As for Grimur’s keyboard? Eventually it fell, and it still works today. But that’s linking Mailchimp up to a project
in Webflow.

Leave a Reply

Your email address will not be published. Required fields are marked *