Support » Plugin: MailChimp List Subscribe Form » Submit Button Align Horizontally to the Right of the Email Box

  • Hey, I am using the generate box in genesis theme with mailchimp code:

    <form action=”http://domain.us7.list-manage2.com/subscribe/post?u=733eeca3930f7faa043e10c07&id=952cc574c” method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank” novalidate>

    <div class=”mc-field-group”>
    <label for=”mce-EMAIL”></label>
    <input type=”email” value=”Enter your email address…” onfocus=”if(this.value==’Enter your email address…’){this.value=”}” onblur=”if(this.value==”){this.value=’Enter your email address…’}” name=”EMAIL” class=”required email” id=”mce-EMAIL”>
    </div>
    <div id=”mce-responses” class=”clear”><div class=”response” id=”mce-error-response” style=”display:none”></div>
    <div class=”response” id=”mce-success-response” style=”display:none”></div>
    </div> <div class=”clear”><input type=”submit” value=”Sign Up” name=”subscribe” id=”mc-embedded-subscribe” class=”button”></div>
    </form>

    and the result is this: http://oi39.tinypic.com/308upl5.jpg

    How do i move the “Sign Up” button to the right to align horizontally with the email box?

    The code in my style.css that may affect that particular area is:

    /* Generate Box
    ———————————————————— */

    #generate-box {
    background: #f3f3f3 url(images/shadow.png) no-repeat center bottom;
    padding: 0 0 32px;
    }

    #generate-box .wrap {
    -moz-box-shadow: 0 0 2px #999;
    -webkit-box-shadow: 0 0 2px #999;
    background: url(images/generatebox-bg.png) repeat-x top #212121;
    border: 1px solid #fff;
    box-shadow: 0 0 2px #999;
    clear: both;
    color: #9f9f9f;
    min-height: 195px;
    margin: 2px auto 0;
    padding: 30px;
    text-shadow: -1px -1px #000;
    width: 898px;
    }

    #generate-box .widget {
    position: relative;
    }

    #generate-box p {
    color: #9f9f9f;
    text-shadow: -1px -1px #000;
    margin: 0 0 15px;
    }

    #generate-box a:hover {
    color: #fff;
    }

    #generate-box img.alignright {
    position: absolute;
    right: -30px;
    top: 0;
    }

    #generate-box img.alignleft {
    position: absolute;
    left: 0;
    top: 0;
    }

    #generate-box form {
    background: url(images/arrow.png) no-repeat 40px 0;
    display: block;
    margin-top: 25px;
    padding: 5px 0 0 150px;
    }

    #generate-box #mce-EMAIL,
    #generate-box input[type=”text”] {
    -moz-border-radius: 5px;
    -moz-box-shadow: inset 0 1px 2px 1px #eee;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: inset 0 1px 2px 1px #eee;
    background-color: #fff;
    border: 3px solid #000;
    border-radius: 5px;
    box-shadow: inset 0 1px 1px 1px #eee;
    color: #777;
    font-size: 16px;
    padding: 12px 15px;
    width: 250px;
    }

    #generate-box input[type=”submit”] {
    font-size: 16px;
    padding: 11px 15px;
    display: block;
    }

    thanks.

    http://wordpress.org/plugins/mailchimp/

Viewing 2 replies - 1 through 2 (of 2 total)
  • Have resolved it. I edited the mailchimp code and its working great now.
    For anyone with such problems, here the new code thats working:

    <form action=”http://domain.us7.list-manage2.com/subscribe/post?u=733eeca3930f7faa043e10c07&id=952cc574c” method=”post” id=”mc-embedded-subscribe-form” name=”mc-embedded-subscribe-form” class=”validate” target=”_blank” novalidate>

    <div class=”mc-field-group”>
    <label for=”mce-EMAIL”></label>
    <input type=”email” value=”Enter your email address…” onfocus=”if(this.value==’Enter your email address…’){this.value=”}” onblur=”if(this.value==”){this.value=’Enter your email address…’}” name=”EMAIL” class=”required email” id=”mce-EMAIL”>
    <input type=”submit” value=”Subscribe” />
    </form></div>
    <div id=”mce-responses” class=”clear”><div class=”response” id=”mce-error-response” style=”display:none”></div>
    <div class=”response” id=”mce-success-response” style=”display:none”></div>
    </div></form>

    Obviously, this line will change in your original code as its unique to every mailchimp customer:
    “http://domain.us7.list-manage2.com/subscribe/post?u=733eeca3930f7faa043e10c07&id=952cc574c”

    The new screenshot: http://oi41.tinypic.com/24zc3s9.jpg

    Thanks for the code. Question – how to I move the Subscribe button to the right of the input box?

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Submit Button Align Horizontally to the Right of the Email Box’ is closed to new replies.