• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / Websites / How Do I Make My Missing MailChimp Subscribe Button Show?

How Do I Make My Missing MailChimp Subscribe Button Show?

Posted: December 18, 2015 Updated: January 4, 2018 by Claire Brotherton
14 Comments

Subscribe button with newsletter icon

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.

A MailChimp form missing the Subscribe button
The newsletter signup form, but there’s no Submit button for the form.

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.

Hidden MailChimp subscribe button
Hidden MailChimp subscribe button

 

Hidden button code
The code for the subscribe button which wasn’t showing as revealed with Chrome Developer Tools

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.

Code highlighting the clear class on a div
The clear class needs to be changed or removed

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>.

The form's Subscribe button showing
The signup form’s Subscribe button showing

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

Related

Category: Websites Tags: email marketing, forms, mailchimp

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Alice Elliott says

    December 18, 2015 at 2:52 pm

    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?

    Reply
    • Claire Brotherton says

      December 18, 2015 at 3:27 pm

      Yes, it’s a small thing Alice, but it could make a big difference to conversions!

      Thanks for commenting.

      Reply
  2. Jeremy says

    March 5, 2017 at 7:38 pm

    Heck ya that worked. In fact it even worked for Shopify too!

    Reply
    • Claire Brotherton says

      March 5, 2017 at 8:34 pm

      Good to know!

      Reply
  3. Amy says

    July 18, 2017 at 3:20 am

    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?

    Reply
    • Claire Brotherton says

      July 24, 2017 at 10:13 pm

      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 🙂

      Reply
  4. Jack says

    April 24, 2018 at 11:24 pm

    My submit button is grayed out and adding an x does not help.

    Reply
    • Claire Brotherton says

      April 25, 2018 at 3:36 pm

      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?

      Reply
  5. Tara says

    August 15, 2019 at 1:49 pm

    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!

    Reply
    • Claire Brotherton says

      August 15, 2019 at 4:01 pm

      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?

      Reply
      • Tara says

        August 15, 2019 at 4:09 pm

        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.

        Reply
        • Claire Brotherton says

          August 15, 2019 at 4:47 pm

          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.

          Reply
          • Tara says

            August 15, 2019 at 5:37 pm

            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.

          • Claire Brotherton says

            August 16, 2019 at 8:35 pm

            Almost there, then! Hope that works for now.

Leave a Reply Cancel reply

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

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map