Design
April 23, 2019
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.
Design and Prototype Forms for web and mobile with Justinmind. It's Free!
Download Free
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!
You can find some more inspiration in our post on wireframe examples.
The types of form examples you'll find on this post
- 10 web form examples that you’ll love (and users won’t hate)
- 10 Mobile app form examples for inspiration
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.
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.
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.
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.
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.
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.
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.
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.
Design and Prototype Forms for web and mobile with Justinmind. It's Free!
Download Free
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!
This beauty was made by Jordan Hughes 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.
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.
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.
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.
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!
Form design by Olga for Netrix in Aao Milo.
Design and prototype Forms for web and mobile with Justinmind. It's Free!
Download Free
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.
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.
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.
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.
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.
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.
Design by Hasse Finderup on Dribbble.
Design and prototype Forms for web and mobile with Justinmind. It's Free!
Download Free
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?
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.
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!
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!
Design and prototype Forms for web and mobile with Justinmind. It's Free!
Download Free
FAQs
What are some examples of forms? ›
What are Examples of Forms? Forms are documents that collect information from one's clients, customers, and respondents. Some common examples of forms include forms for purchases, incident reports, hazards, quality control, contact tracing, and feedback gathering.
How do you make forms interesting? ›- Make It Easy to Scan and Read. ...
- Consider Floating Labels. ...
- Use Field Masks. ...
- Make Forms Keyboard-Friendly. ...
- Opt for Vertical Format. ...
- Limit Typing. ...
- Keep It Short and Sweet.
A well-designed form shows users that your brand is helpful, thoughtful, professional, tech-savvy, and enjoyable to work with. A poorly-designed form, on the other hand, may lead to page and website abandonment or a frustrated user and, therefore, a decrease in conversions and sales.
How many types of form designs are there? ›Forms are three dimensional, and there are two types: geometric (man-made) and natural (organic). A digital or physical form can be measured by height, width, and depth. A form can be created by combining shapes, and it can be enhanced by color or texture.
What are the 5 forms? ›All English verbs (except to be) have five forms: base, past tense, past participle, present participle, and third-person singular.
What are the 3 forms? ›Verbs: the three basic forms. Main verbs have three basic forms: the base form, the past form and the -ed form (sometimes called the '-ed participle'): base form: used as the infinitive form, with to or without to (Do you want to come with us? I can't leave now.)
How can I make my form more attractive? ›- Padding (to add inner spacing)
- Margin (to add a margin around the input field)
- Border.
- Box shadow.
- Border radius.
- Width.
- Font.
- Thou shalt provide clear, always visible labels for each field. ...
- Thou shalt use a big enough font size. ...
- Thou shalt provide easily tappable areas. ...
- Thou shalt size the input fields according to their expected input. ...
- Thou shalt not customize checkboxes and radio buttons.
The primary elements of form are points, lines, planes and volumes – each one growing from the other. A point is a position in space, a line is the extension of a point. A surface or plan, is the extension of a line.
What are the seven sections of a good form? ›- Heading.
- Identification and access.
- Instructions.
- Body.
- Signature and verification.
- Totals.
- Comments.
What is an example of form in writing? ›
FORM - is the name of the text type that the writer uses. For example, scripts, sonnets, novels etc. All of these are different text types that a writer can use. The form of a text is important because it indicates the writer's intentions, characters or key themes.
What are examples of forms in art? ›- Painting.
- Sculpture.
- Literature.
- Architecture.
- Cinema.
- Music.
- Theater.
The simple form of the verb is the main verb in the present tense and the past tense. simple form = main verb. Use do, does, or did with the simple form of the verb for questions and negatives.
What is an example of musical form? ›Music form definition is simply how the various parts of a song or piece are organized. A typical pop song, for example, has a very clear form: verse 1, chorus, verse 2, chorus, bridge, chorus.