Responsive MailChimp Signup Gravity Form

The Slocum team is happy to announce a new feature across our latest set of premium WordPress themes.

One of our favorite contact form plugins is Gravity Forms and leveraging it’s easy to use MailChimp add-on. Since MailChimp is our favorite e-mail newsletter publishing platform we decided to bake in support for both in our themes.

It’s important that your call to actions are clear, concise, and not lost in the mix of things.

Keep reading to see how we style responsive MailChimp Signup Gravity forms!

What does it look like?

Here’s a working demo of using our Mailchimp + Gravity Forms styling in-line to your content:

The only WordPress newsletter you need

Join 1000's of fans and customers just like you. Always awesome and never spam.

  • This field is for validation purposes and should be left unchanged.

mailchimp gravityforms slocum themes

The headline

This is the form title of your MailChimp Gravity form. You can change this in Forms > (the form name) > form settings > apply the name/headline you want to use.

The tagline

This is the form description of your MailChimp Gravity form. You can change this in Forms > (the form name) > form settings > apply the description you want to use.

E-mail field

You have to create the e-mail field in your gravity forms. Currently this is the only field we support in this style. You can’t have more than one field out of the box, unless you want to dive into the CSS yourself. Note: We support Gravity Forms styles out of the box if you’re making a regular form, just not in this instance. 

Applying the style

Once your form is ready to go, navigate to your form settings again and place this CSS Class Name in the CSS Class Name field: mc-gravity

That’s it! Our CSS takes care of the rest to make this sweet newsletter signup call to action.

Placing your MailChimp Gravity Form

In the content

As you can see in the example above, you’re free to add this form right in your post or page content. This is great for ending a unique page with your newsletter signup form or embedding the signup throughout a long form blog post.

gravitymailchimp

After Post Widget Area

If you’re using one of our recent themes like Epic, Minimize, Socialize or Modern Estate you can add a gravity forms widget to the After Post sidebar.

Get to the source

Here’s the CSS straight from the theme:

/* ----------
   Newsletter
 ------------ */
.mc-gravity, .mc_gravity, .mc-newsletter, .mc_newsletter,
.mc-gravity_wrapper, .mc_gravity_wrapper, .mc-newsletter_wrapper, .mc_newsletter_wrapper {
	width: 100%;
	max-width: 100% !important;
	border: 1px solid #ddd;
}

form.mc-gravity, form.mc_gravity, form.mc-newsletter, form.mc_newsletter {
	padding-bottom: 1em;
	border: none;
}

.mc-gravity:before, .mc_gravity:before, .mc-newsletter:before, .mc_newsletter:before,
.mc-gravity_wrapper:before, .mc_gravity_wrapper:before, .mc-newsletter_wrapper:before, .mc_newsletter_wrapper:before,
.mc-gravity:after, .mc_gravity:after, .mc-newsletter:after, .mc_newsletter:after,
.mc-gravity_wrapper:after, .mc_gravity_wrapper:after, .mc-newsletter_wrapper:after, .mc_newsletter_wrapper:after {
    content: " ";
    display: table;
}

.mc-gravity:after, .mc_gravity:after, .mc-newsletter:after, .mc_newsletter:after,
.mc-gravity_wrapper:after, .mc_gravity_wrapper:after, .mc-newsletter_wrapper:after, .mc_newsletter_wrapper:after {
    clear: both;
}

.mc-gravity .gform_heading, .mc_gravity .gform_heading, .mc-newsletter .gform_heading, .mc_newsletter .gform_heading,
.mc-gravity_wrapper .gform_heading, .mc_gravity_wrapper .gform_heading, .mc-newsletter_wrapper .gform_heading, .mc_newsletter_wrapper .gform_heading {
	width: 98%;
	margin: 0;
	padding: 2%;
	background: #7db2c2;
	color: #fff;
	font-size: 24px;
	text-align: center;
	text-transform: uppercase;
}

.mc-gravity .gform_heading h3.gform_title, .mc_gravity .gform_heading h3.gform_title,
.mc-newsletter .gform_heading h3.gform_title, .mc_newsletter .gform_heading h3.gform_title,
.mc-gravity_wrapper .gform_heading h3.gform_title, .mc_gravity_wrapper .gform_heading h3.gform_title,
.mc-newsletter_wrapper .gform_heading h3.gform_title, .mc_newsletter_wrapper .gform_heading h3.gform_title {
	margin: 0 0 15px;
}

.mc-gravity .gform_heading span.gform_description, .mc_gravity .gform_heading span.gform_description,
.mc-newsletter .gform_heading span.gform_description, .mc_newsletter .gform_heading span.gform_description,
.mc-gravity_wrapper .gform_heading span.gform_description, .mc_gravity_wrapper .gform_heading span.gform_description,
.mc-newsletter_wrapper .gform_heading span.gform_description, .mc_newsletter_wrapper .gform_heading span.gform_description {
	font-size: 16px;
	text-transform: none;
	display: block;
}

.mc-gravity .gform_heading, .mc_gravity .gform_heading,
.mc-newsletter .gform_heading, .mc_newsletter .gform_heading,
.mc-gravity_wrapper .gform_heading, .mc_gravity_wrapper .gform_heading,
.mc-newsletter_wrapper .gform_heading, .mc_newsletter_wrapper .gform_heading {
	width: 96% !important;
	margin: 0;
	margin-bottom: 1.25em !important;
	padding: 2%;
}

.mc-gravity .gform_body, .mc_gravity .gform_body,
.mc-newsletter .gform_body, .mc_newsletter .gform_body,
.mc-gravity_wrapper .gform_body, .mc_gravity_wrapper .gform_body,
.mc-newsletter_wrapper .gform_body, .mc_newsletter_wrapper .gform_body {
	width: 40%;
	margin: 0 0 0 20%;
	padding: 0;
	float: left;
}

.mc-gravity  .gfield_label, .mc_gravity  .gfield_label,
.mc-newsletter  .gfield_label, .mc_newsletter  .gfield_label,
.mc-gravity_wrapper  .gfield_label, .mc_gravity_wrapper  .gfield_label,
.mc-newsletter_wrapper  .gfield_label, .mc_newsletter_wrapper  .gfield_label {
	margin: 0 !important;
	display: none !important;
}

.mc-gravity  form li, .mc_gravity  form li,
.mc-newsletter  form li, .mc_newsletter  form li,
.mc-gravity_wrapper  form li, .mc_gravity_wrapper  form li,
.mc-newsletter_wrapper  form li, .mc_newsletter_wrapper  form li {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mc-gravity .gform_fields input, .mc_gravity .gform_fields input,
.mc-newsletter .gform_fields input, .mc_newsletter .gform_fields input,
.mc-gravity_wrapper .gform_fields input, .mc_gravity_wrapper .gform_fields input,
.mc-newsletter_wrapper .gform_fields input, .mc_newsletter_wrapper .gform_fields input {
	width: 90% !important;
	margin-left: -2px;
	font-size: 16px !important;
	padding: 14px 5% !important;
	border-radius: 0 !important;
}

.mc-gravity .gform_fields .gfield_error input, .mc_gravity .gform_fields .gfield_error input,
.mc-newsletter .gform_fields .gfield_error input, .mc_newsletter .gform_fields .gfield_error input,
.mc-gravity_wrapper .gform_fields .gfield_error input, .mc_gravity_wrapper .gform_fields .gfield_error input,
.mc-newsletter_wrapper .gform_fields .gfield_error input, .mc_newsletter_wrapper .gform_fields .gfield_error input {
	background: #ffdfe0;
}

/* Placeholder color */
.mc-gravity .gform_fields input::-webkit-input-placeholder, .mc_gravity .gform_fields input::-webkit-input-placeholder,
.mc-newsletter .gform_fields input::-webkit-input-placeholder, .mc_newsletter .gform_fields input::-webkit-input-placeholder,
.mc-gravity_wrapper .gform_fields input::-webkit-input-placeholder, .mc_gravity_wrapper .gform_fields input::-webkit-input-placeholder,
.mc-newsletter_wrapper .gform_fields input::-webkit-input-placeholder, .mc_newsletter_wrapper .gform_fields input::-webkit-input-placeholder {
	color: #aaa;
}

.mc-gravity .gform_fields input::-moz-placeholder, .mc_gravity .gform_fields input::-moz-placeholder,
.mc-newsletter .gform_fields input::-moz-placeholder, .mc_newsletter .gform_fields input::-moz-placeholder,
.mc-gravity_wrapper .gform_fields input::-moz-placeholder, .mc_gravity_wrapper .gform_fields input::-moz-placeholder,
.mc-newsletter_wrapper .gform_fields input::-moz-placeholder, .mc_newsletter_wrapper .gform_fields input::-moz-placeholder {
	color: #aaa;
}

.mc-gravity .gform_fields input:-ms-input-placeholder, .mc_gravity .gform_fields input:-ms-input-placeholder,
.mc-newsletter .gform_fields input:-ms-input-placeholder, .mc_newsletter .gform_fields input:-ms-input-placeholder,
.mc-gravity_wrapper .gform_fields input:-ms-input-placeholder, .mc_gravity_wrapper .gform_fields input:-ms-input-placeholder,
.mc-newsletter_wrapper .gform_fields input:-ms-input-placeholder, .mc_newsletter_wrapper .gform_fields input:-ms-input-placeholder {
	color: #aaa;
}

.mc-gravity div.validation_error, .mc_gravity div.validation_error,
.mc-newsletter div.validation_error, .mc_newsletter div.validation_error,
.mc-gravity_wrapper div.validation_error, .mc_gravity_wrapper div.validation_error,
.mc-newsletter_wrapper div.validation_error, .mc_newsletter_wrapper div.validation_error {
	padding: 0 20px !important;
	font-size: 16px !important;
	text-align: center;
}

.mc-gravity li.gfield.gfield_error.gfield_contains_required, .mc_gravity li.gfield.gfield_error.gfield_contains_required,
.mc-newsletter li.gfield.gfield_error.gfield_contains_required, .mc_newsletter li.gfield.gfield_error.gfield_contains_required,
.mc-gravity_wrapper li.gfield.gfield_error.gfield_contains_required, .mc_gravity_wrapper li.gfield.gfield_error.gfield_contains_required,
.mc-newsletter_wrapper li.gfield.gfield_error.gfield_contains_required, .mc_newsletter_wrapper li.gfield.gfield_error.gfield_contains_required {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
}

.mc-gravity li.gfield.gfield_error.gfield_contains_required div.ginput_container, .mc_gravity li.gfield.gfield_error.gfield_contains_required div.ginput_container,
.mc-newsletter li.gfield.gfield_error.gfield_contains_required div.ginput_container, .mc_newsletter li.gfield.gfield_error.gfield_contains_required div.ginput_container,
.mc-gravity_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container, .mc_gravity_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container,
.mc-newsletter_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container, .mc_newsletter_wrapper li.gfield.gfield_error.gfield_contains_required div.ginput_container {
	margin: 0 !important;
}

.mc-gravity .gform_fields .gfield_error .validation_message, .mc_gravity .gform_fields .gfield_error .validation_message,
.mc-newsletter .gform_fields .gfield_error .validation_message, .mc_newsletter .gform_fields .gfield_error .validation_message,
.mc-gravity_wrapper .gform_fields .gfield_error .validation_message, .mc_gravity_wrapper .gform_fields .gfield_error .validation_message,
.mc-newsletter_wrapper .gform_fields .gfield_error .validation_message, .mc_newsletter_wrapper .gform_fields .gfield_error .validation_message {
	display: none !important;
}

.mc-gravity .gform_footer, .mc_gravity .gform_footer,
.mc-newsletter .gform_footer, .mc_newsletter .gform_footer,
.mc-gravity_wrapper .gform_footer, .mc_gravity_wrapper .gform_footer,
.mc-newsletter_wrapper .gform_footer, .mc_newsletter_wrapper .gform_footer {
	width: 20%;
	margin: 0 20% 0 0 !important;
	padding: 0 !important;
	float: left;
	clear: none !important;
	position: relative;
}

.mc-gravity .gform_footer input.button, .mc_gravity .gform_footer input.button,
.mc-newsletter .gform_footer input.button, .mc_newsletter .gform_footer input.button,
.mc-gravity_wrapper .gform_footer input.button, .mc_gravity_wrapper .gform_footer input.button,
.mc-newsletter_wrapper .gform_footer input.button, .mc_newsletter_wrapper .gform_footer input.button {
	width: 100%;
	height: 50px;
	margin: 0;
	padding: 0;
	display: block;
	border: none;
}

.mc-gravity .gform_ajax_spinner, .mc_gravity .gform_ajax_spinner,
.mc-newsletter .gform_ajax_spinner, .mc_newsletter .gform_ajax_spinner,
.mc-gravity_wrapper .gform_ajax_spinner, .mc_gravity_wrapper .gform_ajax_spinner,
.mc-newsletter_wrapper .gform_ajax_spinner, .mc_newsletter_wrapper .gform_ajax_spinner {
	position: absolute;
	top: 17px;
	right: -25px;
}

.mc-gravity-confirmation, .mc_gravity-confirmation, .mc-newsletter-confirmation, .mc_newsletter-confirmation {
	width: 98%;
	padding: 2%;
	color: #fff;
	background: #7db2c2;
}

.mc-gravity-confirmation .gform_confirmation_wrapper, .mc_gravity-confirmation .gform_confirmation_wrapper,
.mc-newsletter-confirmation .gform_confirmation_wrapper, .mc_newsletter-confirmation .gform_confirmation_wrapper {
	border: none;
}

Supported in the following themes

Like this post? Consider sharing it!

We hope that you enjoy our content. If you decide to make a purchase after clicking on one of our affiliate links, we’ll earn a small commission at no extra cost to you. Thanks for reading! View our Affiliate Disclosure

Leave a Comment

Your email address will not be published. Required fields are marked *