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="[email protected]">
 <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.


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

Credits: Code by Vadzim & Design by Mathias Goyheneche.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

You may also like...

Leave a Reply

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