HTML/CSS: 3 Beautiful Email Subscription Form Examples

The following are ready to use 3 beautiful email subscription form examples. Just copy the HTML and CSS code and do a minor tweak to provide valid links and use them on your website.

Example - 1

The following email subscription box will swipe left on click of the Sign-Up button using a little jQuery code.

HTML Code

<aside>  
  <form>
    <div class="subscribe">
      <span class="dummy-box">
        <p class="subscription-email">
          <label><span class="visuallyhidden">Email Subscription</span>
            <input placeholder="What is your Email?">
          </label>
        </p>
        <p class="subscription-button">
          <a class="signup" href="#"><span>Sign Up</span></a>
        </p>
      </span>
    </div>
  </form>
</aside>

CSS Code

@import url(http://weloveiconfonts.com/api/?family=entypo);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab);
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  overflow-y: scroll;
}

.visuallyhidden, .signup span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.focusable.visuallyhidden:active, .signup span.focusable:active,
.focusable.visuallyhidden:focus,
.signup span.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

::-webkit-input-placeholder {
  color: #E9625B;
}

::-moz-placeholder {
  color: #E9625B;
}

:-ms-input-placeholder {
  color: #E9625B;
}

::-ms-input-placeholder {
  color: #E9625B;
}

::placeholder {
  color: #E9625B;
}

.subscribe {
  padding: .5em;
}

.dummy-box {
  position: relative;
  display: block;
  height: 3.40em;
  width: 100%;
  border: 2px solid #D96A64;
  border-radius: 6px;
  background: white;
  box-shadow: 0 1px #D96A64;
}
.dummy-box:before {
  opacity: 0;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
.toggled .dummy-box:before {
  content: "Check your inbox!";
  display: block;
  padding-left: 110px;
  line-height: 3.4em;
  color: #E9625B;
  opacity: 1;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.subscription-email {
  position: absolute;
  width: 250px;
  top: 0;
  margin: 0;
}

input {
  height: 3.0em;
  border-radius: 6px;
  padding: .3em .75em 0;
  border: none;
  color: #E9625B;
}
input:focus {
  outline: none;
}
.toggled input {
  display: none;
}

.signup {
  position: absolute;
  width: 90px;
  right: -2px;
  top: 0;
  display: block;
  height: 3.20em;
  padding: .35em .75em;
  background: #E9625B;
  border: 2px solid #C9554E;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  line-height: 2.4em;
  border-radius: 6px;
  -webkit-transition: all .75s ease-in-out;
  transition: all .75s ease-in-out;
}
.signup:before {
  content: "Sign UP";
}
.toggled .signup {
  -webkit-transform: translate(-326%);
          transform: translate(-326%);
}
.toggled .signup:before {
  content: "Sweet...";
}

body {
  display: -webkit-box;
  display: flex;
  height: 400px;
  font-family: 'Roboto Slab', serif;
}

aside {
  width: 400px;
  margin: auto;
  background: #E9625B;
}

jQuery Code

Add the following jQuery code, which will toggle the CSS class on click of the Sign-Up button.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
  $('.signup').click(function(e) {
    $('.subscribe').toggleClass('toggled');
  });
});
</script>

Output

Example - 2

The following email subscript form is based on the Good Feedburner, so you can use this email form with Blogger and WordPress, or on any website. You need to change the your-id with your Google Feedburner ID.

HTML Code

<center><br />
  <div class="wp-subscribe" id="wp-subscribe">
    <h4 class="title">Get more stuff like this<br /> <span>in your inbox</span></h4><br />
    <p class="text">Subscribe to our mailing list and get interesting stuff and updates to your email inbox.</p><br />

    <div class='emailfield'>
      <form action='https://feedburner.google.com/fb/a/mailverify' action="https://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=your-id', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target='popupwindow'>

        <input class="your-email" name="email" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value='Enter Your Email Address' /><br /><br />

        <input name='uri' type='hidden' value='your-id' />
        <input name='loc' type='hidden' value='en_US' />
        <input class='submitbutton' type='submit' value='Sign Up Now' />

      </form>
      <div class="clear"></div>

      <p class="footer-text">we respect your privacy and take protecting it seriously</p>
    </div>
</center>

CSS Code

#wp-subscribe {
  width: 300px;
  padding: 26px;
  background: #f47555;
}

#wp-subscribe h4.title {
  font-family: Handlee;
  font-size: 22px;
  color: #ffffff;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 0;
}
#wp-subscribe h4.title span {
  display: inline-block;
  font-weight: bold;
  font-size: 38px;
  margin-top: 15px;
}
#wp-subscribe p {
  color: #ffffff;
  margin: 0;
  text-align: center;
}
#wp-subscribe p.text {
  font-family: Poppins;
  font-size: 13px;
  margin: 5px 0;
  opacity: 0.8;
}
#wp-subscribe input {
  border: none;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  padding: 10px 0;
  margin: 0;
  box-shadow: none;
  border-radius: 0;
  height: 45px;
}
#wp-subscribe .email-field {
  margin-top: 10px;
}
#wp-subscribe input.email-field,
#wp-subscribe input.name-field {
  color: #ffffff;
  background: #d56144;
}
#wp-subscribe input::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.8;
}
#wp-subscribe input:-moz-input-placeholder {
  color: inherit;
  opacity: 0.8;
}
#wp-subscribe input::-moz-input-placeholder {
  color: inherit;
  opacity: 0.8;
}
#wp-subscribe input::-ms-input-placeholder {
  color: inherit;
  opacity: 0.8;
}
#wp-subscribe input:focus::-webkit-input-placeholder {
  color: transparent !important;
}
#wp-subscribe input:focus::-moz-input-placeholder {
  color: transparent !important;
}
#wp-subscribe input:focus:-moz-input-placeholder {
  color: transparent !important;
}
#wp-subscribe input:focus::input-placeholder {
  color: transparent !important;
}
#wp-subscribe input.submit {
  background: #ffffff;
  color: #f47555;
  margin-top: 20px;
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 500;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}
#wp-subscribe p.footer-text {
  margin-top: 10px;
  font-family: Poppins;
  font-size: 9px;
}

.your-email {
  border: none;
  font-family: Poppins;
  background-color: rgba(255, 255, 255, 0.4);
  color: #aca9a8;
}

.submitbutton {
  background: #fff;
  color: #f47555;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 18px;
  font-family: "PT Sans", sans-serif;
  border: none;
  outline: none;
  width: 100%;
  cursor: pointer;
  border-radius: 3px;
  transition: all 0.4s ease-in-out;
}
.submitbutton:active {
  outline: none;
  border: none;
  background: #fff;
  color: #e25734;
}
.submitbutton:hover {
  background: #d23f1a;
  color: #fff;
}

Output

Example - 3

This is another email subscription form based on the Google Feedburner. Change the keyword USERNAME with your Feedburner ID.

HTML Code

<div id='subscribe-css'>
  <p class='subscribe-note'><span>SUBSCRIBE</span>
    <span class='itatu'>TO</span> OUR NEWSLETTER</p>
  <div class='subscribe-wrapper'>
    <div class='subscribe-form'>
      <form action='https://feedburner.google.com/fb/a/mailverify?uri=USERNAME' class='subscribe-form' method='post' onsubmit='window.open (&#39;https://feedburner.google.com/fb/a/mailverify?uri=USERNAME&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true' target='popupwindow'>
        <input name='uri' type='hidden' value='USERNAME' /><input name='loc' type='hidden' value='en_US' /><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email' /><input class='subscribe-css-email-button' title='' type='submit' value='submit' /></form>
    </div>
  </div>
</div>

CSS Code

#subscribe-css {
  position: relative;
  padding: 20px 0;
  background: #222;
  overflow: hidden;
  border-top: 4px solid #eee;
}
.subscribe-wrapper {
  color: #fff;
  font-size: 16px;
  line-height: normal;
  margin: 0;
  text-align: center;
  text-transform: none;
  font-weight: 400;
  width: 100%;
}
.subscribe-form {
  clear: both;
  display: block;
  overflow: hidden;
}
form.subscribe-form {
  clear: both;
  display: block;
  margin: 0;
  width: auto;
  overflow: hidden;
}
.subscribe-css-email-field {
  background: #333;
  color: #ccc;
  margin: 10px 0;
  padding: 15px 20px;
  width: 35%;
  border: 0;
}
.subscribe-css-email-button {
  background: #ff675c;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  padding: 14px 30px;
  margin-left: 15px;
  text-transform: none;
  font-size: 16px;
  border: 0;
  border-radius: 3px;
  transition: all 0.6s;
}
.subscribe-css-email-button:hover {
  background: #ea5a50;
}
#subscribe-css p.subscribe-note {
  margin: 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  font-size: 180%;
  font-weight: 400;
  line-height: normal;
}
#subscribe-css p.subscribe-note span {
  position: relative;
  overflow: hidden;
  font-weight: 700;
  transition: all 0.5s;
}
#subscribe-css p.subscribe-note span.itatu {
  font-weight: 400;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  text-transform: lowercase;
}
#subscribe-css p.subscribe-note span.itatu:before,
#subscribe-css p.subscribe-note span.itatu:after {
  display: none;
}
#subscribe-css p.subscribe-note span:before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 3px;
  margin: 10px 0 0;
  background: rgba(255, 255, 255, 0.1);
  transition: all 0.5s;
}
#subscribe-css:hover p.subscribe-note span:before {
  width: 100%;
}

Example - 1

HTML Code

CSS Code

jQuery Code

Output

Example - 2

HTML Code

CSS Code

Output

Example - 3

HTML Code

CSS Code

Output

You Might Also Like

HTML: 3 Ways to Add CSS Styles for a Web Page

CSS to Align HTML Body in Center

CSS: Beautiful Horizontal Navigation Bar with Emojis