Mailchimp ''Subscribe'' Button Display

[ww2boy]

Hello,

How do I fix the Mailchimp ”Subscribe” button? The display is wrong, it is not in-line with the ”enter your e-mail address” field. Here is a screenshot of the problem:

View post on imgur.com

Here is my mailchimp form code:

COPY CODE

<div class="pull-right sent-mail ">
            <div class="input-group">
<input class="form-control input-lg" type="email" name="EMAIL" placeholder="Your email address" />
                <span class="input-group-btn"><button class="btn btn-highlight btn-lg" type="submit">SUBSCRIBE</button>
                </span>
            </div>

[Catalin]

hi, have you looked over the tutorial on creating the form? https://archived.seventhqueen.com/documentation/kleo#mailchimp

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ww2boy]

Yes… I did that.
I read your reply weeks ago, but all the motivation to reply/give an update was gone. I have asked for help several times here, and every time:

1) You either replied very late (like in this case; it took you 1 week to reply)
2) And when you finally reply, it is not a helpful a reply. It’s always a short ”have you looked at this yet?” with no further explanation, nothing.

I did my best to describe my problem, I gave you the code, screenshots.

So this problem still exists. The problem is in the CSS styling. Again; please look at the information provided. There is a code. And a screenshot. Using that code results in the ”error” which you can see on the screenshot. What do I need to change to make that ”error” go away?

That’s all.

[Abe]

Hi, please put a link to your page to check it live and see where the problem comes from. Also try to disable the plugin loading styles

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ww2boy]

This is the website: https://bitsecure.eu/

Scroll down to see the sign up form.

The problem is that the button is too large.

This value defines the size of the button: ”btn-lg”
I tried other variations, like btn-sm, but than the button is too small. I tried different css as well. Nothing worked.

[Abe]

I don’t know how you came with that code since our example is like this as in the documentation
https://archived.seventhqueen.com/wp-content/uploads/2014/07/mailchimp_form.txt

https://archived.seventhqueen.com/documentation/kleo#mailchimp

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ww2boy]

That example is good. But the problem with your example is that the subscribe button is BELOW the ”Enter your email address” field. And that makes the subscribe section way too big. I want the ”subscribe” button to be right next to the ”enter your email address” field. So if you can tell me how I can do that? I had to use the different code to achieve that.

[Abe]

That should be achieved by CSS. here is what it should look like to fix it

COPY CODE

.mc4wp-form .btn-lg {
padding: 10px 20px 11px 20px;
font-size: 16px;
line-height: 1.33;
border-radius: 4px;
margin: 0;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[Author]

Posts