Editing (v7+)

MailChimp Submit Form Button Not Showing On Page

Permalink July 15, 2014 at 11:12 AM

Hello,

When MailChimp embed form code is added to the HTML block, the Name and Email input fields show up on the page, but the Submit form button doesn't.

See ...

http://theregaltees.com/nurses-appreciation-t-shirts-giveaway...

I've tested the form code on a basic offline HTML page and it displays as expected.

This is the 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; }
   /* 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="//facebook.us3.list-manage.com/subscribe/post?u=0a92defca5163f9764289209c&id=c28ae78782" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
   <label for="mce-FNAME">First Name  <span class="asterisk">*</span>
</label>
   <input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>

Viewing 15 lines of 36 lines. View entire code block.

 
<!-- 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; }
   /* 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="//facebook.us3.list-manage.com/subscribe/post?u=0a92defca5163f9764289209c&id=c28ae78782" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
 
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
   <label for="mce-FNAME">First Name  <span class="asterisk">*</span>
</label>
   <input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
   <label for="mce-EMAIL">Email Address  <span class="asterisk">*</span>
</label>
   <input type="email" value="" 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>    <!-- 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_0a92defca5163f9764289209c_c28ae78782" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></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[1]='FNAME';ftypes[1]='text';fnames[0]='EMAIL';ftypes[0]='email';
}(jQuery));
var $mcj = jQuery.noConflict(true);
</script>
<!--End mc_embed_signup-->

Any ideas?

Thanks.

David

ConcreteOwl replied on Jul 15, 2014 at 1:05 pm Permalink Best Answer Reply

The div that contains your submit button has a class of 'clear', try removing the class

ConcreteOwl replied on Jul 15, 2014 at 1:09 pm Permalink Reply

This is the css that is hiding the contents of the div on line 388 of your main css file

.clear {
   clear: both;
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
   }

pronet replied on Jul 15, 2014 at 5:36 pm Permalink Reply

Thanks for your help. Removing the class has worked.

Jupiter replied on Jul 15, 2014 at 1:23 pm Permalink Reply

you have to change the following code

<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>

<div class="clear"></div><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button">

according to me this helps.

pronet replied on Jul 15, 2014 at 5:41 pm Permalink Reply

Thank you for providing an additional solution.

Forums

Editing (v7+)

MailChimp Submit Form Button Not Showing On Page

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?