Button touching form?

Hey npacademy,

Thanks for getting in touch. From looking at that site, it appears they’re using a custom form where they’re specifying a div that is the width of the entire area (both the white area and the blue button), and giving that a white background with the specified borders. Then, for the form, they’re adding a colorless input text field on top of the white bar, and the blue button is actually on top of the right side of the white bar.

To be specific, it looks a bit like this:

<div class="input-bar">
<input type="text" placeholder="Your Email" name="from" id="subscribe-email-weekly-field" value="" size="25">
<button class="blue-btn" type="submit" id="subscribe-email-weekly-button" name="submit" value="Submit">Sign Up</button>
</div>

I’ve removed some of the other code for the form, as these are the sections significant for actual display of the button.

with these css definitions:

.input-bar {
width: 250px;
height: 32px;
background: white;
border-radius: 5px;
margin: 0 20px 0 20px;
padding: 5px;
position: relative;
}

.input-bar input {
border: 0;
height: 30px;
background: transparent;
padding-left: 10px;
font-family: 'Sintony';
font-size: 14px;
width: 165px;
outline: none;
}

.input-bar .blue-btn, #email-submit {
border: 0;
padding: 0;
vertical-align: middle;
border-left: 1px solid #e7e7e7;
width: 80px;
height: 42px;
position: absolute;
top: 0;
right: 0;
border-radius: 0px 5px 5px 0;
background: #0068b0;
color: white;
font-weight: 900;
font-size: 14px;
-webkit-transition: all 0.15s;
transition: all 0.15s;
}

Manipulating the plugin’s CSS to look like this wouldn’t necessarily be an option because the plugin places the button and input bar in two separate <div>s. However, you may be able to get things looking how you want by manipulating the Embedded Form code offered within MailChimp from your Lists page > your list > Signup forms > Embedded Forms.

Let us know if you have other questions!
-Gabe

Hi thanks for reply.

I’ve manipulated it to look how I want, but on clicking the button nothing happens.

here’s my code:

<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/classic-081711.css" rel="stylesheet" type="text/css">
<style type="text/css">
	#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; height:150px; }
.input-bar {
width: 250px;
height: 35px;
background: white;
border-radius: 5px;
margin: 0 20px 0 20px;
padding: 5px;
position: relative;
}

.input-bar input {
border: 0;
height: 35px;
background: transparent;
padding-left: 10px;
font-family: 'Sintony';
font-size: 14px;
width: 165px;
outline: none;
}

.input-bar .blue-btn, #email-submit {
border: 0;
padding: 0;
vertical-align: middle;
border-left: 1px solid #e7e7e7;
width: 80px;
height: 55px;
position: absolute;
top: 5px;
right: 0;
border-radius: 0px 5px 5px 0;
background: #0068b0;
color: white;
font-weight: 900;
font-size: 14px;
-webkit-transition: all 0.15s;
transition: all 0.15s;
}
	/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://naturettl.us3.list-manage1.com/subscribe/post?u=fd0338ace687fa6e2822ea0e3&id=b1f65641f0" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>

	<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;"><input type="text" name="b_fd0338ace687fa6e2822ea0e3_b1f65641f0" value=""></div>
<div class="input-bar">
<input type="text" placeholder="Email" name="from" id="subscribe-email-weekly-field" value="" size="25">
<button class="blue-btn" type="submit" id="subscribe-email-weekly-button" name="submit" value="Submit">Sign Up</button>
</div>
</form>
</div>
<script type="text/javascript">
var fnames = new Array();var ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';
try {
    var jqueryLoaded=jQuery;
    jqueryLoaded=true;
} catch(err) {
    var jqueryLoaded=false;
}
var head= document.getElementsByTagName('head')[0];
if (!jqueryLoaded) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js';
    head.appendChild(script);
    if (script.readyState && script.onload!==null){
        script.onreadystatechange= function () {
              if (this.readyState == 'complete') mce_preload_check();
        }
    }
}

var err_style = '';
try{
    err_style = mc_custom_error_style;
} catch(e){
    err_style = '#mc_embed_signup input.mce_inline_error{border-color:#6B0505;} #mc_embed_signup div.mce_inline_error{margin: 0 0 1em 0; padding: 5px 10px; background-color:#6B0505; font-weight: bold; z-index: 1; color:#fff;}';
}
var head= document.getElementsByTagName('head')[0];
var style= document.createElement('style');
style.type= 'text/css';
if (style.styleSheet) {
  style.styleSheet.cssText = err_style;
} else {
  style.appendChild(document.createTextNode(err_style));
}
head.appendChild(style);
setTimeout('mce_preload_check();', 250);

var mce_preload_checks = 0;
function mce_preload_check(){
    if (mce_preload_checks>40) return;
    mce_preload_checks++;
    try {
        var jqueryLoaded=jQuery;
    } catch(err) {
        setTimeout('mce_preload_check();', 250);
        return;
    }
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://downloads.mailchimp.com/js/jquery.form-n-validate.js';
    head.appendChild(script);
    try {
        var validatorLoaded=jQuery("#fake-form").validate({});
    } catch(err) {
        setTimeout('mce_preload_check();', 250);
        return;
    }
    mce_init_form();
}
function mce_init_form(){
    jQuery(document).ready( function($) {
      var options = { errorClass: 'mce_inline_error', errorElement: 'div', onkeyup: function(){}, onfocusout:function(){}, onblur:function(){}  };
      var mce_validator = $("#mc-embedded-subscribe-form").validate(options);
      $("#mc-embedded-subscribe-form").unbind('submit');//remove the validator so we can get into beforeSubmit on the ajaxform, which then calls the validator
      options = { url: 'https://naturettl.us3.list-manage2.com/subscribe/post-json?u=fd0338ace687fa6e2822ea0e3&id=b1f65641f0&c=?', type: 'GET', dataType: 'json', contentType: "application/json; charset=utf-8",
                    beforeSubmit: function(){
                        $('#mce_tmp_error_msg').remove();
                        $('.datefield','#mc_embed_signup').each(
                            function(){
                                var txt = 'filled';
                                var fields = new Array();
                                var i = 0;
                                $(':text', this).each(
                                    function(){
                                        fields[i] = this;
                                        i++;
                                    });
                                $(':hidden', this).each(
                                    function(){
                                        var bday = false;
                                        if (fields.length == 2){
                                            bday = true;
                                            fields[2] = {'value':1970};//trick birthdays into having years
                                        }
                                    	if ( fields[0].value=='MM' && fields[1].value=='DD' && (fields[2].value=='YYYY' || (bday && fields[2].value==1970) ) ){
                                    		this.value = '';
									    } else if ( fields[0].value=='' && fields[1].value=='' && (fields[2].value=='' || (bday && fields[2].value==1970) ) ){
                                    		this.value = '';
									    } else {
									        if (/\[day\]/.test(fields[0].name)){
    	                                        this.value = fields[1].value+'/'+fields[0].value+'/'+fields[2].value;
									        } else {
    	                                        this.value = fields[0].value+'/'+fields[1].value+'/'+fields[2].value;
	                                        }
	                                    }
                                    });
                            });
                        $('.phonefield-us','#mc_embed_signup').each(
                            function(){
                                var fields = new Array();
                                var i = 0;
                                $(':text', this).each(
                                    function(){
                                        fields[i] = this;
                                        i++;
                                    });
                                $(':hidden', this).each(
                                    function(){
                                        if ( fields[0].value.length != 3 || fields[1].value.length!=3 || fields[2].value.length!=4 ){
                                    		this.value = '';
									    } else {
									        this.value = 'filled';
	                                    }
                                    });
                            });
                        return mce_validator.form();
                    },
                    success: mce_success_cb
                };
      $('#mc-embedded-subscribe-form').ajaxForm(options);

    });
}
function mce_success_cb(resp){
    $('#mce-success-response').hide();
    $('#mce-error-response').hide();
    if (resp.result=="success"){
        $('#mce-'+resp.result+'-response').show();
        $('#mce-'+resp.result+'-response').html(resp.msg);
        $('#mc-embedded-subscribe-form').each(function(){
            this.reset();
    	});
    } else {
        var index = -1;
        var msg;
        try {
            var parts = resp.msg.split(' - ',2);
            if (parts[1]==undefined){
                msg = resp.msg;
            } else {
                i = parseInt(parts[0]);
                if (i.toString() == parts[0]){
                    index = parts[0];
                    msg = parts[1];
                } else {
                    index = -1;
                    msg = resp.msg;
                }
            }
        } catch(e){
            index = -1;
            msg = resp.msg;
        }
        try{
            if (index== -1){
                $('#mce-'+resp.result+'-response').show();
                $('#mce-'+resp.result+'-response').html(msg);
            } else {
                err_id = 'mce_tmp_error_msg';
                html = '<div id="'+err_id+'" style="'+err_style+'"> '+msg+'</div>';

                var input_id = '#mc_embed_signup';
                var f = $(input_id);
                if (ftypes[index]=='address'){
                    input_id = '#mce-'+fnames[index]+'-addr1';
                    f = $(input_id).parent().parent().get(0);
                } else if (ftypes[index]=='date'){
                    input_id = '#mce-'+fnames[index]+'-month';
                    f = $(input_id).parent().parent().get(0);
                } else {
                    input_id = '#mce-'+fnames[index];
                    f = $().parent(input_id).get(0);
                }
                if (f){
                    $(f).append(html);
                    $(input_id).focus();
                } else {
                    $('#mce-'+resp.result+'-response').show();
                    $('#mce-'+resp.result+'-response').html(msg);
                }
            }
        } catch(e){
            $('#mce-'+resp.result+'-response').show();
            $('#mce-'+resp.result+'-response').html(msg);
        }
    }
}

</script>
<!--End mc_embed_signup-->

Hi Npacademy,

Thanks for writing back! If you’re having trouble with the embed code, you might want to check out this guide from the MailChimp knowledgebase: https://kb.mailchimp.com/article/how-can-i-add-my-signup-form-on-my-website#troubleshooting It has some tips on troubleshooting the form. Also you might want to try disabling/enabling javascript in the embed code settings. Sometimes conflicting javascript on the page can cause problems. Disabling javascript can narrow down the problem.

If you have other questions on the embed code, it’s best to reach out to the MailChimp support team.

Thanks!

-mcd