Responsive subscription forms for newsletters with CSS

Getting a user to subscribe to a newsletter is always a challenge where many factors come into play. The quality and usefulness of your content are fundamental, but there are also small details that can tip the balance to your side if the user is undecided. One of these details is undoubtedly the design that you apply to the subscription form of the newsletter. In addition, if it is responsive, you are adapting the same experience for users who also access from mobile and tablets as we saw recently with the example of the banners.

We have already talked about how to create a subscription list, how to automate the sending of emails when we publish new content … but all this effort and work can be in vain if nobody subscribes to our list, if users do not find the subscription form or if this is not attractive and does not generate enough confidence to leave the emails.

To try to alleviate this last point, we have designed several simple examples of subscription forms with different combinations of colours and patterns so that you can improve the UX of your users when they become part of your mailing list, using CSS and HTML

examples-newsletter
Here you have some of the examples that we have designed to make the experience of our future subscribers friendlier.

HTML structure of a subscription form

We recently wrote about forms and validation with CSS using the potential that allows HTML5 patterns and tags. But for this example we have opted for an HTML that is already in use and serves for all those users who have it implemented on their website as a starting point to modify only the CSS. This is the WordPress.com subscription widget, also available for WordPress.org using the Jetpack plugin, so if you are using one of our WordPress themes, you can now add these designs via CSS.

The HTML is very simple; it consists of a section element defined by the class .widget_blog_subscription that contains the form with three elements p, which define:

1. Simple paragraph text, to make a call to action. For example: subscribe to our newsletter!
2. The second paragraph contains the input that the mail will collect
3. Finally, the input submit to send our email

Perhaps it is not the most efficient and semantic structure, but we are going to take it as a challenge, since it is the HTML generated by this widget and we will only have access to customize it via CSS:

<section class="widget widget_blog_subscription">
	<form action="#" method="post" accept-charset="utf-8" id="subscribe-blog">
		<p>Subscribe to our newsletter.</p>
		<p>
			<input type="text" name="email" style="width: 95%; padding: 1px 2px" placeholder="Enter your email address" value="" id="subscribe-field">
		</p>
		<p>
			<input type="submit" value="Follow me!">
		</p>
	</form>
</section>

Minimalist design with flat colours

In this first design we have chosen to focus the content and use a flat colour palette and a button occupying 100% of width as footer of the widget. We have included two possible colour combinations:

The CSS is very simple, you just have to define very well the values of margin and padding so that everything is centered and correctly aligned:

.widget_blog_subscription {
	display: block;
	margin: 50px auto;
	width: 60%;
	max-width: 490px;
	min-width: 320px;
	position: relative;
	overflow: hidden;
	background-color: #F6F6F2;
}
.widget_blog_subscription p {
	margin: 0;
	text-align: center;
}
.widget_blog_subscription p:first-child {
	margin: 40px 15px 0;
	color: #F38630;
	text-transform: uppercase;
	text-align: center;
	font-size: 40px;
	font-family: 'PT Sans Narrow', sans-serif;
	letter-spacing: 1px;
}
.widget_blog_subscription input[type="text"] {
	margin: 45px 30px;
	color: #999;
	padding: 25px 15px !important;
	text-align: center;
	width: 100% !important;
	max-width: calc(100% - 90px);
	outline: none;
	border: 0;
	text-transform: uppercase;
	font-size: 12px;
}
.widget_blog_subscription input[type="text"]::-webkit-input-placeholder {
	color: #69D2E7;
}
.widget_blog_subscription input[type="text"]:-moz-placeholder {
	color: #69D2E7;
}
.widget_blog_subscription input[type="text"]::-moz-placeholder {
	color: #69D2E7;
}
.widget_blog_subscription input[type="text"]:-ms-input-placeholder {
	color: #69D2E7;
}
.widget_blog_subscription input[type="submit"] {
	margin: 0;
	background-color: #69D2E7;
	color: #fff;
	padding: 25px 15px !important;
	text-align: center;
	width: 100%;
	max-width: 100%;
	outline: none;
	border: 0;
	text-transform: uppercase;
	font-size: 12px;
	cursor: pointer;
	-webkit-transition: .1s all ease-in-out;
	-moz-transition: .1s all ease-in-out;
	-o-transition: .1s all ease-in-out;
	transition: .1s all ease-in-out;
}
.widget_blog_subscription input[type="submit"]:hover {
	background-color: #F38630;
}

The use of important! is forced here, because the HTML generated by the Widget already brings some online styles that can only be overwritten in this way.

Mimicking an airmail with CSS

Inspiring us in airmail envelopes to create a retro and vintage newsletter subscription form

Do you remember the “air mail” envelopes that bore a border of red and blue colours? Although it is practically in disuse, we usually identify these colours with a postal delivery, and in short, the newsletter is that, a postal delivery by electronic means. So for this example we have prepared a form that looks like a sealed envelope:

For the stamps we have used some CSS pseudo elements and for the edges of the envelope a repeating-linear-gradient with the so characteristic blue and red colours:

.widget_blog_subscription:after,
.widget_blog_subscription:before {
	content: '';
	width: 100%;
	height: 10px;
	display: block;
	background-image: repeating-linear-gradient(135deg, #F29B91 0px, #F09290 15px, transparent 15px, transparent 25px, #83B3DB 25px, #84ADCB 40px, transparent 40px, transparent 50px);
}
.widget_blog_subscription #subscribe-blog:before {
	content: '>>>>>';
	width: auto;
	height: auto;
	display: block;
	border: 2px solid rgba(242, 155, 145, 0.5);
	padding: 4px;
	position: absolute;
	top: 36px;
	right: -30px;
	color: rgba(242, 155, 145, 0.5);
	font-size: 28px;
	transform: rotate(17deg);
	font-weight: 400;
	text-decoration: underline;
	border-radius: 10px;
}
.widget_blog_subscription #subscribe-blog:after {
	content: '&';
	width: 50px;
	height: 50px;
	display: block;
	border: 4px double rgba(242, 155, 145, 0.5);
	padding: 10px;
	position: absolute;
	bottom: 30px;
	right: -10px;
	color: rgba(242, 155, 145, 0.5);
	font-size: 50px;
	transform: rotate(-30deg);
	font-weight: 400;
	border-radius: 99px;
	text-align: center;
	line-height: 50px;
}

As a variation to the design of the postcard or envelope of air mail, we have made a Christmas adaptation changing colours and stamps, inspiring us to the one we use in our Christmas card:

christmast-card
The subscription form can also be a good place to congratulate your future subscribers the Christmas holidays.

For this, the background changes to:

.widget_blog_subscription:after,
.widget_blog_subscription:before {
	content: '';
	width: 100%;
	height: 10px;
	display: block;
	background-image: repeating-linear-gradient(135deg, #eb5f5f 0px, #eb5f5f 15px, transparent 15px, transparent 25px, #8ac26d 25px, #8ac26d 40px, transparent 40px, transparent 50px);
}

CSS patterns as a form background

In this demo we have used the potential of the CSS3 patters to get on the one hand the look of a notebook (perfect for an education blog or similar) and on the other hand, a more abstract design:

Subscription form imitating a notepad.

In both cases, as you can see the subscribe button is located to the right of the email field, so that everything is on the same line. As for the patterns, you can find more examples here.

For the first one, the notebook, the CSS used is:

.widget_blog_subscription {
	display: block;
	margin: 50px auto;
	width: 60%;
	max-width: 490px;
	min-width: 320px;
	position: relative;
	overflow: hidden;
	background-color: #F6F6F2;
	border-radius: 5px;
	padding: 50px;
	background-color: #fff;
	background-size: 100% 1em;
	background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0.03) 81px),
					-webkit-linear-gradient(#eee .05em, transparent .05em);
	background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0.03) 81px),
					-moz-linear-gradient(#eee .05em, transparent .05em);
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 79px, #83B3DB 79px, #83B3DB 81px, rgba(0, 0, 0, 0.03) 81px),
					linear-gradient(#eee .05em, transparent .05em);
}

While in the second example, the abstract geometric base is generated from the following form:

.widget_blog_subscription {
	background-color: #ddd;
	background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #eee 75%, #eee), 
					linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
	background-size: 60px 60px;
	background-position: 0 0, 30px 30px;
}

You can try to modify the colours and backgrounds to get other effects and styles. Remember to change the colours of the text and buttons to create contrast with the background you are using.

Forms with design = happy users

It is a fact that a correct design contributes a lot to the content. It makes it more readable and useful to user eyes, as we saw with the example of the hamburger menu or the images enlarged by CSS. The same happens with the forms, one of the points where they will interact with us, hence the importance of taking maximum care of these details.

That is why we encourage you to review the design of these elements, which are usually forgotten. A good UX always starts with the user’s access point to our app or web, and in many cases, such as in the blog format, subscription forms are that access point. Therefore, we have to take care of our forms and make life easier for our users, they will thank us!

I hope the examples have been helpful and inspirational.

Leave a Reply

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