How to create a mobile-friendly form

More and more people are using their mobile devices to browse the internet and complete tasks on the go. This includes filling out forms for customer feedback, taking an online quiz, making purchases, and so on. About 70% of respondents fill out a typeform on a mobile device.

Traditional forms designed for desktop respondents can be difficult to navigate and complete on a mobile device. Below you’ll find some tips on how to optimize the design of your form for smaller screens.

Design with mobile in mind

When creating your form, you have the option to switch to a mobile view in the Create panel. This will give you an idea of how your form will look on a mobile device.

If you’ve added an image to your question, you can select to have a certain layout on desktop devices and a different layout for mobile devices. In your question settings on the right side menu, select your preferred layouts for each device.

Select a font carefully. If a font is too thin, it may be difficult to read on a mobile device. Or if a font is too bold, it can overwhelm the mobile screen. When choosing your font, you can select the size of your text from small, medium, or large in your Theme’s settings.

Make your form short and simple

Keep in mind that people who respond to forms on a mobile device might be on the move or busy running around completing errands. Try to keep your question text short and not too complex. You don’t want people to start your form and think “Oh, this is something I’ll need to get my laptop out for”, because let’s face it, they’ll probably be less likely to complete it.

The same applies to ‌answer choices, as an excess of options can make it more challenging for respondents to make a decision. When using Multiple Choice, Dropdown, and Ranking questions, limit the answer choices to where the respondent doesn't have to scroll down to see all the options; the number of choices can vary between devices but the idea is to not overwhelm the screen. You can also try to keep the text for the options concise.

Test out the form

Before you send out your form, it’s important to do a practice run to make sure it’s working how you’ve intended it to. Test out your form as many times as you want with Preview mode.

Within Preview mode, you have the option to try your form in Mobile view to make sure it’s compatible with mobile devices.