In this video you'll revisit one of your students sandbox sites at W.P. deaf course dot com and set
up a MailChimp subscribe form within agenesis environment.
The Genesis framework again comes through with clean coding and beautiful styling for MailChimp forms
using the Genesis E-News extended plugin.
The plugin is free in the repository but must be used with the premium Genesys framework.
By the end of this lesson you will once again see how using a premium tool can make the process of setting
up systems easy.
This time with an opt in form from MailChimp and the Genesis framework remember this website.
It's our original student's sandbox site made on the parallax pro theme from Genesis.
The only thing we really changed here was the background image on the first home page widget area and
we replaced the lettering with a logo image up here at the left hand side.
Now let's add agenesis E-News extended plug in and a MailChimp for you remember how to get there.
Go back to I have this Resources page open still at students that WP of course dot com and I clicked
the loggin button this time clicking open a new tab.
So this page opened up and I was able to log in using the Wordpress log in form.
Then I went up to my sites and opened the parallax pro-side dashboard.
Now over here in plugins I'm going to be looking for the Genesis E-News extended plugin.
I'll just click activate make sure that plugin is activated and now it gives me a widget under appearance
widgets that I can use.
Now I also have the demo site open on the right hand side.
You can get there by going to demo dat studio press dot com slash parallax.
Then I went up an under sample opened page layouts and I'm looking at the content sidebar page layout
right here.
I'd like to put an E-News extended widget up here in the sidebar to show what are MailChimp form will
look like when it's styled through Genesis.
If you remember back in our parallax pro website that we made we go back to a sample page.
You'll remember that we played with the pull images in the single page layout.
Now here's a challenge for you.
Go back and tear parallax dashboard and change the default layout from a single column to a content
slash sidebar layout like the demo puzzle video now and give it a try.
Here's the way to do it.
Site wide.
I'll go up into Genesis and theme settings and if you scroll a little bit down there's a visual representation
of the three layouts that come with the theme and I'm going to select this one on the left and scroll
down and hit save changes.
That's all there is to it.
Now let's go back to our site tab and our sample page and refresh and see what we have.
All right I've got a primary sidebar widget area over here that's not got any content in it because
this is the sample content that comes with the theme.
When you have an empty widget area.
So let's go back into the Wordpress dashboard and under appearance.
Let's open the customized.
Great now that that's open all open widgets.
Now why don't I have that primary sidebar widget that I'm looking for over here.
Well it's because I'm on the home page of the site and that widget area doesn't exist on the home page
template.
So if I go into a sample page inside of the Web site here you can see that my widgets that I can customize
are different over here on the left hand side.
So now I have the primary sidebar widget here I can click Add a widget and go ahead and click the Genesis
E-News extended widget and we'll see what we can customize inside of this Genesys widget.
Now I mentioned in the introduction Well the Genesis E-News extended plug in is free and the Wordpress
repository it does need the Genesis framework in the background to work.
And so let's see what customizations we can make even without grabbing any code from MailChimp yet let's
just make a title
sign up for our newsletter and you can place some text before the form and then some text after the
form.
And the great thing about this is that this text is going to be styled to fit the fonts and headings
and anything you can put in a text widget you can put here so you could even put each DML code say a
button or something like that but let's just leave it like that.
I'll often just put the form here and not use this before and after text as we go back down.
There's a Google slash feed burner ID.
If you're using these specific customisations for building your list you can use those IDs there.
But here's where the meat of it is.
We've got a form action and then email first name last name and hidden fields.
It says not all services use hidden fields.
The Genesis E-News extended plug in is designed to work with any bulk mail or marketing email program.
It works really well with MailChimp and that's why we're using it right here.
It's just designed to work very well with Genesys child themes and you have a few more things you can
select if you want to change the input text for first name last name or email address.
Or we can do is put some links in here just to see what will happen and what it will look like when
there's actually a link.
So I'm just going to use the hashtag and go first name not last name and email.
So if we have first name and email address you can see that it's already making the form look quite
good it matches our style it has the color that we have defined.
And if we change that color site wide within the Genesis theme settings that will change in the form
as well.
So that's the benefit of using a plugin like this instead of just pasting the embed text from MailChimp
I'm going to change the button text to say join with an exclamation point.
And now I'm just going to go up and take out this after text and before text.
In fact what I'll do is just make an assurance right here with the before text that says
just a comfort message for the user that says if they join We're never going to share their email and
you could also say that you're going to get some kind of a download here.
In fact that might even be better.
Cut and paste it into my button text instead because really why they're joining the list might be just
to get the download here.
So I go up here and take a look.
Let's just save and publish that for now.
Now of course this isn't an active forum because I don't have the proper code from MailChimp placed
inside these fields yet.
Let's go back to MailChimp.
Now I'm still logged in under my list that I was working with in the last video.
So open MailChimp and log in and get to the sign up forms page and then the embedded forms place so
that we can look at the code that we need to bring straight into the Genesis E-News extended widget.
And it just the classic tab in embedded forms here.
I scroll down and as you remember we used this entire piece of code inside of our text widget to make
that widget look like the sample here I have it open on my test site and this is what we looked at and
built in the last video and it looks just like the MailChimp form.
Now I go back into MailChimp.
One thing to know is that you can't grab just a piece of this text you when you click in it it just
grabs the whole thing.
So I'm going to hit Control C and you know open up Notepad.
Just any text editor will do.
But I'm just going to paste that entire piece of code into my notepad document.
Now if you look inside of the notepad document.
I've got like we had looked at before.
The styling is irrelevant to us and inside the MailChimp embed we're looking for the form action first.
So here I can see the tag for a form action equals quote and what I to do is grab everything in between
the quotations.
It lasts all the way up until this end quote right here hit Control C and copy it.
Or of course you can right click and click copy.
Now I'm going to go back into my wordpress dashboard where I can see I'm looking for the form action
code so I'll just hit right click and paste straight into there.
Now I need some special code for the email field and the first name field.
Again back in my notepad document I can see that the email field here we're looking for the name actually.
And so if you know in MailChimp that it's in all caps and it has a certain name for first name last
name email this one has e-mail in all caps let us copy that and paste it right in there.
And again back to the notepad for first name.
It is all caps f name and I am just copying that straight into there.
And now there's no hidden fields inside of the code that MailChimp uses so we don't need to worry about
that.
And really that will activate our entire form and save and publish.
And now this form will work for signing people up for that email list.
Let's go back to our sample page and hit refresh in our tab look at our lives say here.
Sign up for a newsletter that's
ahead and sign up for it.
Click.
Get the download now.
It opened up a tab that has a MailChimp sign up form right here and it tells me that there are errors.
Well I've already joined the list and this happens to you.
It's easy to go right back into MailChimp.
You can go back up to the top where you can manage subscribers and let's view subscribers and I'm just
going to remove remove myself from the list.
I'll just check my box right there and this is how I joined it yesterday.
Clicked delete.
And of course you've got to confirm that you're going to do that you want to delete that subscriber.
OK now that that subscribers deleted I can erase this tab right here and go back into my web site and
let's sign up with that e-mail address again.
So it's sent me to the thank you page that we had set up before.
It's the same system and I'll get an e-mail I can confirm to join this list.
Simple as that.
You can see that using the Genesis E-News extended plug in makes your forms really easy to use.
Now let's see what the Genesis E-News extended widget looks like in a different area of the Web site.
Suppose we wanted to have a sign up form in the footer area on every page of the Web site.
We go over here to footer one let's just see what it looks like to place a Genesis E-News extended widget
inside the footer.
OK we've got a blue area that matches our highlight color for the Web site and this footer area is going
to appear on every page of the Web site.
So here's a challenge for you.
Enable the Genesis E-News extended widget inside the footer one widget area and populate it with the
right code from your MailChimp account activating agenesis E-News extended form on the footer a video
now and give it a go.
That hopefully was super easy for you.
Genesis and MailChimp both make things very easy to do without having you know any programming.
Well now that I have the Genesis E-News extended widget inside the footer one widget area already I
just have to go back to my MailChimp account and I'm going to go to sign up forms and embedded forms
which I am right now take that same code and since I already have it open I don't have to repaste it
but I've got it inside my notepad document here.
I mean to take that form action code control C for copy.
And now I'm going to place it in a form action field.
I know that the name of the email field in MailChimp is always e-mail all caps and name in all caps
for the first name field.
When I leave the last name in the hidden fields empty.
And then Heeres get the download.
Oops I did that all the time.
There we go.
Look at that nice form that stretches the entire width and has a big nice call to action but button
right there.
And you can see that it styles the form differently depending on where it is on the website.
This is the really nice thing about using Genesys E-News extended for optin forms wherever you put it
on the page has already been styled for the theme.
So if we changed the theme from parallax to Cafe pro or to executive pro or any of the themes we've
been using within the Genesis framework all of these forms will change their colors and match no matter
what changes we make in the background.
One last thing to fix is just an empty form with no title or anything.
I go back up I could see that I was using sign up for our newsletter and your e-mail will never be shared
so I'm going to do that in the widget area.
I'll use that widget title the same way.
And then this.
Your email will never be shared.
Message place in the text to show before the form and see what that looks like at the footer that looks
better now save and publish.
And we're all done that should be a working form that I can use to sign up with MailChimp in this lesson.
You set up a MailChimp opt in form in one of your students sandbox websites using the Genesis E-News
extended plugin using this plugin lets us separate the style or the look and feel of the form from the
content of the form itself.
This makes the forms look good and match the theme in the next video will wrap up the chapter by exploring
how we can synchronize user accounts in wordpress with an email list in MailChimp.
This will come in handy as we build an e-commerce store in the next chapter.
See there