MailChimp Signup Form - Horizontal

MailChimp Signup Form - Horizontal

<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="///indorse.us15.list-manage.com/subscribe/post?u=93f666ec18288ad384d11f649&amp;id=7f298cf380" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">

<!-- Text Input Field -->
<div class="mc-field-group">

<input id="mce-EMAIL" class="required email" name="EMAIL" type="email" placeholder="Your Email" /> <input id="mc-embedded-subscribe" class="button" style="font-family: roboto;  " name="subscribe" type="submit" value="Subscribe" />

</div>
<!-- /Submit Button -->

</div>
</form></div>
<!--End mc_embed_signup-->

mailchimp-signup-form-horizontal.markdown

MailChimp Signup Form - Horizontal

MailChimp’s naked signup form -- make it fit in horizontal responsive layout. Easy Mailchimp reponsive signup form Simply replace the URL in the

tag with your own list URL, style your form, done! Forked to make it better.

License.

style.css

#mc_embed_signup { border: none; text-align: center; width: 100%; } /* Signup form container */

.mc-field-group { display: inline-block; } /* positions input field horizontally */

#mce-EMAIL { font-family: 'Roboto', Helvetica, Arial, sans-serif; font-size: 1em; border: 2px solid #ABB0B2 ; color: #343434; background-color: #fff; padding: .7em 9em .7em 1em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: inline-block; margin: 0; width: 400px} /* Input Styles */

.clear { display: inline-block; } /* positions button horizontally in line with input */

.button { font-family: 'Roboto', Helvetica,  Arial, sans-serif; font-size: 1em; letter-spacing: .03em; color: #fff; background-color: #2386C8 ; border: 10.5px solid #2386C8 ; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; display: inline-block; margin: 0; } /* Button Styles */

:-webkit-input-placeholder { color: #ABB0B2 ; } /* WebKit browsers */ 
:-moz-placeholder { color: #ABB0B2 ; } /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #ABB0B2 ; } /* Mozilla Firefox 19+ */
:-ms-input-placeholder { color: #ABB0B2 ; } /* Internet Explorer 10+ */

@media (max-width: 768px) { /* positions input field and button underneath each other with 100% width for tablet and mobile */
  
.mc-field-group { display: block; max-width: 100%; }
#mce-EMAIL { padding: .7em 0 .7em 1em; width: 96%; margin: 0; }
.clear { display: block; width: 100% }
.button { width: 40%; margin: .5em 0 0 0; }
  
}