Hi, I'm Sam Parkinson

6 Stunning Email SignUp Form Designs with Free HTML

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

By Sam Parkinson, 4 January 2017; view other posts

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.

Number 3 - Bubbly Search Bar

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.


Comments, thoughts? Mail them to sam@sam.today. I would love to hear them!

Related posts

View all posts
My WATCH runs GNU/Linux And It Is Amazing
Lennart Poettering would love it!
Read post
Writing Sugar Documentation with a Neural Network
What a terrible failure, probably?
Read post
Derivations 102 - Learning Nix pt 4
Taking advantage of the fact Nix is a programming language
Read post
Creating a super simple derivation - Learning Nix pt 3
Wrapping some shell scripts
Read post
So Variables are a Thing - Learning Nix pt 2
Taking advantage of the fact Nix is a programming language
Read post
NSDC 2016 Topics
Digitizing the motions from National Schools Debating Championships 2016
Read post