How to Create a Sleek Mailchimp SignUp in Divi

hey everybody its Josh here in this tutorial I'm going to show you guys how to create a sleek little MailChimp email signup section for your Divi website what we're gonna do is we're gonna create essentially what I have on the front page of my site where the person has the ability to put the name email and click the submit button to get automatically added to my email list now a couple things I want to point out before we dive in I use MailChimp and that's what this tutorial is gonna be based off of but the same coding that we create in the same methods and practices we have you could probably use for me constant contact or something similar and then lastly before we dive in I do want to point out that elegant themes has a plug-in called bloom which is another really good way to capture emails you can do pop-ups and things like that but what we're gonna do in this tutorial is I'm going to show you what I use which is a free plugin for MailChimp and WordPress and it's just called MailChimp for WordPress it's what I've used for years it's highly highly rated it's great very user friendly you can customize it and it's very reliable so this is what we're gonna use now let's go ahead and dive right in so what I'm gonna do is in my test site here I've got a section right here where I'm saying hey join the cool Club and we want to put a sign up section right under this very similar to my site where we have name email signup so what you want to do first is you want to go ahead and download this plug-in it is free and I'll make sure you have the link to this so you want to download that and then once you have that activated or upload a near site you're gonna want to go ahead and activate it and when you do once you activate it you'll see automatically on your left toolbar it's gonna pop up and it's going to say MailChimp for WP you're gonna go ahead and click that and the first thing that you're going to do is you're going to want to integrate your API key so if you're not familiar with where to get that you can just click the API key you need to have a MailChimp account you need to be logged in and once you do you'll be able to go into extras API keys and it'll give you a key that you can put in right here so once you have your API key it's time to build the form so we're gonna go ahead and click into form and right now I don't have anything in here I think by default it has some fields in there but I'm gonna recommend you just wipe that clean and I'm going to show you how to build this and you can even take this code and just paste it in here and I'll show you exactly how or to do this so we're gonna start out by adding a first name for the field label we actually want to take the labels completely off because the labels are gonna add like you know first name on top or beside this an email address right here so we actually don't want any labels at all so we're gonna take that out placeholder is what's going to be in that field so we're gonna say just name we don't need to put anything in the value and we do want to make this a required field and we don't want to wrap this in any extra paragraph tags or any extra HTML code so we're gonna go ahead and add to form and you can see there we've got our first little field so that's looking good now we want to go ahead and add an email address again we don't want the field label we're gonna go ahead and put email in the placeholder that's obviously required because it needs an email and we don't want to wrap that in paragraph tags and then finally let's add another space and we want to add a submit button instead of subscribe let's say get the goods or something like that and we don't want to wrap that in tags and there we go so we've got our form bill and I'm gonna walk you through what all these little things mean and more importantly how to style this so let's go ahead and save changes and you're gonna notice that once this is saved at the bottom here says use this shortcode this shortcode is where we're going to put this in the site so if I back out to my front page we want to put this shortcode right here so we're gonna go ahead and use the visual builder let's scroll down and I'm using a text module right here what you could use what we're gonna do is we're gonna duplicate this just so I can give this module its own spacing and everything so you can see right here that text I'm just going to replace this I'm gonna make sure this is in the text view and not the visual you could also use the code module for this but for this example we're just gonna stick with that we're gonna save that and now once that's saved let's go ahead and back out okay and you can see that indeed there is the contact form it doesn't look great right now but that's where we're gonna add some fun CSS styling and we're gonna really bring this thing to life so what I'm gonna do is I'm going to bounce over here to my stylesheet and a lot of you have asked for a tutorial on how I do this my next tutorial I promise is going to be how I edit my stylesheet directly so just keep an eye out for that's gonna be very soon but I've got some code saved okay we're gonna paste the code okay so it's pasted in there now you're gonna see quite a bit of code and the reason I pasted this all in there together is I'm gonna walk you through how to customize this so we don't have to do everything from scratch we don't want this to be in our tutorial so let me go ahead and save that now let me show you what this looks like before i refresh this because the new styles are gonna come into place you can see that i just right-clicked inspect elements since I'm using Chrome like I always do in all my tutorials you can see here that in this little section it's got a class of this MC 4 WP dash form fields and you can see all these in here essentially what I've done in the code is you can see each one of these fields has this form class ahead of it so it knows all of these fields are going to adjust each one of these classes now one more thing I want to show you is that in the actual code for the form it has a type this type right here where it says text email submit that is what's going to be in each one of these fields so you can see it's calling that MailChimp signup form it's the input field and you can see right here this is the text field this is the email field this is the submit field and I'm going to show you how to adjust the hover over so with this saved and with that save let's go ahead and back out here let's refresh our site and we should see a completely nice different look and there we go so what I'm gonna do is I'm going to show you how to edit this yourself so again we've got the name field the email field and the submit this is pulling this code that I have saved right here so if I wanted to test this out and say background color black instead of white what that's gonna do is change the background color on this name field which happens to be our text field so check this out we're gonna go ahead and refresh and there we go not a great look but just wanted to show you what I meant there so let's go ahead and can command Z and go back there so this is essentially how we're gonna set up this main field now again what you're gonna do is you're gonna actually go in and you can tweak this yourself I have this set to where you could adjust this but let's say we want to change the color on the submit button let's go ahead and refresh here okay so it's looking good let's say instead of that green we want to do maybe a yellow again I just right click and inspected that element you can see that there's a nice background color on it I'm just gonna choose a different color you know if we wanted to do maybe a lighter green or or like a pretty vibrant yellow you could do that right here but again you can basically just go in here and tweak the color that I have in the settings that I have now one thing I do want to point out is that each one of these very importantly has a width to it so let's go ahead and look at the name field here you're gonna notice that this has a current width that I put in there of 32% this whole section is based off a hundred percent to where it's going to extend to left to right so each one of these fields is floating left right here and it has a width right now 32% if I bump that up you can see it messes things up a little bit so we're gonna keep that down to 32 percent and if I look at the email field I think this one's at 31 if I remember correct or no it's actually a 33 okay so you can see if I bump that down a little bit that would still work that looks pretty good but the way this works the way I have this style is each one of these has a very close with to make sure that it doesn't get bumped off the ledge and then the signup button here is gonna have a width of 31 if I extend that out too far you know 32 might work but 33 is gonna bump it off so you can see right there so do you wanting to do I'm actually gonna go into my style sheet and we're gonna make that 32 in the submit button instead of that now one thing that I've done would the hover over state and I apologize I've got that vibrant yellow instead of the nice green I had there oh you can actually see that 32 did bump it so let's go back and change this back to 32 I'm sorry instead of 33 now we've got those widths set that should look much much better okay cool cool now so that looks good again all you guys have to do is take the code that I've set for you and you can adjust things you can go in and just the padding and if you want to add colors or add effects you're more than welcome to again this is the name field this is the email field this is the signup button and this is the hover over right now we've got a hover over of that dark purple the same purple that I have in the header but you could change that and make it your own so what we want to do here is course it's looking good on desktop but I know what you're gonna say what about mobile you can see once we scroll in here things get a little janky around right here so don't worry I've got some more code saved I'm gonna show you what we're gonna do here okay so with this code I'm gonna go ahead and paste this in here what I'm gonna do is I'm giving this a scary media query which is basically telling this form to change size in the width department once it hits 980 so let's go ahead and save this and I'll show you what this looks like okay so once I have that code in there and it's saved again it looks good on desktop but what we're gonna do is we're gonna see that once we get to 980 and actually let me go ahead and inspect element and so you can see the pixels up at the top right once we scroll this in and we get to 980 those widths are gonna change just a little bit there we go so once we hit 90 you can see that looks much better and the way I did that is if I go into my code you can see that instead the width being 33 % 32% it's at 49 50 and the submit button is at 100 so I can go ahead and inspect element I can look here I can see okay there's 49 if I were to bump this up a little bit it's gonna break it so I've got these set out pretty strategically for you and what I have is a margin here so I can adjust the margin right if it's too much again it's gonna bump it so I have that set pretty much to where it looks good and flush now the last thing that we want to check is let me go ahead and back out here and I'm gonna click into the mobile view so on mobile here's the final issue is that it's that code looks good on tablet but not on mobile so what I want to do let's go into our code here and let's go ahead and copy this whole section and what we're gonna do is we're gonna change 980 to 479 which is mobile and I'm gonna say that I want all of these to go a hundred percent and I don't want any margin on the right so we're gonna go ahead and copy the code from there paste it and the name email and the submit but so now that that's all pasted there we're gonna go ahead and save let's back out here clear our cache okay and now looks great on desktop let's go ahead and inspect element and we're gonna pull the mobile view so now when we scroll down it should look nice on mobile and there we go guys now there's one thing I notice here because it looks good the wit looks good there the one thing that we want to do is on this top form you can see this looks pretty good here but we do want to add maybe a margin on the bottom so we're gonna say margin bottom to give that some space let's try 10 pixels there we go that looks perfect so we're gonna go ahead and copy that we're gonna put that in the text field and we'll be able to save that and then look good for mobile so that's it guys you're going to be able to take the code that I have saved here for you and you're just gonna adjust it and again each one of these little labels just corresponds with this little type right here text email submit and you can even change things in here you can go in and you can change the set of get the goods you could say sign up now if we go ahead and go out here and we go ahead and refresh it should say sign up instead of get the goods very cool easy-peasy guys so again you can adjust this and make it your own last thing I do want to show you because this was specifically requested is let's say you want to put this in a sidebar on my site here if you go to one of my posts you're gonna see a lot of sidebar action and my signup form right here is the most prevalent thing so we're gonna take this same concept here but we want to put this in a sidebar so let's go ahead and go back here I'm gonna go to my appearance widgets and I think I've actually already got this in there yeah so what you're gonna see here let me delete this so you can see it from the start is when you go to your widgets with this plugin it's gonna give you an option right here so you can just drag this into your sidebar and let's go ahead and take everything out of here so we just see this so I'm gonna say newsletter and let's call this email signup signup and we're gonna save that now let's go back out to our site and let's do a test post so we have a sidebar so I'm going to call this I'm just gonna call this test blog we're gonna say tests I'm not gonna worry about using the Divi Builder for this we're just gonna say test and we can see that the page layout does in fact have sidebar right there we're gonna go ahead and just preview this for right now okay and you can see that this looks really really janky let me show you what we're gonna do to clean this up let's go ahead and right click inspect element like usual now you're going to notice that it has the same fields here the same you know CSS classes and everything but it has one more thing that we can adjust and make better you're gonna notice that the sidebar has an ID of sidebar so all we have to do is add this ID before the CSS and then we can change the code to whatever we want so right off the bat I know that I don't want this 32% there this is calling the main code I want to make this 100% and that's gonna look much better and I also know that it's kind of hard to see since the background is white so I want to try changing the background color maybe from white to yeah maybe just like a light gray right there so here's what I'm gonna do I'm gonna go into my stylesheet I'm gonna pull the name field the email field and the submit button and I'm gonna copy all that code and I'm gonna put it before the media queries and here's where it gets really fun I'm actually gonna let myself know that this is the mail I'm gonna say this is the sidebar MailChimp signup and all I have to do is add this little sidebar class in front of these elements so I'm gonna give this a an ID and sexily not a class I'm sorry an ID so it's gonna be a pound sign sidebar and we're gonna add this in the front of the email and in front of the signup and in front of the hover over state you know what and actually the hover over state's gonna be the same something I'm gonna worry about that I'm gonna go ahead and save that now what did I say I wanted to make that what was that like an f1 to color yeah so we're gonna take this f1 color and all I'm gonna change here since all of this code knows it's already gonna be there we're just gonna worry about changing the background color and the width I'm gonna change the background color to that and we want the width to be 100% I'm do the same thing for the email because I know I'm gonna want that field to look the same and right off the bat I know that the submit button needs to be a width of a hundred percent as well that way it looks good in the sidebar so let's go ahead and save all that let's go back out here and refresh and see what this looks like and there we go guys the and the last thing I'm probably going to do is to add some maybe margins on the bottom of these cell let's do inspect element again and let's just give this a margin bottom say 10 pixels that worked pretty good very very cool let's go ahead and take that code and drop it in here in the text field and we're probably gonna want to do the same thing on the email field let's try adding margin bottom yep looks beautiful on the sidebar so we're gonna go ahead and put that in the email field Save and there we go guys that is it so now when I go back out let me look at the front page and we'll keep this page open since I put that ID in there that sidebar ID it shouldn't have adjusted the front page signup section there we go it looks perfect so this is gonna look good it's gonna look good desktop tablet and mobile right there open there's a little section right there I just noticed that jump a little bit so what we might want to do is you could just go into that media query and I tell you what I'll just show you I'm not gonna leave you guys hanging let's look at this here let's go down we're gonna go to right here is where it got a little weird so let's look at the width at 560 got a little weird yeah 560 so instead of 479 let's do 560 save let's back out here okay now let's go ahead and refresh the cache okay and now that that's saved we're gonna say that looks good on desktop it's going to look good on tablet and if we go in here it's gonna look good on mobile as well let's go ahead and look at the mobile view and there we go so it looks good on mobile desktop and tablet and then it also is going to look good on the sidebar so that's it guys I know kind of an extensive tutorial but again I just wanted to have this code saved for you that you guys could tweak it and make it your own all you do is set up the form here and your MailChimp section and you can use the CSS code that I provided to style it and make your own so guys enjoy creating an awesome email signup section very similar to what I have in my front page on my site if you guys have any questions let me know otherwise enjoy and have some fun [Music]

Channel: Josh Hall

Views: 20,901

Keywords: Divi, Elegant Themes, Josh Hall

Id: 5u6R3gLlqyw

Length: 18min 18sec (1098 seconds)

Published: Tue Nov 07 2017