Powered by Blogger.

How to Make Online Forms More Mobile-Friendly

Monday, November 19, 2018


Over the years more and more people have taken to browsing the internet on mobile devices. In fact nowadays over half of online traffic consists of people on mobile devices, which is why it is important that any online forms you create are mobile-friendly.


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.
 

App of the Month - Magnett

Productivity App of the Month - QuillPal: A.I all-in-one

Game of the Month - Save the Forest

Game of the Month - Save the Forest
Plant Trees platformer

Social Networking App of the Month - HYEL

Finance App of the Month - Timelly Bills

Utility App of the Month - Fend

Subscribe and get the best apps

Enter your email address:

Delivered by FeedBurner