20 awesome form examples to get you inspired (2023)

Design

April 23, 2019

20 awesome form examples to get you inspired (1)

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

20 awesome form examples to get you inspired (2)

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.

20 awesome form examples to get you inspired (3)

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.

20 awesome form examples to get you inspired (4)

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

2. Surveys and questionnaires examples

(Video) 10 Best Popup Message Examples To Get Inspired (2022)

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.

20 awesome form examples to get you inspired (5)

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.

20 awesome form examples to get you inspired (6)

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

20 awesome form examples to get you inspired (7)

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!

20 awesome form examples to get you inspired (8)

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.

20 awesome form examples to get you inspired (9)

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.

20 awesome form examples to get you inspired (10)

Original design made by Anna Wangler on Dribble.

(Video) The first 20 hours -- how to learn anything | Josh Kaufman | TEDxCSU

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.

20 awesome form examples to get you inspired (11)

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.

20 awesome form examples to get you inspired (12)

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

20 awesome form examples to get you inspired (14)

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.

20 awesome form examples to get you inspired (15)

Original design by Matthieu Souteyrand on Dribbble.

(Video) How to Achieve Your Most Ambitious Goals | Stephen Duneier | TEDxTucson

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.

20 awesome form examples to get you inspired (16)

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.

20 awesome form examples to get you inspired (17)

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.

20 awesome form examples to get you inspired (18)

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.

20 awesome form examples to get you inspired (19)

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

20 awesome form examples to get you inspired (21)

4. Sign up and sign in examples

(Video) Start with why -- how great leaders inspire action | Simon Sinek | TEDxPugetSound

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?

20 awesome form examples to get you inspired (22)

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.

20 awesome form examples to get you inspired (23)

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!

20 awesome form examples to get you inspired (24)

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

Rebeka CostaIn-house SEO manager, usability enthusiast and patron of all sleep-deprived designers

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? ›

Here are a few secrets to ensure you are designing a form that users actually fill out.
  1. Make It Easy to Scan and Read. ...
  2. Consider Floating Labels. ...
  3. Use Field Masks. ...
  4. Make Forms Keyboard-Friendly. ...
  5. Opt for Vertical Format. ...
  6. Limit Typing. ...
  7. Keep It Short and Sweet.
Mar 8, 2017

What is a well designed form? ›

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? ›

You can use the following CSS properties to make this input field more attractive.
  1. Padding (to add inner spacing)
  2. Margin (to add a margin around the input field)
  3. Border.
  4. Box shadow.
  5. Border radius.
  6. Width.
  7. Font.
Mar 23, 2020

What are traits of a good form? ›

The 10 Commandments of Good Form Design on the Web
  • 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.
May 22, 2015

What are the 4 types of form in design? ›

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? ›

The seven sections of a form are:
  • 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? ›

What Are the 7 Different Forms of Art?
  • Painting.
  • Sculpture.
  • Literature.
  • Architecture.
  • Cinema.
  • Music.
  • Theater.
Apr 18, 2021

What are simple forms? ›

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.

Videos

1. The 3 Magic Ingredients of Amazing Presentations | Phil WAKNELL | TEDxSaclay
(TEDx Talks)
2. Technical Writing Examples to Inspire You
(Technical Writer HQ)
3. University of Texas at Austin 2014 Commencement Address - Admiral William H. McRaven
(Texas Exes)
4. How to Get Your Brain to Focus | Chris Bailey | TEDxManchester
(TEDx Talks)
5. Have you seen this man on your #fyp page who people claim is 163-years-old? | ITV News
(ITV News)
6. The four-letter code to selling anything | Derek Thompson | TEDxBinghamtonUniversity
(TEDx Talks)
Top Articles
Latest Posts
Article information

Author: Dean Jakubowski Ret

Last Updated: 03/30/2023

Views: 5856

Rating: 5 / 5 (70 voted)

Reviews: 93% of readers found this page helpful

Author information

Name: Dean Jakubowski Ret

Birthday: 1996-05-10

Address: Apt. 425 4346 Santiago Islands, Shariside, AK 38830-1874

Phone: +96313309894162

Job: Legacy Sales Designer

Hobby: Baseball, Wood carving, Candle making, Jigsaw puzzles, Lacemaking, Parkour, Drawing

Introduction: My name is Dean Jakubowski Ret, I am a enthusiastic, friendly, homely, handsome, zealous, brainy, elegant person who loves writing and wants to share my knowledge and understanding with you.