Sorry to disturb you again,
I have embedded the Mailchimp ‘slim’ form in the footer of my website and am trying to customise it slightly.
Whenever I try to change the width etc of the input form fields the effect is on the whole container. The width of the whole container stretches so that it overflows on to the right hand side past the actual footer and this is more noticeable as the screen size gets smaller.
I want to achieve:
a. making the email address input field slightly bigger in width
b. moving the email address input field down so that it is inline with the search bar on the left of the footer
c. centering the ‘subscribe’ button (in relation to the field)
This is the coding of the embedded form:
<!– Begin MailChimp Signup Form –>
<style type=”text/css”>
#mc_embed_signup{background:#222; clear:left; font:14px Helvetica,Arial,sans-serif; }<br />
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.<br />
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */<br />
</style>
<div id=”mc_embed_signup”><form id=”mc-embedded-subscribe-form” class=”validate” action=”https://priyanka-jain.us17.list-manage.com/subscribe/post?u=98e17fe386f22af596125f0ae&id=46103f1e12″ method=”post” name=”mc-embedded-subscribe-form” novalidate=”” target=”_blank”>
<div id=”mc_embed_signup_scroll”>
<input id=”mce-EMAIL” class=”email” name=”EMAIL” required=”” type=”email” value=”” placeholder=”email address” />
<!– 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 tabindex=”-1″ name=”b_98e17fe386f22af596125f0ae_46103f1e12″ type=”text” value=”” /></div>
<div class=”clear”><input id=”mc-embedded-subscribe” class=”button” name=”subscribe” type=”submit” value=”Subscribe” /></div>
</div>
</form></div>
<!–End mc_embed_signup–>
This is a link to the CSS selectors in relation to the embedded form –
https://kb.mailchimp.com/lists/signup-forms/css-hooks-for-customizing-forms
This is the customization I have done so far:
/*move subscribe button up closer to the email input field*/
#mc_embed_signup, input.button {
position: relative;
bottom: 40px;
}
/*trying to increase width of the email input field but not entirely working as it’s increasing whole container width*/
#mc_embed_signup, div.mc-field-group input {
width: 500px;
}
Since you have to put the #mc_embed_signup selector with any other selectors to ensure that the style applies it has an effect on everything.
Any idea how I can achieve the above without having the footer overflow to the right?
