Ahmed M. Wahba Ahmed M. Wahba - 12 days ago 5
CSS Question

how to style this form by css (mailchimp)

#mc_embed_signup{
background:#fff;
clear:left;
font:14px Helvetica,Arial,sans-serif;
width:100%;
}


Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file.


<div id="mc_embed_signup">
<form action="//motioncamp.us14.list-manage.com/subscribe/post?u=b570480c176b6515310ddd01a&amp;id=df2c1ec48b" 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>
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_b570480c176b6515310ddd01a_df2c1ec48b" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>




see the form i need

Answer

You need to make it an inline form using css: [link]https://codepen.io/blehnert/pen/tfdmI

    #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: 'Helvetica Neue', 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; } /* Input Styles */

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

    .button { font-family: 'Helvetica Neue', Helvetica,  Arial, sans-serif; font-size: 1em; letter-spacing: .03em; color: #fff; background-color: #2386C8 ; padding: .7em 2em; border: 2px 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: 100%; margin: .5em 0 0 0; }

    }