6 Stunning Email SignUp Form Designs with Free HTML

I've spent way to much time on dribbble researching these!

It's true - I've spent too much time browsing dribbble. It's a site full of awesome designs and uis, works of art people have spent so much time crafting. From beautiful flat designs, to minimalist material designs to beautiful skeuomorphic designs - dribbble is a huge inspiration.

So straight from dribbble, I've implemented some of the best designs I found in HTML and SCSS that you can copy and paste into your project. Start collecting those emails with a nice sign up form:

Number 1 - The Bubble Row

Starting off with a blast to the (trends) past. This is a nice bubble that isn't afraid to use more gradients and textures than trendy today:

See the Pen Email Sign Up Widget #1 - Bubble Row by Sam P (@samtoday) on CodePen.

Number 2 - The Light Card

Sometimes, you need more than just a box for the user's email - you need to put the benefits of signing up next to the form. This design includes lots of room for writing out the benefits, and is firmly in the year 2017 with "flat" style design:

See the Pen Email Sign Up Widget #2 - Light Card by Sam P (@samtoday) on CodePen.

This one is a transparent, futuristic looking design. It's full of gradients and shadows, but it wouldn't look out of place even in a futuristic movie. This is a funny design though, because it could be confused for a search bar:

See the Pen Email Sign Up Widget #3 - Bubbly Search Bar by Sam P (@samtoday) on CodePen.

Number 4 - Green & Grey

This design struck a cord for me. The subtle background textures and the abundance of subtle gradients signifying - they reminded me of the good old days when patterns were cool and the web didn't take gigs of ram. Anyway, it still looks as nice as ever:

See the Pen Email Sign Up Widget #4 - Green & Grey by Sam P (@samtoday) on CodePen.

Number 5 - Serif Modern

Snapping back to reality, let's remember that material and flat design is all the rage. But dribbble has shown me that when you mix in-vogue gradients with stunning serif fonts, you get something amazing. Starting in this design is the beautiful free font Merriweather. Make sure to click through and view this design full screen to view it in its full glory:

See the Pen Email Sign Up Widget #5 - Serif Modern by Sam P (@samtoday) on CodePen.

Number 6 - Lettering

I'm not going to lie - but this one isn't really from dribbble. Some times I like to believe that I too can follow popular trends to project the facade of being a designer. So in a meme-compilation of design, featuring Raleway, ios7 colors and rounded white boxes, this is Lettering:

See the Pen Email Sign Up Widget #6 - Lettering by Sam P (@samtoday) on CodePen.

Get More Great Content

The intersection of marketing, design and machine learning, delivered straight to your inbox:
Awesome! Please check your inbox and confirm your email.
We'll email you our latest posts plus special past content. Change your settings any time.
G'day Mate, join our list for good banter: