Keep an eye on your inbox!
Hmm, that didn't work. Try again?

4 inspirational form design patterns

Discover a few unique ways of designing forms that engage and convert.

Mat Vogels
November 9, 2015
Inspiration

Whether you’re running a survey, giving potential clients a way to get in touch, or encouraging newsletter subscriptions, forms play a crucial role in your website and business. 

Despite that importance, many web forms turn out incredibly boring, little more than a series of empty white boxes consuming space on your site.

Forms don’t have to be boring.

A well-designed form adds value to the overall design, without taking away from its functionality. And they perform better as well. Salesforce’s new UI design framework, Lightning, includes small form design changes that can boost form conversion.

Here are a few form design patterns I’ve found across the web to help inspire your next webform design.

1. Box-less forms

An easy way to simplify your form design is by swapping out the full box for a simple underline or in some cases, no boxes or lines at all. The end result feels much cleaner and more pleasant to use.

Using underlines instead of boxes in form design
The Webflow template OurApp uses underlines to shape the form and indicate focus.
Input boxes appear on focus
The Webflow template Left Handed avoids input boxes until the user clicks in to start typing.

2. Animated forms

Sometimes, a unique form design isn’t so much about how it looks, but how it’s presented. The age of stuffing your form at the bottom of your website is over. Now, with unique web interactions, you can animate your form in fun and interesting ways, and let people access it from anywhere on the page.

Slide in from the bottom or side

A pop-up form accessed through a fixed button lets people access the form from anywhere.
T‍he Essential Webflow template features a sticky Contact button that animates in a form on click.

This Webflow template lets people open the contact form at any time, without negatively impacting the overall design. By sticking a Contact button to the bottom of the page, you can let people get in touch whenever they’re ready.

The Webflow template Mill comes with a contact form that slides in from the right on click.

You can also let people access your form through a slide-out menu. Instead of whisking your users away to a contact page, bring the form to them by sliding it in from the side of the screen. This is a great pattern for situations where someone might want to reference content on the page while they’re reaching out.

Full-screen form

A great way to bring focus to your form is by eliminating distractions. Instead of packing your form into an already-busy part of your site (like the footer), try adding an interaction to make it full-screen (like we do with our Subscribe button here on the blog).

This helps your user enter the info you want in a clear and focused way, so it’s easier for them to finish up.

The Webflow Blog uses a full-screen takeover form for subscriptions.
We use a full-screen subscription form right here on our blog (hint, hint).

3. Natural-language forms

A great trend I’ve seen lately are forms that rely on natural language use. In the example below, filling out the form feels more like doing a Mad Libs than something you’d find on a contact page. Designing your form this way creates a conversational context, easing understanding without leaning on the traditional form label plus input box pattern.

Not only does it feel original and well-designed, but also more natural.

Using a natural language form design pattern makes filling out a form feel more like a conversation
This form design from Codrops uses a conversational pattern to keep people on task. 

4. Step-by-step (procedural) form design

Sometimes the best way to fill out a form is one step at a time. By letting people add information in easy-to-understand pieces, you’re encouraging forward momentum and delivering a more focused experience than simply displaying all the fields at once.

The example below uses both a natural language form and step-by-step process to guide people in entering information. This is a great option for situations where a person’s answers impact upcoming questions. As you can see in the Oscar Health Insurance form, answering “me and my spouse” triggers an opportunity for the user to give the spouse’s age.

A procedural and conversational form makes getting an insurance quote feel easy.
Oscar Health Insurance combines conversational and procedural form design to make a complex process feel easy and straightforward.

Sometimes, a simple step-by-step process is enough. But sometimes, you’ll want to show how many steps it takes to complete the form, so a user doesn’t feel lost in the process itself. Here are two examples of unique forms that do this very well.

A step-by-step form with progress indicators from Codrops.
T‍his step-by-step form from Codrops keeps you focused while conveying a sense of progress.
Another combination of conversational and procedural form design from Gavin Simpson

What’d we miss?

You’ve probably come across some interesting form designs yourself. If so, be sure to share them on Twitter!

5. Zestful

Zestful helps companies book fun, unique, and local group activities available through their platform. You might expect a site like theirs to scream FUN! Well they don’t disappoint. Their upbeat vibe supports their mission to help teams socialize outside the office without the usual headache that comes with event planning.

6. Petal

Petal is a younger company, but they stand out because design pervades the focus and direction of their marketing. Even their product (a new, no-fees credit card) features a stunning and unique design. Their website follows suit — it’s a breath of fresh air — with beautiful colors, generous whitespace, and clear, concise copy.

‍Petal’s website supports their mission of providing easy credit access by making credit feel simple, approachable, and maybe a bit fun too.

7. BankMobile

BankMobile’s website makes banking look hip and modern, as hard as that might sound. With bold colors, clearly presented information and a consistent feel throughout the site, we especially appreciate the unique horizontal scrolling section they use to walk through the UI on their mobile app.

8. Bonsai

Freelancers are constantly on the lookout for new tools and products to make managing their business easier — Bonsai focuses on checking as many of those boxes as possible with tools that range from invoicing and payments to proposals and contracts. With so many features in their platform, their marketing site needs to effectively explain and differentiate how their products can help freelancers. A dedicated page for each one does just that.

‍Bonsai provides detailed product overviews with dedicated landing pages for all of their major features.

Bonsai gets bonus points for creating an impressive resource hub for freelancers. They share survey data about rates, best tools for freelancers, and the top places to find new work.

‍Bonus points for great, useful content for their freelance audience.

9. AltSchool

As an education partner, AltSchool has an important story and mission that underpins their work. Their website does a great job sharing their story with photography, copy, and a consistently communicated mission: to enable all children to reach their potential.

AltSchool uses photography and to bring their mission as educators to the fore.‍copy

Ready to build a business site of your own but not sure where to start? We’ve got you covered. Check out our full business site rebuild course on Webflow University.

Did we miss any standouts? Let us know in the comments!

Mat Vogels

Mat is a web creator and evangelist at Webflow. Follow me at @matvogels.

You might also like...

More

Join the conversation

Get free web design insights...

In your inbox, every other week. And unsubscribe in a click, if you want.

Keep an eye on your inbox!
Hmm, something went wrong. Try again?

What's Webflow?

Try it for free

Designer

Bring your wildest web designs — and client sites — to life, without writing code.

CMS

Build completely custom content structures for client sites and prototypes.

Hosting

World-class web hosting at your fingertips, without all the usual hassles.