Saijo George
Jun 14, 2015 · 5 min read
Image for post
Image for post
Form Input Design Trends

The dream is to create a “WOW Experience” for your users on their first visit to your website. One of the best analogy I have come across that explains the importance of this is from Kevin Hale (Founder of Wufoo), who spoke at ZURBsoapbox. He claims that the very first customer experience is like being on a first date

So if you’re on a first date and you find out that your date starts picking their nose in the beginning of dinner, there will be no second date. But if you’ve been married to someone for years and they start digging for gold, you don’t immediately divorce them right away. There is something different once the relationship is already established.

I am sure most of you can see the truth in that statement. So now that we know, creating an amazing first experience for the user is paramount, let us think about how to go about doing it. Your website design as a whole will leave a lasting impression on your visitor. You can use some small UI changes to your existing site, to make a lasting impression.

When you think about it some of the most common ways the visitor interacts with you on your website will be via the contact form to get in touch with you, the login box to register an account on your site, or when they sign up for your newsletter to know when you will launch you awesome product, etc.

So it’s very likely they will end up using a form or some sort of input field like a text box. So today we are going to look at some really cool form and input field designs that will help you WOW your customers.

Innovative Form Design

Single-Field Form Interface

Instead of showing 6 fields that the user has to interact with, this minimal form interface only shows one text input at a time, without any clutter or distractions. There are subtle visual cues like the tiny progress bar and a number that indicates the number of input fields to be completed. One drawback is that, there is no way to go back to a previous entry. Check out the tutorial on codrops to see how to create this minimal form interface.

Image for post
Image for post
Single-Field Form Interface

Natural Language Form Interface

How cool would it be to use a sentence where some words act as dropdown selector and text inputs fields to grab info from your users? This awesome natural language form tutorial will give you all the information you need to set one up on your website.

Image for post
Image for post
Natural Language Form Interface

Fullscreen Form Interface

This experimental fullscreen form gives visitors a distraction-free form filling experience.

Image for post
Image for post
Fullscreen Form Interface

Email Sign Up Form Design

Here are some pretty sweet email subscription form animations that will put a smile on your customer’s face.

Studio Kit ( domain no longer active )

Image for post
Image for post
Studio Kit Sign Up Form

Bart Nederveen’s Design

Image for post
Image for post
Bart Nederveen Sign Up Form

Daniil Vnoutchkov’s Design

Image for post
Image for post
Daniil Vnoutchkov Sign Up Form

Envelope Email Form Animation

Image for post
Image for post
Envelope Email Form Animation

Patrick Rogan’s Email Sign Up Design

Image for post
Image for post
Patrick Rogan Email Sign Up Design

Julia Khusainova’s Email Sign Up Design

Image for post
Image for post
Julia Khusainova Sign Up Form

Morphing Button to Subscribe Form

Image for post
Image for post
Subscribe Button Form Animation

Login / Sign Up Form Design

Snapwire Signup Form Design

These guys encourage their visitors to request an early access by providing an Instagram account during signup.

Image for post
Image for post
Snapwire Signup Form Design

Farruh Tillaev’s Login Form Design

Image for post
Image for post
Farruh Tillaev Login Form Design

Morphing Button to Login/Signup Form

Image for post
Image for post
Login SignUp Morphing Buttons

Glenn Hitchcock’s Login Form Design

Image for post
Image for post
Glenn Hitchcock Login Form Design

Colin Garven’s Login Form Design

Image for post
Image for post
Colin Garven Login Form Design

Logoswish’s Login Form Design

Image for post
Image for post
Logoswish Login Form Design

Credit Card Sign Up Form Design

Alexey Golovanov’s Credit Card Form Design

This credit card form uses a visual representation of the card to obtain the users input from the 16 digit code, expiry date and CVV code.

Image for post
Image for post
Alexey Golovanov Credit Card Form Design

Single-Field Credit Card Form Design

this is a simple form that will allow your visitor to add the credit card number and other important card related data all from the single field.

Image for post
Image for post
Single-Field Credit Card Form Design

Payment Form Design

Image for post
Image for post
Payment Form Design

Payment Card Design

Image for post
Image for post
Skeuocard CC Form Design

Card by Jesse Pollak

Image for post
Image for post
Card by Jesse Pollak
Image for post
Image for post

You can find more helpful code snippet on CodeMyUI.com

I hope you guys like these examples. If you have come across other cool ways in which we can design or animate form please do let me know about it, so that I can update this list.

Image for post
Image for post

Published in #SWLH (Startups, Wanderlust, and Life Hacking)

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

The Startup

Medium's largest active publication, followed by +680K people. Follow to join our community.

Sign up for Top Stories

By The Startup

A newsletter that delivers The Startup's most popular stories to your inbox once a month. Take a look

By signing up, you will create a Medium account if you don’t already have one.

Check your inbox
Click the link Medium sent to to verify your email address.

Saijo George

Written by

Introvert pretending to be an extrovert. On #ProductHunt top 100 maker list. @envato alumni, #SEO Strategy Director @supplesolutions 🌍https://saijogeorge.com

The Startup

Medium's largest active publication, followed by +680K people. Follow to join our community.

Saijo George

Written by

Introvert pretending to be an extrovert. On #ProductHunt top 100 maker list. @envato alumni, #SEO Strategy Director @supplesolutions 🌍https://saijogeorge.com

The Startup

Medium's largest active publication, followed by +680K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store