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.
As always, Claire, the solution is really simple. It’s just that when you’re staring at the problem, the answer remains invisible. Who would have thought a simple x would save the day?
Yes, it’s a small thing Alice, but it could make a big difference to conversions!
Thanks for commenting.
Heck ya that worked. In fact it even worked for Shopify too!
Good to know!
Hi Claire,
this is what’s happening to me. But I don’t know anything about coding. How do I view the HTML/change it so I can see the submit button?
Hi Amy
Do you mind sharing the URL of your site, so I can help?
Email me via the contact page if you prefer not to write it in a comment.
Claire 🙂
My submit button is grayed out and adding an x does not help.
Hi Jack,
Is it grayed out as in the form won’t submit when you press the button, or just gray in colour and you want to change the colour?
Your solution was an easy fix. Thank you for that. However the word subscribe is not centered on the button. I get the up half of the letters and no “E”. Because there is no room. Any suggestions on how to fix that? Thanks for you help!
Hi Tara, glad the post helped.
If you mean the Subscribe button on beautyshopdropout.com I can see all the letters fine. Do you still need help?
Weird. On my mobile phone and on the laptop my subscribe buttons are still not quite right. I could send you a pic of what I see. But I’m not sure how to do that on here.
Must be a browser quirk. I was using Firefox but I just tried on Chrome, and I see the problem.
You could try something like this in the Customizer (Appearance > Customize > Additional CSS):
#mc_embed_signup input.button {
width: fit-content;
height: fit-content;
}
If that doesn’t work, let me know.
I just can’t thank you enough. I am using an iPhone and MacBook Air. It’s perfect on the mobile and missing the “E” on the computer.
Almost there, then! Hope that works for now.