How Do I Make My Missing MailChimp Subscribe Button Show?

Missing MailChimp Subscribe Button? That’s not good…

I worked on a WordPress site recently where there was a problem with an embedded MailChimp form.

The form had been created and added to the site, but the Subscribe button wasn’t showing up.

While the form could still be completed and submitted by clicking the Enter button, it might not have been that intuitive to users that they could do so.

Obviously it was better that the Submit button should show, because no-one wants to miss out on email signups. 🙂

Why was the MailChimp Subscribe button missing?

The code for the form had been added through the MailChimp for WordPress plugin. This plugin creates a widget to which the MailChimp form can be added in a sidebar.

The form could be edited directly on the Forms page – found as a submenu item of MailChimp for WP.

It’s also possible to add form code in a Text widget, where it can be edited too.

By inspecting the code, I could see that the HTML code was present for the button, but it wasn’t displaying.

It turned out that it was an issue with CSS – the styling language which controls the display of items on a web page.

What was the problem with the CSS?

The subscribe button was enclosed in a <div> (a container) with the class clear.

The code was:

<div class="clear">
<input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Subscribe" />
</div>

Geeky code explanation (skip this if you just want to know the solution)

Any HTML element like a <div> can have a class or id applied to it. When defined in a CSS stylesheet, web designers can define the appearance of that element.

For example, you can change the colour of a heading by applying a class to it, and then defining a CSS rule.

So your HTML code might be

<h2 class="myheading">

And your CSS is written like so:

.myheading {
color: blue;
}

Classes are denoted with a full stop before (.) and IDs with a # sign.

It can get more complicated because multiple CSS styles can apply and there’s rules on which ones take priority. IDs are more powerful than classes, which are more powerful than elements.

If you’re interested in knowing more, I recommend reading CSS: Specificity Wars – particularly if you’re a Star Wars fan.

Anyway, I digress.

The issue was that in the WordPress theme used, there was already a style defined for the clear class:

.clear {
display: block;
width: 100%;
height: 0px;
clear: both;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
visibility: hidden;
font: 400 0px/0px Arial;
}

This code has a height: 0px; and visibility: hidden; rules which serve to hide the content of anything within that <div>.

Hence the button not displaying.

This is a theme-specific issue in WordPress – it won’t happen in all themes.

Showing the hidden MailChimp subscribe button

Fortunately, it was a fairly simple problem to fix.

The way to remedy it was to change the class for that particular <div> container.

So instead of <div class="clear"> I changed the form code to be  <div class="clearx">.

Since there was no style defined for a clearx class, the theme’s style no longer superseded the form style, and the Subscribe button was visible. Hooray!

An alternative would have been to remove the class declaration altogether, leaving just a blank <div>.

Have you had a missing MailChimp Subscribe button? Did you find this post helpful? If so, please leave a comment.