Quick Tip: Effective and Beautiful Newsletter Signup Form

Building an effective email community starts with a used-friendly and beautiful signup form. How to create one? Have a look below to learn how to do a great newsletter subscribe form with minimum code.


Althought marketing specialists are saying the newsletter is dead as a form of “user”- “business-owner” communication, there is still a great number of websites opting to keep their clients and visitors informed with newsletters.

But building a list of email subscribers starts with a good-looking, simple and functional signup form. There are many examples of terrible looking signup forms that ask for your email, first name, last name, country etc… information. Why do you need it? Probably, a business owner has his reasons but what really should be included in a form is just a field where you type your email address and just hit subscribe. Anything more than that is so annoying.

This quick HTML/CSS tutorial will give you the bits and pieces you need to know in order to create a user-friendly and beautiful newsletter signup form. You can change the CSS styles so the form matches the style of your website. What’s more, the form is easy to create and implement.

Recommended Sources: 10 Trendy and Free CSS Login Forms.

The HTML Structure

<!doctype html>
<html lang="en">
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 <title>Rebound Newsletter</title>
 <meta name="description" content="">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="//necolas.github.io/normalize.css/3.0.2/normalize.css">
 <div class="subscribe-form">
 <form action="#" method="post">
 <div class="heading">
 <input type="text" value="your.lovely@e-mail.com">
 <input type="submit" value="SUBSCRIBE" name="submit-btn">

The CSS Structure

@import url(//fonts.googleapis.com/css?family=Lato:900);
 * {
 outline: none;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box; }
 *:before, *:after {
 display: block; }
body {
 background: url(//i1284.photobucket.com/albums/a574/meecrobe/bg_zpsa69b683b.png); }
.subscribe-form {
 width: 280px;
 height: 200px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -100px;
 margin-left: -140px;
 background: url(//i1284.photobucket.com/albums/a574/meecrobe/bor-top_zps92b00326.png) top center no-repeat, url(//i1284.photobucket.com/albums/a574/meecrobe/bor-bot_zpsc0b729ec.png) bottom center no-repeat, url(//i1284.photobucket.com/albums/a574/meecrobe/form-bg_zpsac871f59.png);
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -ms-border-radius: 5px;
 border-radius: 5px;
 text-align: center;
 box-shadow: 0 0 150px 50px rgba(0, 0, 0, 0.5);
 overflow: hidden; }
 .subscribe-form form {
 width: 282px;
 height: 180px;
 margin-top: 10px;
 border-top: 1px solid #faf8f4;
 border-bottom: 1px solid #faf8f4;
 -webkit-box-shadow: inset 0 0 0 1px #e7e0cf;
 -moz-box-shadow: inset 0 0 0 1px #e7e0cf;
 -ms-box-shadow: inset 0 0 0 1px #e7e0cf;
 box-shadow: inset 0 0 0 1px #e7e0cf;
 margin-left: -1px; }
 .subscribe-form form .heading {
 width: 280px;
 height: 20px;
 line-height: 20px;
 margin-top: 25px;
 background: url(http://i1284.photobucket.com/albums/a574/meecrobe/dashes_zps2c74672d.png) left center no-repeat, url(http://i1284.photobucket.com/albums/a574/meecrobe/dashes_zps2c74672d.png) right center no-repeat;
 font-size: 14px;
 color: #d36f39;
 text-transform: uppercase;
 font-family: "Lato", serif;
 letter-spacing: 7px;
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 padding-left: 7px; }
 .subscribe-form form input[type="text"] {
 width: 234px;
 height: 34px;
 background: #f3e6db;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -ms-border-radius: 5px;
 border-radius: 5px;
 border: 1px solid #fbfaf3;
 -webkit-box-shadow: inset 0 0 0 1px #e4c9b4;
 -moz-box-shadow: inset 0 0 0 1px #e4c9b4;
 -ms-box-shadow: inset 0 0 0 1px #e4c9b4;
 box-shadow: inset 0 0 0 1px #e4c9b4;
 padding: 0 18px 0 18px;
 font-family: Georgia, sans-serif;
 font-size: 12px;
 font-style: italic;
 color: #ba9e88;
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
 margin: 20px 0 18px 0; }
 .subscribe-form form input[type="submit"] {
 width: 234px;
 height: 33px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -ms-border-radius: 5px;
 border-radius: 5px;
 background: #d36f39;
 color: #fbece6;
 font-size: 12px;
 font-family: "Lato", serif;
 letter-spacing: 6px;
 text-transform: uppercase;
 text-shadow: 0 -1px 0 #bc3507;
 padding-left: 13px;
 border: 1px solid #bc3507;
 -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.42);
 -moz-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.42);
 -ms-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.42);
 box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.42); }
 .subscribe-form form input[type="submit"]:active {
 -webkit-box-shadow: inset 0 1px 0 1px rgba(255, 255, 255, 0.42);
 -moz-box-shadow: inset 0 1px 0 1px rgba(255, 255, 255, 0.42);
 -ms-box-shadow: inset 0 1px 0 1px rgba(255, 255, 255, 0.42);
 box-shadow: inset 0 1px 0 1px rgba(255, 255, 255, 0.42);
 position: relative;
 top: 1px; }

If you have a look at the CSS code, you will see that the forms uses images to achieve the postal look. You can remove there and apply yours or use background color to match the palette of your own website. Have a look at the demo and feel free to leave a comment, a question or a recommendation for a future code snippets.

Related post:  Quick Photoshop Tips: Skin & Eyes

Recommended Source: Another 10 Beautiful & Free CSS Login Forms.

Credits: Code by Vadzim & Design by Mathias Goyheneche.

Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.