How to Create a Sleek Mailchimp SignUp in Divi

by | Nov 7, 2017 | Divi Tutorial | 27 comments

Welcome to the FINAL post in my Tutorial Tuesday series! Every Tuesday for past 12 weeks, I’ve dished out video tutorials for my top requested questions on Design, Layouts or Tricks with WordPress and 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!

Here’s the code for the Mailchimp form:


<input type="text" name="FNAME" placeholder="Name" required="">

<input type="email" name="EMAIL" placeholder="Email" required="">

<input type="submit" value="Sign Up!">

Here’s the CSS I used:


/*----------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;
}
}