Style email form - HTML CSS CSS Form

HTML CSS examples for CSS Form:Form

  1. HOME
  2. HTML CSS
  3. CSS Form
  4. Form

Description

Style email form

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor sit amet, cons</title> 
  <style>
#mc_embed_signup {
   border:none;
   text-align:center;
   width:100%;
}

.mc-field-group {<!-- www.ja v a 2  s .  co  m-->
   display:inline-block;
}

#mce-EMAIL {
   font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size:2em;
   border:3px solid Chartreuse;
   color:yellow;
   background-color:blue;
   padding:.8em 10em .8em 2em;
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   display:inline-block;
   margin:0;
}

.clear {
   display:inline-block;
}

.button {
   font-family:'Helvetica Neue', Helvetica,  Arial, sans-serif;
   font-size:2em;
   letter-spacing:.4em;
   color:pink;
   background-color:OrangeRed;
   padding:.8em 3em;
   border:3px solid grey;
   -webkit-border-radius:4px;
   -moz-border-radius:4px;
   border-radius:4px;
   display:inline-block;
   margin:0;
}

:-webkit-input-placeholder {
   color:BlueViolet;
}

:-moz-placeholder {
   color:Chartreuse;
}

::-moz-placeholder {
   color:yellow;
}

:-ms-input-placeholder {
   color:blue;
}

@media (max-width: 768px)  {
   .mc-field-group {
      display:block;
      max-width:100%;
   }
   
   #mce-EMAIL {
      padding:.8em 0 .8em 2em;
      width:97%;
      margin:0;
   }
   
   .clear {
      display:block;
      width:100%
   }
   
   .button {
      width:100%;
      margin:.6em 0 0 0;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <div id="mc_embed_signup"> 
   <form action="" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> 
    <div id="mc_embed_signup_scroll"> 
     <div class="mc-field-group"> 
      <input type="email" placeholder="Your Email" 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 style="position: absolute; left: -5000px;"> 
      <input type="text" name="" tabindex="-1" value=""> 
     </div> 
     <div class="clear"> 
      <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"> 
     </div> 
    </div> 
   </form> 
  </div> 
 </body>
</html>

Related Tutorials