How to Create a Sleek Mailchimp SignUp in Divi
This tutorial walks you through “How to Create a Sleek Mailchimp SignUp in Divi” This is based off the email sign up section in my homepage and has been one of the most highly requested tutorials that I’ve received. I do want to mention that Elegant Themes offers Bloom, a great way to capture emails and newsletter sign ups but this tutorial is going to use Mailchimp for WP which is a free, customizable, user-friendly and reliable plugin that I’ve been using for years.
In this tutorial, I show you how to set up and style a sleek Mailchimp signup form for desktop, tablet, mobile AND sidebar. WIth a little bit of CSS magic, you can really customize this to suite your site/style and is a great way to present a nice email signup form! I did make some minor adjustments to the CSS after what was shown in the video. Instead of the mobile version changing widths at 560px, it changes at 623px and I cleaned up some other areas in the code. Enjoy and have some fun!
<input type="text" name="FNAME" placeholder="Name" required=""> <input type="email" name="EMAIL" placeholder="Email" required=""> <input type="submit" value="Sign Up!">
/*----------Mailchimp SignUp----------*/
.mc4wp-form input[type=text] {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
box-shadow: inset 0 1px 15px rgba(0, 0, 0, 0);
box-shadow: inset 0 1px 15px rgba(0, 0, 0, 0);
box-shadow: inset 0 1px 15px rgba(0, 0, 0, 0);
float: left;
padding: 15px;
background: white;
border: 0px;
margin-right: 12px;
font-size: 15px;
width: 32%!important;
}
.mc4wp-form input[type=email] {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
box-shadow: inset 0 1px 15px rgba(0, 0, 0, 0);
box-shadow: inset 0 1px 15px rgba(0, 0, 0, 0);
box-shadow: inset 0 1px 15px rgba(0, 0, 0, 0);
float: left;
padding: 15px;
background: white;
border: 0px;
margin-right: 12px;
font-size: 15px;
width: 32%!important;
}
.mc4wp-form input[type=submit] {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
float: left;
color: #fff!important;
background-color: #34c31c!important;
border: 0px;
font-size: 15px;
text-transform: uppercase;
font-weight: bold;
padding: 15px;
border: 0px;
width: 30%!important;
}
.mc4wp-form input[type=submit]:hover {
background-color: #3d007f!important;
color: white!important;
cursor: pointer;
}
/*----------Sidebar Mailchimp SignUp----------*/
#sidebar .mc4wp-form input[type=text] {
background: #f1f1f1;
width: 100%!important;
margin-bottom: 10px;
}
#sidebar .mc4wp-form input[type=email] {
background: #f1f1f1;
width: 100%!important;
margin-bottom: 10px;
}
#sidebar .mc4wp-form input[type=submit] {
width: 100%!important;
}
/*----------Mailchimp SignUp Tablet Settings----------*/
@media only screen and (max-width: 980px) {
.mc4wp-form input[type=text] {
width: 49%!important;
margin-right: 5px;
}
.mc4wp-form input[type=email] {
width: 50%!important;
margin-right: 0px;
}
.mc4wp-form input[type=submit] {
width: 100%!important;
margin-top: 10px;
}
}
/*----------Mailchimp SignUp Mobile Settings----------*/
@media only screen and (max-width: 623px) {
.mc4wp-form input[type=text] {
width: 100%!important;
margin-right: 0px;
margin-bottom: 10px;
}
.mc4wp-form input[type=email] {
width: 100%!important;
margin-right: 0px;
}
.mc4wp-form input[type=submit] {
width: 100%!important;
margin-right: 0px;
margin-top: 10px;
}
}
Are you ready to BUILD and GROW your web design business?
I've created a FREE 10-STEP ACTION PLAN to help you fast-track your web design success.
What an awesome tutorial! Thank you! Sharing for sure!
Question, is there an easy tweak that could make a slim version show up at the top of the page like a bar?
Thanks, Ed! I’ve never tried that but I imagine you could throw the shortcode in the header.php file in the top header area and just tweak the padding, margins, etc!
Thanks, Josh.
I paste the css in my child theme stylesheet and I didn’t see any result. Even did the same on the theme stylesheet, the same thing. Please, what can I do?
As long as you’re using the plugin and following the steps in the tutorial and using the same CSS in your stylesheet it should work!
Thanks for sharing Josh – I had been looking for something like this. Thanks for making this tutorial video.
Awesome to hear, Jake. No problem!
Nice tutorial Josh,
You should edit the CSS code in this article because they’ve changed the field’s class name:
.mc4wp-form is now â–º .mc4wp-form-fields
Keep up your good work.
Thanks! The fields actually still show as .mc4wp-form on all the sites I’m using it on and the plugin is up-to-date so maybe that’s an alternative class or something…
Hi Josh,
What Herve says is correct. In my case the css didn’t work until I adjusted the class name from form to form-fields.
Another issue I have is if I modify the css slightly ( field width %’s for example) the form goes back to looking like it did without the css. What am I doing wrong?
Not sure, Rodrigo. I’m not sure that anything has changed with the form ID’s as it still works fine on my site and the tutorial is based off of what I have…
Hey Josh, love your work! I am wondering if you have a tutorial on your posts layout? and your workflow for creating posts in Divi… Do you have a Global template? for your layouts. Im relatively new to Divi.
Thanks, Murray! I don’t have any tutorials on the posts directly (though I do mention it briefly in the Inspect Element Tutorial) but it’s mainly just adding and messing around with custom CSS settings. As far as the workflow, it’s all dependent on what kind of post it is. I will look into that though! Yes I do save my templates (Video Tutorial, Blog Post, etc) to make them easier and quicker to add.
Thanks! Was able to get the subscribe line just how I wanted. Do you have any follow-up posts about customizing the thank you/confirmation page for this form?
Awesome. I usually just redirect to a basic Thank You page with the Divi Builder.
Oh! Thank you! This was just what I was looking for. So grateful.
Awesome! Glad it helped 🙂 Thanks for the feedback Judith.
Hi Josh,
So happy to have found this, thanks!
One question: I added a checkbox “agree to terms” and I would like to make that a smaller fontsize. What css should I add and where? I need to get this GDPR-compliant :-).
Can you provide a link, Saskia? You should be able to target the text in that box and adjust the CSS in that. Feel free to refer back to my inspect element tutorial if you’re not familiar!
This is great Josh! I pasted into my css and it worked, on everything except the button! Any ideas?
Actually, just figured it out. Thanks!
Sorry for all the comments… Is there any way to just inherit the style of the Divi Button from the theme customizer?
Josh – why would you use the plugin over mailchimp form builder?
At the time of recording this tutorial, their form builder was very limited to I’ll have to check it out now to see if it’s a better solution. If so I’ll make note of that here.
Hiya,
First all, thank you! Super tutorial!
Can I ask how you inserted your image next to your form. Love the look of the band behind it!
Linsey I’ll do you one better, it’s available as a free download for you! https://joshhall.co/product/free-image-overlap-page-layout
Hey Josh, thanks for that tutorial man, it helped me a lot!… I styled the form to my desire but is there a way to also customize the success / Error message. thanks again!!
Awesome! You can customize all that in the form settings via the plugin options!