1 00:00:00,630 --> 00:00:06,330 In this video you'll revisit one of your students sandbox sites at W.P. deaf course dot com and set 2 00:00:06,330 --> 00:00:10,160 up a MailChimp subscribe form within agenesis environment. 3 00:00:10,260 --> 00:00:15,990 The Genesis framework again comes through with clean coding and beautiful styling for MailChimp forms 4 00:00:16,260 --> 00:00:19,190 using the Genesis E-News extended plugin. 5 00:00:19,440 --> 00:00:24,750 The plugin is free in the repository but must be used with the premium Genesys framework. 6 00:00:24,750 --> 00:00:30,780 By the end of this lesson you will once again see how using a premium tool can make the process of setting 7 00:00:30,780 --> 00:00:32,110 up systems easy. 8 00:00:32,190 --> 00:00:38,290 This time with an opt in form from MailChimp and the Genesis framework remember this website. 9 00:00:38,350 --> 00:00:44,600 It's our original student's sandbox site made on the parallax pro theme from Genesis. 10 00:00:44,600 --> 00:00:51,410 The only thing we really changed here was the background image on the first home page widget area and 11 00:00:51,410 --> 00:00:56,530 we replaced the lettering with a logo image up here at the left hand side. 12 00:00:56,540 --> 00:01:05,610 Now let's add agenesis E-News extended plug in and a MailChimp for you remember how to get there. 13 00:01:05,730 --> 00:01:12,630 Go back to I have this Resources page open still at students that WP of course dot com and I clicked 14 00:01:12,630 --> 00:01:16,360 the loggin button this time clicking open a new tab. 15 00:01:16,620 --> 00:01:21,120 So this page opened up and I was able to log in using the Wordpress log in form. 16 00:01:21,180 --> 00:01:28,110 Then I went up to my sites and opened the parallax pro-side dashboard. 17 00:01:28,170 --> 00:01:35,180 Now over here in plugins I'm going to be looking for the Genesis E-News extended plugin. 18 00:01:35,520 --> 00:01:42,780 I'll just click activate make sure that plugin is activated and now it gives me a widget under appearance 19 00:01:42,780 --> 00:01:46,050 widgets that I can use. 20 00:01:46,120 --> 00:01:50,430 Now I also have the demo site open on the right hand side. 21 00:01:50,620 --> 00:01:56,750 You can get there by going to demo dat studio press dot com slash parallax. 22 00:01:57,010 --> 00:02:04,990 Then I went up an under sample opened page layouts and I'm looking at the content sidebar page layout 23 00:02:04,990 --> 00:02:06,010 right here. 24 00:02:06,100 --> 00:02:13,420 I'd like to put an E-News extended widget up here in the sidebar to show what are MailChimp form will 25 00:02:13,420 --> 00:02:16,520 look like when it's styled through Genesis. 26 00:02:16,600 --> 00:02:24,580 If you remember back in our parallax pro website that we made we go back to a sample page. 27 00:02:24,580 --> 00:02:29,790 You'll remember that we played with the pull images in the single page layout. 28 00:02:29,800 --> 00:02:31,050 Now here's a challenge for you. 29 00:02:31,060 --> 00:02:39,280 Go back and tear parallax dashboard and change the default layout from a single column to a content 30 00:02:39,520 --> 00:02:45,950 slash sidebar layout like the demo puzzle video now and give it a try. 31 00:02:47,170 --> 00:02:48,120 Here's the way to do it. 32 00:02:48,130 --> 00:02:49,460 Site wide. 33 00:02:49,480 --> 00:02:57,240 I'll go up into Genesis and theme settings and if you scroll a little bit down there's a visual representation 34 00:02:57,240 --> 00:03:02,910 of the three layouts that come with the theme and I'm going to select this one on the left and scroll 35 00:03:02,910 --> 00:03:04,950 down and hit save changes. 36 00:03:04,950 --> 00:03:05,970 That's all there is to it. 37 00:03:08,150 --> 00:03:14,790 Now let's go back to our site tab and our sample page and refresh and see what we have. 38 00:03:14,790 --> 00:03:19,860 All right I've got a primary sidebar widget area over here that's not got any content in it because 39 00:03:19,860 --> 00:03:22,580 this is the sample content that comes with the theme. 40 00:03:22,710 --> 00:03:24,970 When you have an empty widget area. 41 00:03:25,170 --> 00:03:29,240 So let's go back into the Wordpress dashboard and under appearance. 42 00:03:29,340 --> 00:03:30,980 Let's open the customized. 43 00:03:31,410 --> 00:03:34,200 Great now that that's open all open widgets. 44 00:03:34,260 --> 00:03:38,430 Now why don't I have that primary sidebar widget that I'm looking for over here. 45 00:03:38,430 --> 00:03:44,520 Well it's because I'm on the home page of the site and that widget area doesn't exist on the home page 46 00:03:44,520 --> 00:03:45,160 template. 47 00:03:45,270 --> 00:03:53,160 So if I go into a sample page inside of the Web site here you can see that my widgets that I can customize 48 00:03:53,280 --> 00:03:55,830 are different over here on the left hand side. 49 00:03:55,860 --> 00:04:01,980 So now I have the primary sidebar widget here I can click Add a widget and go ahead and click the Genesis 50 00:04:02,070 --> 00:04:09,960 E-News extended widget and we'll see what we can customize inside of this Genesys widget. 51 00:04:09,960 --> 00:04:16,050 Now I mentioned in the introduction Well the Genesis E-News extended plug in is free and the Wordpress 52 00:04:16,080 --> 00:04:21,630 repository it does need the Genesis framework in the background to work. 53 00:04:21,870 --> 00:04:28,430 And so let's see what customizations we can make even without grabbing any code from MailChimp yet let's 54 00:04:28,440 --> 00:04:30,000 just make a title 55 00:04:34,370 --> 00:04:42,570 sign up for our newsletter and you can place some text before the form and then some text after the 56 00:04:42,570 --> 00:04:43,600 form. 57 00:04:43,920 --> 00:04:50,490 And the great thing about this is that this text is going to be styled to fit the fonts and headings 58 00:04:50,490 --> 00:04:56,130 and anything you can put in a text widget you can put here so you could even put each DML code say a 59 00:04:56,130 --> 00:04:58,890 button or something like that but let's just leave it like that. 60 00:04:58,890 --> 00:05:05,450 I'll often just put the form here and not use this before and after text as we go back down. 61 00:05:05,470 --> 00:05:08,030 There's a Google slash feed burner ID. 62 00:05:08,110 --> 00:05:15,130 If you're using these specific customisations for building your list you can use those IDs there. 63 00:05:15,310 --> 00:05:16,870 But here's where the meat of it is. 64 00:05:16,870 --> 00:05:23,240 We've got a form action and then email first name last name and hidden fields. 65 00:05:23,340 --> 00:05:26,190 It says not all services use hidden fields. 66 00:05:26,200 --> 00:05:33,870 The Genesis E-News extended plug in is designed to work with any bulk mail or marketing email program. 67 00:05:33,880 --> 00:05:37,830 It works really well with MailChimp and that's why we're using it right here. 68 00:05:37,840 --> 00:05:43,090 It's just designed to work very well with Genesys child themes and you have a few more things you can 69 00:05:43,090 --> 00:05:48,940 select if you want to change the input text for first name last name or email address. 70 00:05:48,970 --> 00:05:55,540 Or we can do is put some links in here just to see what will happen and what it will look like when 71 00:05:55,560 --> 00:05:57,970 there's actually a link. 72 00:05:57,970 --> 00:06:04,980 So I'm just going to use the hashtag and go first name not last name and email. 73 00:06:04,990 --> 00:06:10,870 So if we have first name and email address you can see that it's already making the form look quite 74 00:06:10,870 --> 00:06:14,310 good it matches our style it has the color that we have defined. 75 00:06:14,410 --> 00:06:19,630 And if we change that color site wide within the Genesis theme settings that will change in the form 76 00:06:19,660 --> 00:06:20,500 as well. 77 00:06:20,710 --> 00:06:27,580 So that's the benefit of using a plugin like this instead of just pasting the embed text from MailChimp 78 00:06:29,370 --> 00:06:34,610 I'm going to change the button text to say join with an exclamation point. 79 00:06:34,890 --> 00:06:40,200 And now I'm just going to go up and take out this after text and before text. 80 00:06:40,200 --> 00:06:47,040 In fact what I'll do is just make an assurance right here with the before text that says 81 00:06:54,250 --> 00:07:02,470 just a comfort message for the user that says if they join We're never going to share their email and 82 00:07:02,470 --> 00:07:07,440 you could also say that you're going to get some kind of a download here. 83 00:07:09,040 --> 00:07:11,420 In fact that might even be better. 84 00:07:11,560 --> 00:07:19,060 Cut and paste it into my button text instead because really why they're joining the list might be just 85 00:07:19,330 --> 00:07:21,150 to get the download here. 86 00:07:21,650 --> 00:07:24,830 So I go up here and take a look. 87 00:07:24,880 --> 00:07:27,170 Let's just save and publish that for now. 88 00:07:27,520 --> 00:07:34,630 Now of course this isn't an active forum because I don't have the proper code from MailChimp placed 89 00:07:34,630 --> 00:07:36,610 inside these fields yet. 90 00:07:37,030 --> 00:07:38,520 Let's go back to MailChimp. 91 00:07:38,650 --> 00:07:42,820 Now I'm still logged in under my list that I was working with in the last video. 92 00:07:42,910 --> 00:07:49,990 So open MailChimp and log in and get to the sign up forms page and then the embedded forms place so 93 00:07:49,990 --> 00:07:56,100 that we can look at the code that we need to bring straight into the Genesis E-News extended widget. 94 00:07:56,470 --> 00:07:59,930 And it just the classic tab in embedded forms here. 95 00:08:00,000 --> 00:08:06,850 I scroll down and as you remember we used this entire piece of code inside of our text widget to make 96 00:08:06,850 --> 00:08:14,530 that widget look like the sample here I have it open on my test site and this is what we looked at and 97 00:08:14,530 --> 00:08:18,400 built in the last video and it looks just like the MailChimp form. 98 00:08:18,400 --> 00:08:21,390 Now I go back into MailChimp. 99 00:08:21,480 --> 00:08:28,900 One thing to know is that you can't grab just a piece of this text you when you click in it it just 100 00:08:28,900 --> 00:08:29,860 grabs the whole thing. 101 00:08:29,860 --> 00:08:34,530 So I'm going to hit Control C and you know open up Notepad. 102 00:08:34,840 --> 00:08:36,810 Just any text editor will do. 103 00:08:36,820 --> 00:08:42,990 But I'm just going to paste that entire piece of code into my notepad document. 104 00:08:43,000 --> 00:08:44,850 Now if you look inside of the notepad document. 105 00:08:44,860 --> 00:08:47,310 I've got like we had looked at before. 106 00:08:47,320 --> 00:08:56,620 The styling is irrelevant to us and inside the MailChimp embed we're looking for the form action first. 107 00:08:56,620 --> 00:09:03,970 So here I can see the tag for a form action equals quote and what I to do is grab everything in between 108 00:09:04,210 --> 00:09:05,700 the quotations. 109 00:09:05,740 --> 00:09:11,660 It lasts all the way up until this end quote right here hit Control C and copy it. 110 00:09:11,750 --> 00:09:15,190 Or of course you can right click and click copy. 111 00:09:15,190 --> 00:09:21,790 Now I'm going to go back into my wordpress dashboard where I can see I'm looking for the form action 112 00:09:21,790 --> 00:09:27,050 code so I'll just hit right click and paste straight into there. 113 00:09:27,070 --> 00:09:31,980 Now I need some special code for the email field and the first name field. 114 00:09:32,290 --> 00:09:40,590 Again back in my notepad document I can see that the email field here we're looking for the name actually. 115 00:09:40,600 --> 00:09:47,590 And so if you know in MailChimp that it's in all caps and it has a certain name for first name last 116 00:09:47,590 --> 00:09:54,860 name email this one has e-mail in all caps let us copy that and paste it right in there. 117 00:09:55,150 --> 00:09:58,740 And again back to the notepad for first name. 118 00:09:58,750 --> 00:10:04,800 It is all caps f name and I am just copying that straight into there. 119 00:10:05,380 --> 00:10:12,160 And now there's no hidden fields inside of the code that MailChimp uses so we don't need to worry about 120 00:10:12,160 --> 00:10:13,030 that. 121 00:10:13,140 --> 00:10:18,140 And really that will activate our entire form and save and publish. 122 00:10:18,280 --> 00:10:23,080 And now this form will work for signing people up for that email list. 123 00:10:23,500 --> 00:10:29,470 Let's go back to our sample page and hit refresh in our tab look at our lives say here. 124 00:10:29,560 --> 00:10:31,630 Sign up for a newsletter that's 125 00:10:39,100 --> 00:10:40,620 ahead and sign up for it. 126 00:10:40,620 --> 00:10:40,910 Click. 127 00:10:40,910 --> 00:10:43,030 Get the download now. 128 00:10:43,100 --> 00:10:49,100 It opened up a tab that has a MailChimp sign up form right here and it tells me that there are errors. 129 00:10:49,110 --> 00:10:53,070 Well I've already joined the list and this happens to you. 130 00:10:53,070 --> 00:10:56,350 It's easy to go right back into MailChimp. 131 00:10:56,430 --> 00:11:02,430 You can go back up to the top where you can manage subscribers and let's view subscribers and I'm just 132 00:11:02,420 --> 00:11:06,300 going to remove remove myself from the list. 133 00:11:06,370 --> 00:11:10,360 I'll just check my box right there and this is how I joined it yesterday. 134 00:11:10,440 --> 00:11:11,440 Clicked delete. 135 00:11:11,670 --> 00:11:18,270 And of course you've got to confirm that you're going to do that you want to delete that subscriber. 136 00:11:18,450 --> 00:11:26,430 OK now that that subscribers deleted I can erase this tab right here and go back into my web site and 137 00:11:26,460 --> 00:11:29,230 let's sign up with that e-mail address again. 138 00:11:29,640 --> 00:11:33,330 So it's sent me to the thank you page that we had set up before. 139 00:11:33,360 --> 00:11:38,940 It's the same system and I'll get an e-mail I can confirm to join this list. 140 00:11:38,940 --> 00:11:39,980 Simple as that. 141 00:11:40,050 --> 00:11:46,690 You can see that using the Genesis E-News extended plug in makes your forms really easy to use. 142 00:11:47,700 --> 00:11:53,770 Now let's see what the Genesis E-News extended widget looks like in a different area of the Web site. 143 00:11:53,910 --> 00:11:59,260 Suppose we wanted to have a sign up form in the footer area on every page of the Web site. 144 00:11:59,490 --> 00:12:05,910 We go over here to footer one let's just see what it looks like to place a Genesis E-News extended widget 145 00:12:06,270 --> 00:12:07,510 inside the footer. 146 00:12:07,680 --> 00:12:14,340 OK we've got a blue area that matches our highlight color for the Web site and this footer area is going 147 00:12:14,340 --> 00:12:17,010 to appear on every page of the Web site. 148 00:12:17,430 --> 00:12:19,020 So here's a challenge for you. 149 00:12:19,020 --> 00:12:25,710 Enable the Genesis E-News extended widget inside the footer one widget area and populate it with the 150 00:12:25,710 --> 00:12:33,580 right code from your MailChimp account activating agenesis E-News extended form on the footer a video 151 00:12:33,590 --> 00:12:34,820 now and give it a go. 152 00:12:36,880 --> 00:12:39,020 That hopefully was super easy for you. 153 00:12:39,100 --> 00:12:44,080 Genesis and MailChimp both make things very easy to do without having you know any programming. 154 00:12:44,170 --> 00:12:50,350 Well now that I have the Genesis E-News extended widget inside the footer one widget area already I 155 00:12:50,350 --> 00:12:56,350 just have to go back to my MailChimp account and I'm going to go to sign up forms and embedded forms 156 00:12:56,530 --> 00:13:02,900 which I am right now take that same code and since I already have it open I don't have to repaste it 157 00:13:02,920 --> 00:13:05,600 but I've got it inside my notepad document here. 158 00:13:05,680 --> 00:13:11,930 I mean to take that form action code control C for copy. 159 00:13:12,140 --> 00:13:16,040 And now I'm going to place it in a form action field. 160 00:13:16,190 --> 00:13:25,820 I know that the name of the email field in MailChimp is always e-mail all caps and name in all caps 161 00:13:25,820 --> 00:13:27,690 for the first name field. 162 00:13:27,710 --> 00:13:30,470 When I leave the last name in the hidden fields empty. 163 00:13:30,620 --> 00:13:35,840 And then Heeres get the download. 164 00:13:36,530 --> 00:13:43,390 Oops I did that all the time. 165 00:13:43,540 --> 00:13:46,480 There we go. 166 00:13:47,130 --> 00:13:54,470 Look at that nice form that stretches the entire width and has a big nice call to action but button 167 00:13:54,470 --> 00:13:55,400 right there. 168 00:13:55,400 --> 00:14:01,420 And you can see that it styles the form differently depending on where it is on the website. 169 00:14:01,520 --> 00:14:08,240 This is the really nice thing about using Genesys E-News extended for optin forms wherever you put it 170 00:14:08,240 --> 00:14:11,740 on the page has already been styled for the theme. 171 00:14:11,750 --> 00:14:18,110 So if we changed the theme from parallax to Cafe pro or to executive pro or any of the themes we've 172 00:14:18,110 --> 00:14:24,470 been using within the Genesis framework all of these forms will change their colors and match no matter 173 00:14:24,470 --> 00:14:26,410 what changes we make in the background. 174 00:14:27,290 --> 00:14:31,080 One last thing to fix is just an empty form with no title or anything. 175 00:14:31,310 --> 00:14:38,480 I go back up I could see that I was using sign up for our newsletter and your e-mail will never be shared 176 00:14:38,840 --> 00:14:41,020 so I'm going to do that in the widget area. 177 00:14:41,020 --> 00:14:43,610 I'll use that widget title the same way. 178 00:14:43,610 --> 00:14:45,240 And then this. 179 00:14:45,350 --> 00:14:47,250 Your email will never be shared. 180 00:14:47,280 --> 00:14:54,290 Message place in the text to show before the form and see what that looks like at the footer that looks 181 00:14:54,290 --> 00:14:56,580 better now save and publish. 182 00:14:56,750 --> 00:15:03,080 And we're all done that should be a working form that I can use to sign up with MailChimp in this lesson. 183 00:15:03,080 --> 00:15:08,720 You set up a MailChimp opt in form in one of your students sandbox websites using the Genesis E-News 184 00:15:08,720 --> 00:15:15,200 extended plugin using this plugin lets us separate the style or the look and feel of the form from the 185 00:15:15,200 --> 00:15:17,420 content of the form itself. 186 00:15:17,420 --> 00:15:23,420 This makes the forms look good and match the theme in the next video will wrap up the chapter by exploring 187 00:15:23,420 --> 00:15:28,170 how we can synchronize user accounts in wordpress with an email list in MailChimp. 188 00:15:28,190 --> 00:15:31,760 This will come in handy as we build an e-commerce store in the next chapter. 189 00:15:31,760 --> 00:15:32,300 See there