Blog
Want more like this?
Subscribe!

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.

Exposing properties with Graphene Django

The other missing guide

Arithmetic with JavaScript Arrays

A Astonishing Adventure

Freeing Disk Space with the PackageKit cache

Automatic updates gone wrong

Keeping Python projects secure on GitLab

Pinning projects to the very latest

Testing GraphQL with Graphene Django

The missing guide

Local Politicians Meet InfoSec - a Wordpress Disaster

The article that I didn't want to have to write

PGP for Every Email

Join us in our PGP journey

SELinux Concepts - but for humans

This is your SELinux dictionary!

A new way of writing Gtk+ applications

Introducing Pyract - my weekend hack

Stop Disabling SELinux: A Real-World guide

Be safe from software vulnerabilities AND run your webserver

Plotinus and the quest for searchable menus

The underdog challenges a 30 year old UI convention

DMARC Secured Your Email Identity, But See How it Ruined Mailing Lists

Why people aren't posting on your mailing list

How they track you: Email Service Provider Edition

A summary of how major email marketers track their emails

Blender for Hackers - 3D modeling is just like using VIM

A very brief introduction to Blender

Edge of the World - What Open-World Games Can Teach Us About Design

Spoiler: It's all about the illusions

When fictional worlds are an accurate representations of IoT security

Ok, a little dramatized. But still truthful.

How I Destroyed my Blog's Performance with CSS Background-Blend-Modes

Just because a browser has a feature doesn't mean you should use it

Help Us Answer: The Email Signup Popup - where is it from?

Who is behind the latest wave of popups?

My WATCH runs GNU/Linux And It Is Amazing

Lennart Poettering would love it!
G'day Mate, join us on IRC for good banter:
#Learnt on Freenode
See you there!