Mail chimp and custom css

vfxartist

Hi,

I'm trying to add an embedded signup form using mail chimp, i want to use a horizontal layout and i'm adding the styling using the custom css section, but its not being correctly laid out.

I've tried creating a standard html page (non wordpress) and it lays out correctly using the display:inline-block flags, so i'm pretty sure the css from mail chimp is correct.
It seems to me that fatmoon/wordpress is overriding the styling and forcing the input elements to be displayed on a new line.
Please can you help me resolve this issue?

I'm pretty new to all of this, so any help would be greatly appreciated.
Regards
Jez

html

<div id="mc_embed_signup">
<form action="mailchimp_code_goes_here" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
	<label for="mce-EMAIL">Subscribe to our mailing list</label>
	<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_780ca49fa0f51b3442d9cf00a_42bde06a6a" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
</form>
</div>

css

/* MailChimp Form Embed Code - Horizontal Super Slim - 12/16/2015 v10.7
Adapted from: http://blog.heyimcat.com/universal-signup-form/ */

#mc_embed_signup form {text-align:center; padding:10px 0 10px 0;}
.mc-field-group { display: inline-block; } /* positions input field horizontally */
#mc_embed_signup input.email {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; border: 1px solid #ABB0B2;  -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:350px; vertical-align:top;}
#mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
#mc_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input */
#mc_embed_signup .button {font-size: 13px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background-color: #aaa; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;}
#mc_embed_signup .button:hover {background-color:#777; cursor:pointer;}
#mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
#mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
#mc_embed_signup #mce-error-response {display:none;}
#mc_embed_signup #mce-success-response {color:#529214; display:none;}
#mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
@media (max-width: 768px) {
    #mc_embed_signup input.email {width:100%; margin-bottom:5px;}
    #mc_embed_signup .clear {display: block; width: 100% }
    #mc_embed_signup .button {width: 100%; margin:0; }
}
</​code>
</​pre>

Air

Hello there:-)

Yes, themes have lot of styles, that could overwrite some of your styles if they are not specific enough. There is also chance that other plugin is doing this or something else. That is why I will need link to exact page so I could check there with firebug what is going on.

With kind regards.

vfxartist

Ok thank you.
You can find the signup at the bottom of the page.
http://setandrise.com/signup/

Air

I have checked source code, this is what you have there:

<div id="mc_embed_signup_scroll"><label for="mce-EMAIL">Subscribe to our mailing list</label><br>
<input id="mce-EMAIL" class="email" name="EMAIL" required="" value="" placeholder="email address" type="email">
<br>
<p></p>
<div class="clear"><input id="mc-embedded-subscribe" class="button" name="subscribe" value="Subscribe" type="submit"></div>
</div>

See this empty <p></p> and <br> ? These are the reasons you can't have it inline.

With kind regards.

vfxartist

thank you very much.
Its because i'm pasting the html in to a text box.
I didn't realise i was able to edit the position of the html elements in the text box, I've removed the new line it was creating and now it works.
But it is a little confusing that i'm pasting in html, and its applying some kind of default formatting inside the text box (despite being in text editing mode).
Is there a better way to insert html code into a page?
I'm using visual composer

Air

Yes new line create some tags in Wordpress Editor(which VC uses). However it should be fine in text mode(be sure you are not in HTML mode).
I don't know any better way, then text mode.

With kind regards.