In this video you'll embed a MailChimp sign up form into a WordPress Web site at the live server will
test the sign up form.
Exploring the opt in system automated e-mails and thank you pages and learn how to create a system to
collect emails into a marketing list.
By completing this lesson you'll know how to set up client sites for building an email list for their
businesses which is one of the best ways to grow a list of prospects leads and potential customers using
the account that you set up in the last video.
Open up your MailChimp account and you can open up the Sign-Up forms page for the list that we created
before mine is called Greg Davis notifications and I'm going to be using that list to set up general
forms and embedded forms and testing them in this video.
The other thing you'll need is a fresh WordPress installation at one of the live servers.
I've got a new installation under a sub directory here called MailChimp.
Here's the way I created it.
I went to my C panel inside of site ground and I went to the bottom just as we had created our original
site and I.
I clicked soft tackiest.
When I went in and I selected install under Wordpress and then right here under the domain Greg Davis
dot com I selected a directory.
Now I called it MailChimp and then I went through and selected all the other options and clicked install
and so now what I have when I navigate to my domain name slash MailChimp.
I have a test site that I named MailChimp test site.
It's at the default 20:16 WordPress theme and this is a page that comes pre-built inside of site Ground
WordPress sites to give you an indication of the stuff that they provide in the sidebar.
There's a meta item called log in and that will take me to my logon page at.
And I set up those credentials.
When I had set up WordPress initially through the MailChimp see panel and now I can go ahead and click
go ahead and remember that.
And here's my fresh WordPress installation you'll remember that one of the cool things about the C panel
powered site Ground account is that you can install as many WordPress installations as you like.
Under sub directories like I have here under slash MailChimp So I think I'll just make a widget to go
on the sidebar and place the MailChimp sign up form within that sidebar widget.
So you could see here I've got the default sidebar widgets are inside of the widget area called sidebar
in the 2016 theme and I will take another text widget bring it up to the top.
There will be where it will be at the top right hand side of the site and it's just a test widget test
site.
I'm going to call it MailChimp sign up so I know exactly what it is.
And for now just place the word text in there and hit save.
Great now that widget is saved I can right click on visit say.
Open that in a new tab.
And of course I see my user account up here at the top and I always like to go back into my profile
and turn off that toolbar so that I can see exactly what the site looks like when I open it up inside
of a new tab.
So I just go back to there and refresh the page and there we go.
OK.
So MailChimp sign up and I have just the word text right here so this should be a sign up form and go
ahead and do that at your own WordPress site and Pozza video if you need to and then come back and we'll
go back into WordPress into the Sign-Up forms area and we'll create a form using the general forms button.
Now we explored this page in the last video.
But let's add and look at two extra things that we didn't see in the last video.
First of all you may have noticed this sign up form you Arel that MailChimp gives you that you could
use to give to someone.
Let's see what it looks like I mean hit Control C open a new tab and somebody navigates to this u r
l.
This will be your sign up form.
Now it's just the form it's self styled exactly like MailChimp styles it on a blank page.
If you ever see this you Arel called List Dasch manage dot com.
That's a MailChimp you are l.
So this is my account says Greg Davis there and then some other stuff and a code that's specific to
this form here.
So we're collecting an email address first name and last name.
One thing we'll do next.
Back inside the MailChimp dashboard Let's scroll down and look at our form and edit it a little bit
you know for each of these fields over here.
I mean actually trim this down a little bit and you can follow along and do the same thing.
I do want to collect an email address and maybe I'll just collect the first name but not the last name.
If I click on that field you can see it highlights yellow.
There's also items over on the right hand side.
These are my editing fields so I can choose if I want to click first name and make that a required field
so that if they don't fill it out it will force them to before they can subscribe or hit the submit
button that's fine and I'm going to remove the last name field by just hitting this minus button and
then MailChimp gives you a confirmation just in case you're deleting something by accident.
So I'm going to delete that field called last name.
Now one of the things is if you have a form already that is collecting data when you delete this form
field it actually deletes all the data associated with it in your list.
And because this is just a sample list for me I've had it for a while but I'm not using it for anything.
I'm going to go ahead and click OK and then that last name field will be deleted.
Since I'm not going to display a message I'm just going to leave this message area blank and up here.
If you roll over the Greg Davis notifications you can use an image you can remove the title here or
you can edit it.
And I'm just going to edit it.
I'm just going to place a nice message here so it'll come up in large type across the top.
And so we've made a change to our list form.
We've explored this sign up form u r l that MailChimp provides to us.
And now let's go back up to the sign up forms tab under our list and this time will click and embedded
forms so that we can take this actual form that's associated with the list called whatever you call
it.
Mine is Greg Davis notifications.
And then we'll decide how we're going to embed this into our Web site now to embed this on the Web site.
We're going to take a piece of code from MailChimp that they're going to give us here.
You can see that it's down here on the bottom right hand side right here where it says copy paste onto
your site.
But if you look at the tabs across the top there are some different kinds of forms that MailChimp will
provide the code for the classic form looks like this.
Here's a preview of it and it will match the width of the area.
There is a super slim form that just collects the e-mail address only and has the title.
Or you can check or uncheck including the form title.
Here's a horizontal one.
So if you have a real narrow or very short area on your Web site you can use a a form that's a horizontal
one a naked one doesn't have any styling.
And so this will assume the styling of your web site.
And that might be something that you'll want to use when you're you've styled forms on your Web site
in a certain way or that theme that you're using has styling in the C S S file that styles form fields
and buttons and things like that and then advanced gives you some extra stuff that you can use.
You can have hidden fields custom CSSA for styling your embed code if you want to do that within MailChimp.
Generally I'll just take a look at the classic one and I want to show all fields.
I'm just going to uncheck these other options.
Gives me some other checkboxes and things that the user can choose once they submit the form.
I can make the form with a particular number of pixels if I want to make sure that it's a certain width
on the page.
If I leave it blank It'll just take on the width of the area where it's placed and that's what we'll
do.
Now let's just take the the form that we have here.
If you click once inside there you can hit control-C to copy the MailChimp sign up code.
And let's take it over to our WordPress dashboard or back into appearance widgets and then in that sidebar
text widget that we created before I'm going to just erase the word text and hit Control V and copy
that whole piece of HDMI email code into the content field.
Now you can see they have a tag here that labels it.
That's the end of the MailChimp embed sign up the very top begin the MailChimp sign up form.
And if you click save and go over to the site in your new tab you can see that the web form is styled
there just like our MailChimp form looked like it MailChimp and it's there in the sidebar and there's
all kinds of things in here.
You can see at the top there there's some CSSA there's a reference to a dot CSSA file.
And there's also a style tag that ends right down here and it talks a little bit about if you want to
style this manually you can move it to the head of your T.M. file or move it into your stylesheet which
you know where it exists within your Wordpress dashboard or inside your Wordpress files.
Now remember back in the site when we looked at it this is the exact styling that MailChimp had with
in the embed form that we had created over here although it fits inside of the width of our widget.
But what if we wanted this button to be styled just like the 2016 theme or whatever theme that we use
we could go back here into the widgets and just remove that style area all the way up to the link to
the CSSA file.
If I just hit control X to cut it I can then hit save in my widget and I have that on my clipboard if
I want to put it back.
But if we go over here to the live site and hit refresh you can see that I changed it a little bit.
This is now using the font that our headers use here in the 2016 theme.
This is the same font here as the body text and the button is styled just like our Web site where it's
this black color.
And it turns blue when we roll over it.
Your choice how you want to style a form but I'll just stick that by creating paste back in and hitting
save and then I'll go back to the MailChimp styling because I think I liked the way it looked a little
bit better just like this little bit more whitespace in this video.
You explored the embed code MailChimp gives us for placing a form on our Web site and you took a look
at the CSA style area inside the embed code itself and saw how you could modify the code to change the
look of the form in the next video will customize the e-mails that MailChimp sends.
When someone fills out the form as well as the thank you pages MailChimp uses by default.
Let's do it