4 Responsive Web Form Examples You’ll Want to Copy

Written by Sarah Quezada on October 13, 2014

Posted in Form Optimization, Mobile Forms

Forms have many more constraints on smartphones and tablets than on desktops. There are often miniature displays instead of oversized monitors, touchscreens rather than keyboards, and slower broadband connections in place of speedy WiFi.

In other words, your forms must be mobile-friendly.

Regardless of what you’re trying to collect—leads, sales, registrations or opinions on your boss’s hair color—it’s helpful to see examples of forms that respond well to various devices and screen sizes. Enter today’s list of well-designed, responsive forms you’ll want to mimic.

Check out these great forms for inspiration:

1. The University of Michigan’s Online Giving Form
Notice the lack of open text fields? When you’re asking for money, checkboxes, dropdowns and radio buttons work much better than questions that require long answers. This is true for any donation form, and is especially important if you hope to increase mobile giving.

Michigan_University 

2. Angie’s List Membership Form
An attractive, clean design that scales beautifully to mobile screens is guaranteed to increase conversions. This adaptability is especially important for a company whose revenue relies on the ability to obtain new members.

Angie's_List

3. BufferApp’s Email Signup Form
Buffer has famously scored more than 30,000 email subscribers. The number of fields included in their signup form? One. Depending on your industry, that may be all you need to build an audience receptive to your products or services. Smartphone users can easily opt in to your email list and start receiving lead-generating content. Then, once they get to know your brand a little better, you can start asking for more information.

BufferApp

4. Goose the Market’s Membership Form
This simple, clean design seemlessly scales to mobile screens. Users can easily fill out all fields and become paying subscribers. Conditional logic also ensures users see only the fields they need to complete, a few at a time.

 

Goose-the-Market

 

Let these examples inspire your online forms. Because when forms aren’t mobile responsive, they end up looking like this one below. Not exactly easy to fill out on an iPhone or Android!

 

CaliforniaDMV

How to Optimize Forms for Mobile
Here are some tips to keep in mind when designing forms for mobile devices:

  • Keep them short: The fewer the fields, the easier it’ll be to tap through a form while waiting in the checkout line or during a short lunch break.
  • Practice clarity: Succinct labels and descriptions will make it easier for mobile users to breeze through your forms.
  • Use above-the-fold space: When forms are high up on a webpage, your audience is more likely to see (and complete) them when scrolling on smaller screens and slower browsers. Many responsive websites push sidebar content below the fold or do not include it at all on mobile devices. Keep this fact in mind when deciding where to place your forms.

Did you know?
Formstack’s responsive forms automatically adjust for all mobile devices so they look great on any screen size. You can design them using a big monitor and they’ll be successful in the mobile world as well.