css（mailchimp）でこのフォームのスタイルを設定する方法

Question

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

サイトスタイルシートまたはこのスタイルブロックに独自のMailChimpフォームスタイルオーバーライドを追加します。 このブロックと前述のCSSリンクをHTMLファイルのHEADに移動することをお勧めします。あなたはそれCSSを使用して、インライン形にする必要があり

<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 1

：私の写真のようなスタイルに[リンク] 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; } 

    }