MailChimp List Subscribe Form
Cannot align/space submit button properly in MailChimp WP pl (2 posts)

  1. BiniChic
    Posted 3 years ago #

    Hi, I installed the MailChimp List Subscribe form plugin a few months ago and it works fine. You can see it here, http://www.binichic.com.
    The problem is that I can't modify it to align properly and add some space between the submit button and the email input box right above it. I can't modify their widths either, in case they can sit next to each other in the same line...
    This is the part of the code i have in the "sidebar" of the CSS Editor of my blog where I think the problem might lie:

    <div id="mc_embed_signup" style="width: 146px;">
    <form action="http://binichic.us2.list-manage.com/subscribe/post?u=91705c9c712886b4db5d833d1&id=eb523110d0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="font: normal 100% Arial, sans-serif;font-size: 10px;">
    	<fieldset style="-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;border: 1px solid #fff;padding-top: 1.5em;margin: .5em 0;background-color: #fff;color: #000;text-align: left;">
    	<legend style="white-space: normal;text-transform: capitalize;font-weight: bold;color: #000;background: #fff;padding: .5em 1em;border: 1px solid #ccc;-moz-border-radius: 4px;border-radius: 4px;-webkit-border-radius: 4px;font-size: 1.2em;"><span>Subscribe to BiniChic</span></legend>
    <div class="mc-field-group" style="margin: 1.3em 5%;clear: both;overflow: hidden;">
    <label for="mce-EMAIL" style="display: block;margin: .3em 0;line-height: 1em;font-weight: bold;">Email Address </label>
    <input type="text" value="" name="EMAIL" class="required email" id="mce-EMAIL" style="margin-right: 1.5em;padding: .2em .3em;width: 90%;float: left;z-index: 999;">
    		<div id="mce-responses" style="float: left;top: -1.4em;padding: 0em .5em 0em .5em;overflow: hidden;width: 90%;margin: 0 5%;clear: both;">
    			<div class="response" id="mce-error-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: FBE3E4;color: #D12F19;"></div>
    			<div class="response" id="mce-success-response" style="display: none;margin: 1em 0;padding: 1em .5em .5em 0;font-weight: bold;float: left;top: -1.5em;z-index: 1;width: 80%;background: #E3FBE4;color: #529214;"></div>
    		<div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn" style="clear: both;width: auto;display: block;margin: 1em 0 1em 5%;"></div>
    	<a href="#" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a>

    Thank you in advance for helping me out. I'm new at this css technical stuff and I'm afraid I might have some code that is blocking my ability to modify something.
    Also, how hard or easy is it to change the look of the submit button?


  2. mc_nate
    Posted 3 years ago #

    Hey BiniChic!

    Unfortunately, we can't really help with setting up the CSS for a customized form. However, while I don't profess to be a total CSS whiz, changing the submit button should be a fairly easy process. Check out this link from a previous discussion:


    If you turn off the custom styling, you can target the #mc_signup_form css id in a style sheet to customize things. Then you can adjust any extra changes you want to make (including floating it left or right).

    Let us know if we can further assist!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • MailChimp List Subscribe Form
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic