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

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.

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.