In order to make online forms more mobile-friendly there are
several steps that you can take – each of which will play an important part:
- Use responsive design
The most important difference
between desktops and mobile devices is the constraints on the screen size of
the latter. That is why all your online forms should use responsive design, and
their structure should adapt based on the width of the screen they’re being
viewed on.
- Place labels above fields
Placing labels beside the fields in
your form may look fine on desktops, but not on mobile devices. Even if the
rest of your design is responsive, the fact that the label is aligned
horizontally will cause the form to look crowded.
Instead of that you should always
place labels above the fields of your form, so that they are clearly visible
even on mobile devices.
- Avoid dropdown lists
As far as possible you should make
sure your online forms don’t contain any dropdown lists. On mobile devices such
lists aren’t ideal, and are troublesome to expand and scroll through.
Rather than a dropdown list, you
should try to use radio buttons wherever possible. Only use a list as a final
resort, when the number of items is large.
- Don’t split up fields
Not too long ago a common trend in
online forms was to split up fields to make them more specific. For example a
‘name’ field would be split into two: ‘first name’ and ‘last name’.
While there are situations where
splitting up fields can be useful for data segmentation, it isn’t very
mobile-friendly. Having more fields just increases the number of taps required
to complete the form – which isn’t ideal.
- Trigger the right keyboard
A nice touch to your online forms
would be to optimize them so that when a field is tapped the right keyboard
appears on-screen. For example a field that requires only numbers could bring
up the number-pad keyboard instead of the full keyboard.
While entirely optional, triggering the right keyboard is often
very much appreciated by users and provides a very strong hint to make the form
more intuitive.
As you may have noticed the one requirement to create
mobile-friendly online forms is that you need to be able to know how to make a
form in HTML. Strictly speaking that isn’t entirely true however, as there
are alternatives that you could use such as AidaForm for example.
At the end of the day you need to be able to customize the
structure and design of your form to make sure that it is mobile-friendly. So
long as you’re able to do that, you can apply the steps above to produce forms
that are optimized for users on mobile devices.