1
00:00:00,600 --> 00:00:06,400
In this video you'll embed a MailChimp sign up form into a WordPress Web site at the live server will

2
00:00:06,410 --> 00:00:07,660
test the sign up form.

3
00:00:07,730 --> 00:00:13,370
Exploring the opt in system automated e-mails and thank you pages and learn how to create a system to

4
00:00:13,370 --> 00:00:15,740
collect emails into a marketing list.

5
00:00:15,740 --> 00:00:20,600
By completing this lesson you'll know how to set up client sites for building an email list for their

6
00:00:20,600 --> 00:00:26,780
businesses which is one of the best ways to grow a list of prospects leads and potential customers using

7
00:00:26,780 --> 00:00:29,000
the account that you set up in the last video.

8
00:00:29,000 --> 00:00:36,250
Open up your MailChimp account and you can open up the Sign-Up forms page for the list that we created

9
00:00:36,260 --> 00:00:42,230
before mine is called Greg Davis notifications and I'm going to be using that list to set up general

10
00:00:42,230 --> 00:00:45,720
forms and embedded forms and testing them in this video.

11
00:00:46,510 --> 00:00:51,900
The other thing you'll need is a fresh WordPress installation at one of the live servers.

12
00:00:51,940 --> 00:00:58,160
I've got a new installation under a sub directory here called MailChimp.

13
00:00:58,180 --> 00:00:59,490
Here's the way I created it.

14
00:00:59,530 --> 00:01:05,350
I went to my C panel inside of site ground and I went to the bottom just as we had created our original

15
00:01:05,350 --> 00:01:06,650
site and I.

16
00:01:06,720 --> 00:01:08,970
I clicked soft tackiest.

17
00:01:09,370 --> 00:01:17,590
When I went in and I selected install under Wordpress and then right here under the domain Greg Davis

18
00:01:17,590 --> 00:01:20,180
dot com I selected a directory.

19
00:01:20,350 --> 00:01:26,860
Now I called it MailChimp and then I went through and selected all the other options and clicked install

20
00:01:28,240 --> 00:01:34,270
and so now what I have when I navigate to my domain name slash MailChimp.

21
00:01:34,270 --> 00:01:38,850
I have a test site that I named MailChimp test site.

22
00:01:38,920 --> 00:01:46,450
It's at the default 20:16 WordPress theme and this is a page that comes pre-built inside of site Ground

23
00:01:46,450 --> 00:01:51,280
WordPress sites to give you an indication of the stuff that they provide in the sidebar.

24
00:01:51,280 --> 00:01:59,700
There's a meta item called log in and that will take me to my logon page at.

25
00:02:00,010 --> 00:02:02,410
And I set up those credentials.

26
00:02:02,410 --> 00:02:09,250
When I had set up WordPress initially through the MailChimp see panel and now I can go ahead and click

27
00:02:09,490 --> 00:02:10,810
go ahead and remember that.

28
00:02:10,930 --> 00:02:18,220
And here's my fresh WordPress installation you'll remember that one of the cool things about the C panel

29
00:02:18,220 --> 00:02:24,980
powered site Ground account is that you can install as many WordPress installations as you like.

30
00:02:25,090 --> 00:02:36,490
Under sub directories like I have here under slash MailChimp So I think I'll just make a widget to go

31
00:02:36,490 --> 00:02:42,850
on the sidebar and place the MailChimp sign up form within that sidebar widget.

32
00:02:43,030 --> 00:02:50,110
So you could see here I've got the default sidebar widgets are inside of the widget area called sidebar

33
00:02:50,200 --> 00:02:55,060
in the 2016 theme and I will take another text widget bring it up to the top.

34
00:02:55,060 --> 00:03:03,670
There will be where it will be at the top right hand side of the site and it's just a test widget test

35
00:03:03,670 --> 00:03:04,060
site.

36
00:03:04,060 --> 00:03:08,000
I'm going to call it MailChimp sign up so I know exactly what it is.

37
00:03:08,110 --> 00:03:13,210
And for now just place the word text in there and hit save.

38
00:03:13,220 --> 00:03:17,300
Great now that widget is saved I can right click on visit say.

39
00:03:17,420 --> 00:03:19,460
Open that in a new tab.

40
00:03:19,820 --> 00:03:26,510
And of course I see my user account up here at the top and I always like to go back into my profile

41
00:03:26,510 --> 00:03:33,740
and turn off that toolbar so that I can see exactly what the site looks like when I open it up inside

42
00:03:33,740 --> 00:03:34,790
of a new tab.

43
00:03:35,630 --> 00:03:39,110
So I just go back to there and refresh the page and there we go.

44
00:03:39,110 --> 00:03:39,340
OK.

45
00:03:39,350 --> 00:03:46,370
So MailChimp sign up and I have just the word text right here so this should be a sign up form and go

46
00:03:46,370 --> 00:03:52,190
ahead and do that at your own WordPress site and Pozza video if you need to and then come back and we'll

47
00:03:52,190 --> 00:04:00,500
go back into WordPress into the Sign-Up forms area and we'll create a form using the general forms button.

48
00:04:01,620 --> 00:04:03,990
Now we explored this page in the last video.

49
00:04:04,050 --> 00:04:09,400
But let's add and look at two extra things that we didn't see in the last video.

50
00:04:09,420 --> 00:04:15,090
First of all you may have noticed this sign up form you Arel that MailChimp gives you that you could

51
00:04:15,090 --> 00:04:17,330
use to give to someone.

52
00:04:17,400 --> 00:04:23,830
Let's see what it looks like I mean hit Control C open a new tab and somebody navigates to this u r

53
00:04:23,850 --> 00:04:24,710
l.

54
00:04:24,720 --> 00:04:27,480
This will be your sign up form.

55
00:04:27,480 --> 00:04:34,040
Now it's just the form it's self styled exactly like MailChimp styles it on a blank page.

56
00:04:34,170 --> 00:04:38,910
If you ever see this you Arel called List Dasch manage dot com.

57
00:04:38,910 --> 00:04:41,060
That's a MailChimp you are l.

58
00:04:41,100 --> 00:04:47,370
So this is my account says Greg Davis there and then some other stuff and a code that's specific to

59
00:04:47,370 --> 00:04:48,710
this form here.

60
00:04:48,720 --> 00:04:53,610
So we're collecting an email address first name and last name.

61
00:04:53,790 --> 00:04:55,260
One thing we'll do next.

62
00:04:55,260 --> 00:05:02,400
Back inside the MailChimp dashboard Let's scroll down and look at our form and edit it a little bit

63
00:05:02,660 --> 00:05:05,160
you know for each of these fields over here.

64
00:05:05,200 --> 00:05:09,480
I mean actually trim this down a little bit and you can follow along and do the same thing.

65
00:05:09,510 --> 00:05:15,330
I do want to collect an email address and maybe I'll just collect the first name but not the last name.

66
00:05:15,330 --> 00:05:18,160
If I click on that field you can see it highlights yellow.

67
00:05:18,300 --> 00:05:21,610
There's also items over on the right hand side.

68
00:05:21,630 --> 00:05:29,070
These are my editing fields so I can choose if I want to click first name and make that a required field

69
00:05:29,310 --> 00:05:33,960
so that if they don't fill it out it will force them to before they can subscribe or hit the submit

70
00:05:33,960 --> 00:05:40,950
button that's fine and I'm going to remove the last name field by just hitting this minus button and

71
00:05:40,960 --> 00:05:48,690
then MailChimp gives you a confirmation just in case you're deleting something by accident.

72
00:05:48,720 --> 00:05:51,160
So I'm going to delete that field called last name.

73
00:05:51,180 --> 00:05:59,430
Now one of the things is if you have a form already that is collecting data when you delete this form

74
00:06:00,090 --> 00:06:05,700
field it actually deletes all the data associated with it in your list.

75
00:06:05,940 --> 00:06:11,180
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.

76
00:06:11,220 --> 00:06:17,190
I'm going to go ahead and click OK and then that last name field will be deleted.

77
00:06:17,190 --> 00:06:25,690
Since I'm not going to display a message I'm just going to leave this message area blank and up here.

78
00:06:25,770 --> 00:06:33,270
If you roll over the Greg Davis notifications you can use an image you can remove the title here or

79
00:06:33,270 --> 00:06:34,640
you can edit it.

80
00:06:34,770 --> 00:06:36,250
And I'm just going to edit it.

81
00:06:36,300 --> 00:06:44,300
I'm just going to place a nice message here so it'll come up in large type across the top.

82
00:06:44,370 --> 00:06:48,460
And so we've made a change to our list form.

83
00:06:48,540 --> 00:06:53,360
We've explored this sign up form u r l that MailChimp provides to us.

84
00:06:53,520 --> 00:07:01,080
And now let's go back up to the sign up forms tab under our list and this time will click and embedded

85
00:07:01,080 --> 00:07:07,090
forms so that we can take this actual form that's associated with the list called whatever you call

86
00:07:07,110 --> 00:07:07,260
it.

87
00:07:07,260 --> 00:07:09,360
Mine is Greg Davis notifications.

88
00:07:09,360 --> 00:07:16,140
And then we'll decide how we're going to embed this into our Web site now to embed this on the Web site.

89
00:07:16,190 --> 00:07:20,730
We're going to take a piece of code from MailChimp that they're going to give us here.

90
00:07:20,800 --> 00:07:26,810
You can see that it's down here on the bottom right hand side right here where it says copy paste onto

91
00:07:26,810 --> 00:07:27,720
your site.

92
00:07:28,190 --> 00:07:35,570
But if you look at the tabs across the top there are some different kinds of forms that MailChimp will

93
00:07:35,570 --> 00:07:39,140
provide the code for the classic form looks like this.

94
00:07:39,140 --> 00:07:43,770
Here's a preview of it and it will match the width of the area.

95
00:07:43,780 --> 00:07:49,880
There is a super slim form that just collects the e-mail address only and has the title.

96
00:07:49,880 --> 00:07:55,070
Or you can check or uncheck including the form title.

97
00:07:55,430 --> 00:07:56,990
Here's a horizontal one.

98
00:07:56,980 --> 00:08:04,640
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

99
00:08:04,640 --> 00:08:08,390
one a naked one doesn't have any styling.

100
00:08:08,390 --> 00:08:11,820
And so this will assume the styling of your web site.

101
00:08:11,930 --> 00:08:17,210
And that might be something that you'll want to use when you're you've styled forms on your Web site

102
00:08:17,450 --> 00:08:24,230
in a certain way or that theme that you're using has styling in the C S S file that styles form fields

103
00:08:24,560 --> 00:08:31,070
and buttons and things like that and then advanced gives you some extra stuff that you can use.

104
00:08:31,070 --> 00:08:38,960
You can have hidden fields custom CSSA for styling your embed code if you want to do that within MailChimp.

105
00:08:38,960 --> 00:08:45,180
Generally I'll just take a look at the classic one and I want to show all fields.

106
00:08:45,230 --> 00:08:48,170
I'm just going to uncheck these other options.

107
00:08:48,200 --> 00:08:53,680
Gives me some other checkboxes and things that the user can choose once they submit the form.

108
00:08:53,720 --> 00:08:59,180
I can make the form with a particular number of pixels if I want to make sure that it's a certain width

109
00:08:59,180 --> 00:08:59,920
on the page.

110
00:09:00,020 --> 00:09:05,000
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

111
00:09:05,000 --> 00:09:05,150
do.

112
00:09:05,150 --> 00:09:09,220
Now let's just take the the form that we have here.

113
00:09:09,290 --> 00:09:17,180
If you click once inside there you can hit control-C to copy the MailChimp sign up code.

114
00:09:17,180 --> 00:09:25,280
And let's take it over to our WordPress dashboard or back into appearance widgets and then in that sidebar

115
00:09:25,280 --> 00:09:32,360
text widget that we created before I'm going to just erase the word text and hit Control V and copy

116
00:09:32,360 --> 00:09:37,500
that whole piece of HDMI email code into the content field.

117
00:09:37,610 --> 00:09:40,810
Now you can see they have a tag here that labels it.

118
00:09:40,820 --> 00:09:47,760
That's the end of the MailChimp embed sign up the very top begin the MailChimp sign up form.

119
00:09:48,140 --> 00:09:55,970
And if you click save and go over to the site in your new tab you can see that the web form is styled

120
00:09:55,970 --> 00:10:01,100
there just like our MailChimp form looked like it MailChimp and it's there in the sidebar and there's

121
00:10:01,100 --> 00:10:02,560
all kinds of things in here.

122
00:10:02,600 --> 00:10:08,930
You can see at the top there there's some CSSA there's a reference to a dot CSSA file.

123
00:10:09,080 --> 00:10:15,230
And there's also a style tag that ends right down here and it talks a little bit about if you want to

124
00:10:15,230 --> 00:10:21,590
style this manually you can move it to the head of your T.M. file or move it into your stylesheet which

125
00:10:21,800 --> 00:10:28,040
you know where it exists within your Wordpress dashboard or inside your Wordpress files.

126
00:10:28,040 --> 00:10:33,900
Now remember back in the site when we looked at it this is the exact styling that MailChimp had with

127
00:10:33,960 --> 00:10:41,520
in the embed form that we had created over here although it fits inside of the width of our widget.

128
00:10:41,720 --> 00:10:48,710
But what if we wanted this button to be styled just like the 2016 theme or whatever theme that we use

129
00:10:49,550 --> 00:10:56,540
we could go back here into the widgets and just remove that style area all the way up to the link to

130
00:10:56,540 --> 00:10:57,820
the CSSA file.

131
00:10:57,840 --> 00:11:03,710
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

132
00:11:03,710 --> 00:11:04,820
I want to put it back.

133
00:11:05,000 --> 00:11:10,310
But if we go over here to the live site and hit refresh you can see that I changed it a little bit.

134
00:11:10,310 --> 00:11:16,430
This is now using the font that our headers use here in the 2016 theme.

135
00:11:16,430 --> 00:11:24,350
This is the same font here as the body text and the button is styled just like our Web site where it's

136
00:11:24,350 --> 00:11:25,420
this black color.

137
00:11:25,520 --> 00:11:28,530
And it turns blue when we roll over it.

138
00:11:28,760 --> 00:11:36,680
Your choice how you want to style a form but I'll just stick that by creating paste back in and hitting

139
00:11:36,680 --> 00:11:42,950
save and then I'll go back to the MailChimp styling because I think I liked the way it looked a little

140
00:11:42,950 --> 00:11:47,750
bit better just like this little bit more whitespace in this video.

141
00:11:47,830 --> 00:11:53,380
You explored the embed code MailChimp gives us for placing a form on our Web site and you took a look

142
00:11:53,380 --> 00:11:59,590
at the CSA style area inside the embed code itself and saw how you could modify the code to change the

143
00:11:59,590 --> 00:12:04,640
look of the form in the next video will customize the e-mails that MailChimp sends.

144
00:12:04,660 --> 00:12:09,540
When someone fills out the form as well as the thank you pages MailChimp uses by default.

145
00:12:09,700 --> 00:12:10,220
Let's do it