Changing HTML / CSS on MailChimp sign up form

unreelunreel LondonRegistered Users Posts: 4 Big grins
I've just added a MailChimp sign up form but the formatting is wrong - the boxes overlap. See here - https://www.marktamer.co.uk/Newsletter

I used this tutorial - https://gallery.imagesinthebackcountry.com/Smugmug-customization/Adding-a-Mailchimp-Signup-Form where it suggests deleted the header code and replacing with another version.

Does anyone know which part of the code to change to move the boxes apart? I tried changing a few padding tags but couldn't get anything to work.

Many thanks

Comments

  • unreelunreel LondonRegistered Users Posts: 4 Big grins
    I forgot to add the code used:


    <div id="mc_embed_signup">
    <form action="https://marktamer.us19.list-manage.com/subscribe/post?u=36b670970496074c3509203c3&id=80ea17a93b" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <h2>Sign up to stay in touch</h2>
    <div class="mc-field-group">
    <label for="mce-EMAIL">Email Address </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    </div>
    <div class="mc-field-group">
    <label for="mce-FNAME">First Name </label>
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
    </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> <!-- 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 type="text" name="b_36b670970496074c3509203c3_80ea17a93b" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
    </form>
    </div>
    <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
    <!--End mc_embed_signup-->


    AND CSS

    /* MailChimp Form Embed Code - Slim - 12/15/2015 v10.7 */
    #mc_embed_signup form {display:block; position:relative; text-align:left; padding:10px 0 10px 3%}
    #mc_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}
    #mc_embed_signup input {border:1px solid #999; -webkit-appearance:none;}
    #mc_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}
    #mc_embed_signup input[type=radio]{-webkit-appearance:radio;}
    #mc_embed_signup input:focus {border-color:#333;}
    #mc_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; letter-spacing:.03em; color: #FFFFFF; cursor: pointer; display: inline-block; font-size:15px; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto; transition: all 0.23s ease-in-out 0s;}
    #mc_embed_signup .button:hover {background-color:#777;}
    #mc_embed_signup .small-meta {font-size: 11px;}
    #mc_embed_signup .nowrap {white-space:nowrap;}
    #mc_embed_signup .clear {clear:none; display:inline;}

    #mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}
    #mc_embed_signup input.email {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; display:block; padding:0 0.4em; margin:0 4% 10px 0; min-height:32px; width:58%; min-width:130px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;}
    #mc_embed_signup input.button {display:block; width:35%; margin:0 0 10px 0; min-width:90px;}

    #mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;}
    #mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;}
    #mc_embed_signup #mce-error-response {display:none;}
    #mc_embed_signup #mce-success-response {color:#529214; display:none;}
    #mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;}
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,272 Major grins

    Find this: #mc_embed_signup input.button {display:block; width:35%; margin:0 0 10px 0; min-width:90px;}

    Add some top margin: margin: 20px 0 10px 0;.

    Just for reference for margin/padding, 'Top', Right, 'Bottom', 'Left'.

  • unreelunreel LondonRegistered Users Posts: 4 Big grins
    Thanks - I gave it go but without luck. It now reads:

    #mc_embed_signup input.button {display:block; width:15%; margin:30px 30 30px 30; min-width:90px;}
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,272 Major grins
    edited October 8, 2020

    @unreel said:
    Thanks - I gave it go but without luck. It now reads:

    #mc_embed_signup input.button {display:block; width:15%; margin:30px 30 30px 30; min-width:90px;}

    I'm not seeing your change in the code. Also margin:30px 30 30px 30; is missing px on the 30. It can be 0, but if you want a value, you need to specify the units, like px, %, em etc.

    I'm assuming you want to move the subscribe button. If that isn't what you want then, be more specific.

  • unreelunreel LondonRegistered Users Posts: 4 Big grins

    Thanks - I made the change. For some reason the Name field has narrowed. I can live with that but not sure why it changed

    https://www.marktamer.co.uk/Newsletter

Sign In or Register to comment.