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!

What else should I consider?

While speed, reliability, scalability, and security should be your chief concerns, Webflow offers a host (pun sheepishly intended) of other features that have a significant impact on SEO and performance, and may not be offered by most hosting services.

HTTP/2

2015 saw the release of the first new Hypertext Transfer Protocol since 1999: HTTP/2.

This new standard promises faster websites across the web — but not all hosting platforms support it yet. Because Google has always cared about page speed, there’s a good chance that HTTP/2 will become a component of their ranking algorithm soon.

Here are some benefits of HTTP/2 support/compatibility:

  • Multiplexing: Your browser can receive requests over multiple connections, not just one. Think of it like switching from a one-lane road to an interstate.
  • Header compression: Your browser loads the top of your pages first, before the rest of the page, which means your site visitors see content faster. On mobile especially, this is a big improvement.

Webflow’s hosting has been HTTP/2 compliant for a couple years now, unlike services out there. (And even hosts who do offer it typically only do so on higher-tier packages.)

Today, all assets published to a Webflow site are served via HTTP/2 — increasing page load performance when a large number of assets need to be downloaded.

Other powerful features of Webflow hosting

Everything above is more or less essential, but there are many other features that can make managing your website a lot easier and more convenient. These include:

  • Automatic backups and version control (you can also save and name a site version whenever you’d like with the key combo Command + Shift + S on Mac or Control + Shift + S on Windows)
  • Site-wide and per-page password protection
  • Simple publishing workflows
  • Responsive images
  • Protection against distributed denial of service (DDoS) attacks

On top of these features, Webflow hosting includes:

  • Form submissions (manage lead gen and let us store your data for you). It’s like Wufoo, but built into Webflow!
  • SEO and social tools: manage OpenGraph and SEO meta tags in one convenient interface. Easily combine it with the CMS to automate your metadata optimization.
  • Dynamic embeds: integrate Webflow CMS with Shopify for ecommerce, SoundCloud for music, Eventbrite for events, and anything else that uses custom code embeds.

Webflow combines all these elements in a first-class global hosting infrastructure that’s available at the click of a button. This means that when you publish with Webflow, your site’s files and assets are published across the globe and immediately ready for any amount of traffic, from any location.

Want to know how much we believe in Webflow hosting?

We put a lot of thought and effort into making Webflow hosting one the the best hosting services out there. We’ve seen Webflow-using businesses like Kisi grow their organic traffic by over 300%, while also supporting thousands of requests per second for businesses like Eventbrite.

In fact, when Eventbrite launched their Amstel Live festival page with Webflow, they received over 10,000 requests a second — resulting in over 3,000,000 page views in just one hour. Webflow hosting was able to handle it without a hitch.

But above all, we believe in our hosting platform so much so that we use it for our own websites, which see hundreds of thousands of visitors from around the globe every day, and have seen nearly perfect performance over the last year.

Mat Vogels

I'm a web creator and Webflow evangelist. Follow me @matvogels.

You might also like...

More

Join the conversation

What's Webflow?

Try it for free
Designer

Designer

The power of CSS, HTML, and JavaScript in a visual canvas.

Interactions

Interactions

Build website interactions and animations visually.

CMS

CMS

Define your own content structure, and design with real data.

Ecommerce

Ecommerce

Goodbye templates and code — design your store visually.

Editor

Editor

Edit and update site content right on the page.

Hosting

Hosting

Set up lightning-fast managed hosting in just a few clicks.