Contact forms are a key component of many websites. While they are generally straightforward, you need to make sure that they are easy to use if you want to collect leads and stay in touch with your users. This is usually not a problem with office traffic, but using forms can be difficult if you are using a mobile device.

In this tutorial, we're going to talk a bit about the importance of designing mobile-friendly forms. Next, we'll walk you through five tips to make sure your forms work smoothly on mobile devices.

Let's get to work!

Why it's important for your forms to be mobile-friendly

Forms come in all shapes and sizes. Most often, you will be dealing with contact forms:

example of contact form.png

Signup (subscription) forms are also very popular as they allow you to collect emails and target them during campaigns:

target emails during campaigns.png

However, forms can be used for all kinds of other purposes. For example, you can collect information using an online survey or questionnaire , in which case you will need forms that allow users to enter responses.

In other words, forms are very versatile and almost all sites use forms in one way or another. Therefore, it is essential that your forms are easy to use (unless you want to provide a frustrating experience for your visitors).

Using forms from a desktop or laptop computer is usually very easy. You have a full mouse and keyboard, so selecting the field you want to use and entering data shouldn't be a problem. However, browsing the web from your smartphone or other compact device has complications.

When working with your fingers on a small screen, interacting with forms can sometimes be overwhelming due to poor design decisions. This is something you should avoid in your own designs. After all, if mobile users can't interact with your forms, you risk losing conversions, leads, or just annoying visitors.

It's also essential to understand that mobile traffic is now, if not more, important than desktop sources. In fact, mobile traffic has already overtaken the latter in recent years. This means that designing a mobile friendly website should be your main goal when starting a new project.

5 tips for designing easy-to-use mobile forms

Fortunately, designing mobile-friendly forms is not as difficult as you might imagine. In most cases, you just need to keep some fundamentals in mind and test your forms thoroughly before putting them into use. Let's talk about how to do it!

1. Delete all unnecessary sections

The more fields your form contains, the more difficult it will be to use on mobile. Indeed, the use of forms on mobile is simply more complicated. By reducing the number of fields or sections included in your forms, you can maximize your chances of visitors filling them out.

Here is a quick example of a Contact form with some additional fields that are not necessary on mobile:

fields not needed on mobile.png

In most cases, all you need for a great Contact form is a name, email and the body of the message you want to receive. Everything else depends on the type of website you are using and if you are trying to collect leads.

Ultimately, the fewer fields the form has, the easier it will be for mobile visitors to use them. After all, selecting a field using a touchscreen can be tricky, no matter how well designed, so as to minimize the number of hops users have to make.

Your goal at this point is to review existing forms on your site. Go through each of their sections and determine if you really need any additional fields other than the ones mentioned previously. If there is an unnecessary field, just delete it.

2. Use drop-down lists if possible

Most of us are comfortable typing on mobile devices and using touchscreens. However, texting a friend and filling out a Contact form are two very different experiences. With these, there's a good chance you'll get frustrated if you have to type in a lot of information.

One way to make life easier for your mobile visitor is to simplify the choices they have to make about the elements of your site. To give you an idea of ​​what we're talking about, let's take advantage of our previous example of Reservations restaurant:

make a reservation.png

To make a Reservations, you'll probably need to leave a name, email, phone  et  indicate a time, as well as the number of people present. There are two ways you can create a form field to validate a time of day. Reservations:

  1. Configure a field that accepts only numeric entries.
  2. Design a drop-down list including all available times for a reservation.

As you can imagine, the latter is more user-friendly for mobile users. With this approach, they don't need to enter numbers and they can just choose what works best for them from the options you include.

The idea for you to look at your forms and see if they include fields that you could replace with drop-down menus. This will not always be the case since you cannot use drop down menus to collect names or emails, but other options can be used.

Whatever their use case, you want to make sure that your drop-down menus include options that are easy to select from mobile devices. In other words, make the menu big enough that someone doesn't have to peck to pick the right option.

3. Make sure your submission buttons are easy to touch

This tip is quite simple, but still to be mentioned. Every form you design should include a way for users to confirm that they want to submit the data entered. In most cases, that means creating a submit button:

create a submit button.png

When using a regular computer, clicking a submit button is the most natural thing in the world. However, we've come across a few forms on mobile where it's much harder to press a button.

If your visitors cannot submit the information they entered in your forms, all your efforts will be wasted. Plus, nothing looks as unprofessional as a button Send  that does not work as expected.

To design better submission buttons for mobile, here are three tips to consider:

  1. Make sure they are big enough that you can easily tap on a mobile device.
  2. Do not place your buttons too close to other items so that users do not touch them properly.
  3. Highlight your buttons, for example using contrasting colors or creative typography.

On top of all of that, you'll also want to test your buttons before your site goes live. We'll go more in-depth on how to do this in a minute. For now, let's talk about performance.

4. Make sure your forms load quickly

We talk a lot about website performance in many of our articles and it's not because we need speed. The point is, most people don't like slow websites, which makes perfect sense.

With the speed of the internet faster, it can be difficult to wait for a website to load too long. Additionally, mobile internet speeds tend to vary much more than regular home connections. This means that your website will need to be highly optimized for mobile devices if you want to keep these users happy, as not all of them will have internet access (i.e. fast).

This particular tip can apply to your entire website, but it's also important for mobile pages displaying your forms. If these parts of your site are taking too long to load, you lose convertions and opportunities to connect with your visitors.

Typically, a website should take no more than two seconds to load. Once you get past this limit, bounce rates tend to increase dramatically which is terrible news for you, and given the nature of mobile browsing, it's best to keep this time as low as possible. .

With this in mind, there are many ways to improve the overall performance of your site. For example, you can upgrade to a better planaccommodation, use responsive theme optimized for speed and compress your images. Of course, these will help all users, but will be especially useful for those who use smaller devices.

5. Test your forms before publishing

Considering that forms are a key part of most websites, it makes sense that you test them thoroughly before you publish them. With WordPress, this process is fairly straightforward. You can go ahead and design specific pages to display your forms, and not publish them until you've tested them fully.

Of course, whichever plugin or theme you want to use is up to you (as long as it can help develop mobile sites). However, when it comes to the testing phase, we recommend that you keep it simple and use tools such as tools of development Chrome to do the work.

Let's go through a quick example. If you're using Chrome, go ahead and preview the page with the form you want to test. Then right click anywhere on this page and choose the option Inspect . Chrome will display a set of tools that you can use to review and edit the page's source code to the right and to the left, you can see a preview of its appearance from a mobile device:

An overview of Chrome development tools.

At the top of the screen, you can use a menu to switch between different resolutions. Chrome includes settings for several popular mobile devices, but you can also enter a custom resolution.

At this point, you should check the appearance and behavior of your contact form on multiple devices. Take the example below - the form works fine, but you can see that it doesn't fit as well as it should. Pay special attention to text and icons in particular, which are too close to the edge of the screen:

form design for mobile.png

One way to prevent this problem is to keep your forms simple, as we mentioned in the first tip. In the example below, the form uses multiple drop-down lists and requires only three fields. This makes it easy to use and, more importantly, the form is so simple that it has to be a perfect fit for all devices:

An example of a form without scaling problems.

If you have any issues with any of your forms, you obviously need to resolve them immediately. Otherwise, you risk alienating your mobile audience, which we try to avoid first!

Conclusion

Making sure your website is compatible with mobile devices is key to keeping traffic and not frustrating your visitors. Specifically, your forms should be easy to use on mobile devices if you don't want to miss out on receiving messages or collecting valuable leads.

When it comes to designing mobile-friendly forms, here are five tips to simplify your life:

  1. Delete all unnecessary sections.
  2. Use drop-down lists if possible.
  3. Make sure your submission buttons are easy to press.
  4. Make sure your forms load quickly.
  5. Test your forms before publishing them.