20 awesome form examples to get you inspired

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? Let’s open our favorite wireframe tool and dive deep!

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!

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

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.

By the way, you can also check out our post on how to design and validate a form prototype.

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.

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”.

You can also find more inspiration with our list of awesome research survey examples.

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.

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

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.

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.

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.

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.

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!

This beauty was made by Jordan Hughes for Milkinside.

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.

Awesome form example made by Yifan Ding n Dribbble.

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.

Original design made by Anna Wangler on Dribble.

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 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.

Awesome form by Matt Koziorowski for EL Pasion and Hotjar.

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.

Form example brought to you by Jeet on Dribbble.

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.

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!

Form design by Olga for Netrix in Aao Milo.

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.

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.

Original design by Matthieu Souteyrand on Dribbble.

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.

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.

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 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.

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.

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.

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.

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.

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.

Form design by JD on Dribbble.

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.

Design by Hasse Finderup on Dribbble.

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.

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?

Original design by Sergej Nawalnew on Dribbble.

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.

Form design by Sayem Ahmed for Team IronSketch on Dribbble.

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.

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!

Awesome form design by Valeri Torf for Solvers on Dribbble.

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.

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!