As we already know, MailChimp is one of the most powerful tools out there for email marketing. We all use it to create campaigns, lists, email templates and manage subscribers. As per the statistics, most of the sign ups that happen on MailChimp, happens through the website. So, it’s important that your website has a sign-up form where in subscribers can sign up for your newsletters.
In WordPress, we have a useful plugin that solves the purpose and that’s MailChimp for WordPress. This plugin can be found in plugins directory of WordPress and it’s rated extremely high from it’s users. You can either have the sign-up form on a separate page of your website or you can just add it as a widget to your footer. Once you add it, you can customize it as per your requirements.
However, while adding it to the footer, there might be chances that your sign-up form might look like this:
Now if you see the email field of the form, you’ll see that the size of this field is different than rest of the two fields. This is a simple custom CSS issue that has a easy fix.
Reason for the issue:
The main cause of this issue is that the CSS from the plugin doesn’t add automatically and the CSS in the theme doesn’t contain styling rules for the email field.
Fix:
Follow the steps below to fix the issue:
- Install and activate a plugin like Simple Custom CSS
- Go to Dashboard > Appearance > Custom CSS
- Add the code below:
footer .widget input[type=email] {
width: 100%;
overflow: hidden;
border: 1px solid #e9e9e9;
background-color: #f6f6f5;
padding: 0 10px;
height: 35px;
outline: 0;
color: #7f8385;
font-family: inherit;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
- This should fix the issue completely.
The support for MailChimp for WordPress is amazing as well. In case of any questions, you can definitely post your query to their forums page.
