Creating Mobile-Friendly Contact Forms

Web forms are important, as they are used to subscribe, sign up for an account, and make an online purchase. There are many forms out there, but sites are particular about one type of form – the contact form.

Contact forms are convenient in that they allow site visitors to interact with you, making their site experience much more satisfying. This is why many developers take their time to build the most appropriate design for their contact forms, and make it responsive when viewed in a mobile format.

How can you make your mobile contact forms adaptive and user-friendly? Here are some tips:

Use HTML5. Input types using HTML5 are versatile enough to trigger the suitable keyboard interface without sacrificing response time. Most Web browsers support HTML5, and offer multiple native controls. This is useful for mobile browsers since they can switch to different types of keyboard interfaces for different data input.

Aesthetics: Make it personal. The contact form is used by visitors to get in touch with you. The text you use for the headers, field forms, even the foot notes, will send signals about your intention to the visitors. Make it appear personal, implying that you can’t wait for people to contact you and share your thoughts with them.

No to uninteresting designs. Often, the first impression made by a contact form can be enough to make people continue browsing or leave your site. The look and overall sense of how your contact form was set up will make people take second glances. Make the style and design inviting, and don’t use neutral and dark colors on an impersonal design, as this will most likely scare off visitors and make your forms boring.

Adapt tap-to-call links. Most mobile browsers now detect phone numbers on pages and automatically convert them to links. This is useful for visitors, especially on a mobile site, where they can just tap once to make the call without exiting the browser. However, the auto-detection feature is not always reliable for mobile browsers, and more often than not, detects digits that are not telephone numbers. You can manually specify phone links on your Web pages, so you can control where and how they appear.

Keep the forms concise. Do not ask for random information, as this will often make your site's visitors either frustrated, suspicious, or both. Either way, it can be enough to make users leave your site. Also, asking for information you don’t really need makes the styling more complex and will clutter your database.

No captchas, please. Although it helps weed out automated bot submissions, this feature will more than likely stop the interaction process. If you need to make sure that it’s a human on the other end, use captchas sparingly, like when entering personal information – you don’t need to populate every form field with captchas.

Design your form together with a team page. Present you and your team together with your contact form. This will make the visitor get the idea that they are interacting with people, and not with a system, when they submit their forms. It’s also neat to add text to your contact forms to make it much more personal.