Nothing happens when I click submit on Mailchimp Opt in Form

Question

I am trying to add an opt-in Mailchimp form in my blogger website heres my blog : https://ahoycollege.blogspot.com/ This is the code I added to my posts

     <hr />
    <!-- Begin MailChimp Signup Form --> <link href="https://fonts.googleapis.com/css?family=Lily+Script+One" rel="stylesheet">
</link><link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"></link>
<br />
<center>
<div id="mailchimp">
<form action="http://blogspot.us15.list-manage.com/subscribe/post u=68ae6aa50c0574fa1460be555&amp;id=cf51777197" class="validate" id="mc-embedded subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<span data-redactor-style="font-family: 'Lily Script One', cursive; " style="color: #57627c; font-family: &quot;lily script one&quot; , cursive; font size: 25px;"> Join the Fun!</span></div>
</form>
<span style="color: #c32b40; font-family: &quot;quicksand&quot; , sans serif;"> <span c92a3e="" e=""> Get Access to the AC Resource Library with just one click!</span></span>
</div>
<br />
<input class="" id="mce-FNAME" name="FNAME" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="30" type="text" value="*Your First Name" /><br />
<br />
<input class="required email" id="mce-EMAIL" name="EMAIL" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="30" type="email" value="*Email Address" /><br />
<br />
<input class="" id="mce-FBID" name="FBID" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" size="30" type="text" value="Facebook ID URL" />
  <br />
 <div class="clear" id="mce-responses">
<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-->
<br />
<div aria-hidden="true" style="left: -5000px; position: absolute;">
<input name="b_68ae6aa50c0574fa1460be555_cf51777197" tabindex="-1" type="text" value="" /></div>
<input class="button" id="mc-embedded-subscribe" name="subscribe" type="submit" value="Count me In!" /></center>
<!--End mc_embed_signup-->

And this was the CSS styling I used :

  #mc_embed_signup_scroll h2 {
font-size: 15px;
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
text-align: center;

 }
.mc-field-group {
margin-bottom: 8px;
}
input#mce-FNAME, input#mce-EMAIL, input#mce-FBID {
border: 1px solid #7ACCCD;

padding: 12px;
font-size: 14px;
 }
#mc-embedded-subscribe {
background: #C8E8E8;
width: 21%;
font-size: 15px;
letter-spacing: 2px;
margin-top: 8px;
border-radius: 20px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
#mc-embedded-subscribe:hover {
opacity:0.7;
color : #B53240
}
#mc_embed_signup {
background: #C8E8E8;
padding: 30px;
}

When I click submit, nothing really happens at all.

Please let me know if there are any errors in the code that I should fix. I used the Naked form of the opt in in mailchimp and customised it.

Answer 1

this is because wrong pattern of html, form tag must be close after all the input tag.

Form tag action needs to take care of.

<form action="http://blogspot.us15.list-manage.com/subscribe/post u=68ae6aa50c0574fa1460be555&amp;id=cf51777197" class="validate" id="mc-embedded subscribe-form" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
   <div id="mc_embed_signup_scroll">
     <span data-redactor-style="font-family: 'Lily Script One', cursive; " style="color: #57627c; font-family: &quot;lily script one&quot; , cursive; font size: 25px;"> Join the Fun!</span></div>

..
..
.. 
..
</form> <!-- form tag close here -->
</center><!--End mc_embed_signup-->

Hope this will help.