How often on average are you turned away from filling out an online contact form because it is dauntingly long or too difficult to navigate from field-to-field?
The percentage of visits from mobile devices instead of desktop has been growing marginally in the last few years. Mobile contact forms are crucial assets that benefit organizations greatly by bolstering communication with members and stakeholders. However, mobile design can be tricky to implement effectively. With less screen space to work with, how do you design a form that captures all the details your clients would like to collect? The fact of the matter is, you might not be able to. Instead, you’ll have to look at ways to do more with less. Luckily, the good news is that simplicity is the key to success when designing an online form that you'd like to work well for mobile users.
Even if all a form does is collect a name, email, and phone number for someone interested in learning more about a service, the digital collection of that data ensures your clients won’t lose track of leads or capture details incorrectly when writing them by hand. And when forms collect more than that (say, details about an issue they’re experiencing with the website or product), your clients can better prepare themselves for a possibly stressful encounter.
Remember, when too many unnecessary or optional fields are shown, a few things can happen:
Visitors will be frustrated with the extra time spent reading each label, deciding whether or not it’s necessary, and then tabbing over to the next one.
Visitors will give up before they ever get started because the length of the form alone is daunting.
Visitors will be confused by some of the fields, wondering what they’re for and trying to figure out the answer to them.
A few of our tips to bear in mind:
Labels: be careful with labels, hints, and error messages that appear within them. Just because you make a form faster to get through space-wise doesn’t mean the instructive text won’t cause friction.
Keep it simple: Merge form fields that you would traditionally break up into multiple parts. (i.e. first name, last name) and stack everything vertically so that you do not lose the hierarchy of your information when a form is compressed down to a mobile-display.
Multiple Pages: In cases when you have a lengthy contact form you want to put on mobile, you have to think of ways to keep it from appearing overwhelmingly long by creating a multi-page form. A handy progress bar at the top or bottom of the form gives users a clear picture of how much more is left to fill out, and they appreciate that.