Forms design: gather data and increase conversion - Chapter 5

20 awesome form examples to get you inspired

April 23, 2019
header image for blog post on awesome form examples to get you inspired

Getting users to complete a sign up form is no easy task. In this post, we take a look at 20 form examples that did it right.

Forms are tricky territory in user experience design. After all, it’s tough to design something that has users sighing at its mere sight.

People just don’t enjoy filling out forms. The upside of this conundrum is that most designers tend to be problem-solvers – which makes form design an interesting challenge. Designers have to figure out a way to encourage people to fill them out, or risk users abandoning the form halfway.

Unfortunately, having users not submit the information via the form means two crucial things that never fail to give UX designers the chills: low conversion rates and a broadly failed design. But while there isn’t a one-size-fits-all approach to good form design, having solid examples that managed to hit the nail in the head can’t hurt, right?

We decided to get a few form examples that achieved the tough challenge of offering users a good experience. In this post, you’ll see exactly why these form examples work and what tactics were used to improve the user experience that they offer. Let’s take a look!

10 web form examples that you’ll love (and users won’t hate)

1. Contact sheets examples

Contact sheets are the in the frontline of communication between entities and the public – but they come with their own tricks and challenges.

Start prototyping web and mobile forms with Justinmind
Download Free

While they tend to be short and simple, contact forms can be the path for leads and new clients who want to know more – or they can be a way for current clients to seek support. This means that contact forms can be separated into two, depending on the goal each user has.

Yummygum

Dutch design studio Yummygum does a wonderful job at keeping their contact form simple and effective while also offering a good experience to users. This is a short form example, with only 3 entry fields and very limited visual elements. As a consequence, there is little distraction from the entry fields – unless you count the witty and light-hearted copy.

contact form example from yummygum

We here at Justinmind love that this contact form example has placeholder text that doesn’t disappear once the user clicks the entry field – allowing the user to double check if need be. Under the message field, a single button with descriptive microcopy: “Send inquiry”.

Omada Health

Health software Omada Health has done a wonderful job at achieving a functional contact form. This is one of the few form examples on this list that manages to separate data with such ease – while respecting all the form design best practices out there.

form example of contact fields from omada

All 3 forms count on labels, placeholders, inline validation, masks and descriptive microcopy. What’s not to love?

2. Surveys and questionnaires examples

Surveys and questionnaires are a great way to carry out research online. The main goal these form examples have, like all surveys, is to gather as much trustworthy data as possible. This data will later be analysed and put into a report, to help with business decision-making.

Questionnaire refers to the form that gathers data via written questions. In contrast, survey refers to the gathering of data, analysing it, reporting it and drawing conclusions from the findings.

Snappet

This form example by Ricardo de Zoete for Snappet is a great way to showcase the bold use of color while still leaving plenty of empty space for eye relief. We love that the form was broken up into different screens, and that the user can see on which screen they are at any given moment.

form example of satisfaction survey

Braintree

No muss, no fuss. This satisfaction survey form example, from Braintree, shows us a form can still be efficient while not offering visual distractions. With questions that provide visual choices in the answers, users don’t have to spend time typing but can answer quickly and instinctively.

customer satisfaction form example from braintree
Braintree also has a great article that tells us more about how they came up with the form, and how they decided on the specifics. Check it out: How We Designed Our Developer Experience Survey.

3. Purchases, bookings and checkouts examples

These form examples all share the great characteristic of being to the point and easy to understand. When it comes to selling online, the booking or check out form is crucial – and when done poorly, can have disastrous consequences on conversion and profit. The key in these form examples is to decrease the friction users experience as much as possible.

Booking website

We love the use of space in this form. It’s interactiveness works to not only make it more fun but also to break the form up into several steps – which requires less cognitive effort from the user. The use of color adds a pop and contributes to a clear visual identity.  A clear well-designed form example!

flight booking form example from dribbble

This beauty was made by Gleb Kuznetsov for Milkinside.

Upart

This is the perfect form example of how long forms can be broken up into digestible bits – with the animation adding a certain degree of gamification to the process. We particularly love the progress bar at the bottom and the success state screen. This is a form that users won’t mind filling out.

form example of booking process

Awesome form example made by Yifan Ding n Dribbble.

Credit Card Checkout

This form example is short and sweet – just like users want forms to be. You’ll notice the grouping of input fields and price breakdown, and a well-designed button under it all. We are fans of the descriptive microcopy in that button, in particular.

showcasing form example of effective checkout

Original design made by Anna Wangler on Dribble.

4. Sign up and sign in examples

Signup forms are the bread and butter of digital marketing and digital business, as a whole. They need to be simple, as to potentialize the number of users that go through with signing up or signing in. Signup forms, in particular, are usually accompanied by a value proposition – the pitch that motivates users to get onboard.

Hotjar

Hotjar doesn’t mess around when it comes to their web design – their website was also featured in our blog on post on Testimonial Examples You’ll Want to Copy. This time, its their signup form we are drooling over. With only two input fields, there’s nothing in the form to dissuade users. With the subtle but unmistakable field focus telling users exactly where they are.

form examples of registration screen - hotjar

Awesome form by Matt Koziorowski for EL Pasion and Hotjar.

Vendimation

Even though we love short forms, we know that a simple form with two entry fields sometimes is just not suitable. That’s when you gotta give extra importance to context, and try to make the whole process as easy as possible on the user. This form checks all the right boxes, offering placeholders, masks, field focus and descriptive copy.

login process form example by jeet

Form example brought to you by Jeet on Dribbble.

5. Event registrations example

Even registration forms need to present context to the user. This means that forms need to give out some key information about the event, but not enough as to confuse the user into questioning their interest on it.

AoMilo

This form example enjoys great use of space! Notice how not only the visuals, but the actual lines group the questions together according to their nature – a nice bit of context all users will appreciate. Even though it’s quite a long form, the user only rarely has to type the answer, making this form easy and quick to fill out. Wonderful!

event-registration-form-example

Form design by Olga for Netrix in Aao Milo.

10 Mobile app form examples for inspiration

1. Contact forms examples

Contact forms in mobile devices need to be even more simplified. You may want to consider adding further assistance elements, such as masks and limiters in order to get the idea across to users quickly.

Floating Contact Form

In this smooth contact form example, we can appreciate the placeholders that turn into floating labels once the user starts typing. This helps the user maintain clarity of what is being asked if they lose their train of thought. The use of minimalistic lines to separate the fields as well as the use of color in the text for field focus contribute to an awesome contact form.

mobile contact form example with floating labels

Original design by Matthieu Souteyrand on Dribbble.

Contact Form by Brent Waison

The use of mint green is almost dreamy in Waison’s design. This design goes to show you don’t need lots of visuals to create a form with a good experience.

mobile contact form example by waison

Sticking to the basics, this form example enjoys floating labels and a mask in the phone number field – which leaves little room for confusion. We also like the success statement screen, so users can walk away knowing they succeeded in sending their information.

2. Surveys and questionnaires examples

When it came to form examples of surveys that were done on mobile devices, we would usually have customer or employee satisfaction – and little else.

Questionnaires and surveys aren’t necessarily long, but they do present a bigger challenge for designers dealing with a small screen. Today, we know mobile devices are used for everything – which makes revisiting the idea of mobile surveys worth it.

Feedback Form

Feedback forms don’t have to give users an aneurysm. They can be quick and to the point, just like this form example. The use of smileys to convey the feeling users have regarding their experience is a great way to get information without making the user actually type.

feedback mobile form example by zahir patel

The suggestion field, as well as the radio buttons right below it don’t leave any room for doubt – just like that wonderful microcopy on the button! Form design by Zahir Patel on Dribbble.

Employee Survey

This form example works well to illustrate how complicated surveys can be broken up while still remaining easy for the user to follow. The smart interface accounts not just for the survey, but also for the possible event of users trying to reach HR, in case of confusion.

form example employee satisfaction in app

The percentages in the home screen are a great way to motivate users to get to the finish line, making this survey a wonderful design. Made by Amirul Hakim on Dribbble.

3. Purchases, bookings and checkouts examples

According to Statista’s reporting, a whopping 44% of all e-commerce purchases in the United States will be done in a mobile device. With such a big percentage of business done online, there has never been a more urgent time to get your mobile checkout process sorted. And that comes, of course, with the classic forms associated with a purchase.

Groceries App

We love that the designer behind this form example planned the use of space to a high standard. These two screens allocate space for delivery information, a summary of the order, payment method and even manages to include a promotion. The breadcrumbs style of navigation and descriptive copy in the buttons earn extra usability points.

mobile form example of checkout process

Form design by JD on Dribbble.

Checkout Page

This is a great form example of how simple design works. With a simple interface, there are no distractions and no room for doubt. We love that the action control button works by swipe, adding a bit of fun to a super straightforward checkout app form.

form example of checkout screen

Design by Hasse Finderup on Dribbble.

4. Sign up and sign in examples

While this can be said of all form examples on this list, signup and signin forms need to be quick. User’s don’t want to wait for several screens and touch points to access their account or to walk away knowing they’ve signed up successfully.

Sign in forms, especially, should provide the user with an option to log in using their social media accounts – or offer an autofill function that cuts down on the work the user needs to apply to the form.

Create an account

This form example makes quick work out of the signup process. Notice that very little information is required, paired with plenty of context. Users have inline validation and the possibility of seeing the password with an eye icon. We are sure users appreciate having those social media shortcuts – who doesn’t, right?

form example of sign in screen by sergej nawalnew

Original design by Sergej Nawalnew on Dribbble.

Hotel App Sign in

Sometimes, it’s better to go with a classic. This sign in and sign up app form examples show that users don’t need much from their sign in screen – they just need it to not be confusing. This sign in and sign up forms succeed in guiding users with inline validation and descriptive microcopy.

sign in and sign up screens in form examples by sayem ahmed

Form design by Sayem Ahmed for Team IronSketch on Dribbble.

5. Event registration examples

Registering for an event shouldn’t be complicated. Users can check for the important information and give out certain pieces of information when expressing their interest on the event – the mobile form needs to express the identity of the event while not stressing the user out.

You want to simplify as much as possible while respecting usability standards. That means you need to pack many different types of data (such as, choosing a date, number of people in your party…), into a small screen. Remember, usability first – looks, second.

Dubai Opera

We love how smooth the booking process is in this form example. The form checks all the boxes: validation, masks, stepped screens and a varied use of action controls – all done with a high factor of gamification. By the time the user gets to the success state, the effort they’d have put into the form would be minimal. Just wonderful!

form example of event registration, dubai opera

Awesome form design by Valeri Torf for Solvers on Dribbble.

Kaliin - AI Calendar

This app form example makes a complex thing easy for the user. With each entry field involving several taps but very little typing, the user can fill the form out without taking too long on any field in particular.

This design manages to get all the important details that come with creating an event, and breaks them into several screens, so the user is never confronted with a long list of questions.

Brought to you by Sasha Maxim for Tapptitude in Kaliin.

The Wrap Up: Inspiring Form Examples

These cool form examples are some of the many great and functional designs out there in the virtual wild. Not all forms are made equal, and your creativity will play a role as important as your attention to detail – usability is the name of the game here.

Hopefully, these form examples will get you inspired to get the ball rolling in your next form!

PROTOTYPE · COMMUNICATE · VALIDATE
ALL-IN-ONE PROTOTYPING TOOL FOR WEB AND MOBILE FORMS
Rebeca Costa
In-house writer, usability enthusiast and patron of all sleep-deprived designers