How to make your contact forms mobile friendly

Default avatar.
March 19, 2013
How to make your contact forms mobile friendly.

ThumbnailGiven the rise in mobile web usage year on year, there is now an increased focus on making websites more responsive, adaptive and user-friendly for visitors on small screens. One key area that is often overlooked and that could easily lead to a heap of frustration is the contact form. Whether a user is logging into a website, part way through a sign-up process or in the final stages of completing an online order, good usability and a high-quality experience on mobile are key to a successful outcome.

Many simple HTML and CSS practices will make your contact forms more user-friendly and elegant for visitors on mobile devices.

Style form inputs for easier touch control

Applying touch-friendly CSS styling to form elements will make inputs, buttons and controls a much nicer experience for touchscreen users.

Form input fields will benefit from large touch target areas:

input styled

input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel] {
-webkit-appearance: none; -moz-appearance: none;
display: block;
margin: 0;
width: 100%; height: 40px;
line-height: 40px; font-size: 17px;
border: 1px solid #bbb;
}

Other forms of input control would also easily benefit from custom CSS styling:

Styled form controls

Checkboxes benefit from being made easier to tap:

input[type=checkbox] {
width: 44px; height: 44px;
-webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px;
border: 1px solid #bbb;
}

Likewise, button elements can be styled and given special treatment:

button[type=submit] {
-webkit-appearance: none; -moz-appearance: none;
display: block;
margin: 1.5em 0;
font-size: 1em; line-height: 2.5em;
color: #333;
font-weight: bold;
height: 2.5em; width: 100%;
background: #fdfdfd; background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe)); background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);
border: 1px solid #bbb;
-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;
}

Even less common input types, such as range sliders, would benefit from additional CSS styling:

input[type=range] {
width: 100%;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 44px; height: 44px;
background: #fdfdfd; background: -moz-linear-gradient(top, #fdfdfd 0%, #bebebe 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(100%,#bebebe)); background: -webkit-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -o-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: -ms-linear-gradient(top, #fdfdfd 0%,#bebebe 100%); background: linear-gradient(to bottom, #fdfdfd 0%,#bebebe 100%);
border: 1px solid #bbb;
-webkit-border-radius: 22px; -moz-border-radius: 22px; border-radius: 22px;
}

Use HTML5 input types to trigger the appropriate keyboard

HTML5 offers a range of input types to aid the user experience. Some web browsers now offer multiple native controls, depending on the input type selected. This is especially useful for mobile browsers, some of which have different on-screen keyboards for different forms of data.

Here’s how the various soft keyboards appear on the iPhone (iOS 6), depending on the input type specified:

<label for="website">Website:</label> <input type="url" name="website" placeholder="www.yourwebsite.com" /> 

URL keyboard

<label for="tel">Tel:</label> <input type="tel" name="tel" placeholder="Your telephone number" /> 

Tel keyboard

<label for="email">Email:</label> <input type="email" name="email" placeholder="you@yourwebsite.com" /> 

Email keyboard

<label for="time">Time:</label> <input type="time" name="time" placeholder="9:00 AM" /> 

Time picker

<label for="date">Date:</label> <input type="date" name="date" placeholder="DD/MM/YYYY" /> 

Date picker

Note in these examples that we are also specifying placeholder text, using the placeholder attribute. This enables us to show the user an example of the type of data they are expected to enter in a particular field.

Style tap-to-call telephone links

Some mobile browsers try to detect telephone numbers on web pages and convert them automatically to tappable links. This behavior is useful for visitors, but unfortunately auto-detection is not always reliable, and browsers will accidentally target digits that are not actually phone numbers. The links can also be difficult to tap, depending on the styling applied to them.

Fortunately, this auto-detect behavior can be disabled on both iOS and Android devices by inserting the following element in the <head> element of the web page:

<meta name="format-detection" content="telephone=no" /> 

This enables you to manually specify telephone links on your web pages, giving you much greater control over where they appear and how they look:

Tel: <a href="tel:14085555555">1 408 555 5555</a> 

You can style a telephone link using the following CSS selector:

a[href^='tel:']:link, a[href^='tel:']:visited {
color: #333;
font-weight: bold;
text-decoration: underline;
}
a[href^='tel:']:hover, a[href^='tel:']:active {
text-decoration: none;
}

The only downside to this manual approach is that desktop visitors will also be able to see these telephone links but won’t be able to activate them. One way around this is to apply tel link styling only to small viewports, using a CSS media query:

/* unstyled tel links as default */
a[href^='tel:']:link, a[href^='tel:']:visited {
color: #6f757c;
font-weight: normal;
text-decoration: none;
}
a[href^='tel:']:hover, a[href^='tel:']:active {
color: #6f757c;
text-decoration: none;
}

/* styled tel links for small viewports */
@media screen and (max-width: 600px) {
a[href^='tel:']:link, a[href^='tel:']:visited {
color: #333;
font-weight: bold;
text-decoration: underline;
}
a[href^='tel:']:hover, a[href^='tel:']:active {
color: #333;
text-decoration: none;
}
}

Control auto-correct and capitalization

iOS in particular has a habit of auto-correcting and capitalizing form input data. For some field types, this is very useful, but for others it can quickly cause frustration. For example, user names often mix letters and numbers. Fortunately, iOS allows you to control this behavior using the autocorrect and autocapitalize attributes:

<input type="text" name="username" autocorrect="off" autocapitalize="off" />

There are more configurable options for autocapitalize. You can also set the value to words, characters or sentences, but think carefully about where you apply these attributes.

<input type="text" name="first-name" autocapitalize="words" />
<input type="text" name="last-name" autocapitalize="words" />
<input type="text" name="state" autocapitalize="characters" />
<textarea name="comment" autocapitalize="sentences"></textarea>


A note on browser support

While many of the examples in this article highlight features on iOS Safari, some of the tips also apply to Android (depending on the browser version), as well as other mobile browsers. The good thing about HTML5 form features is that they progressively enhance. Browsers that support a feature will take advantage of it, while non-supporting browsers will generally just ignore it.

Do mobile sites demand mobile-friendly forms? What other tips would you add? Let us know in the comments.

Featured image/thumbnail, contact image via Shutterstock.

Alex Gibson

Alex Gibson is a freelance Front End Developer living in Newcastle upon Tyne, United Kingdom. He builds websites and apps that look and work great on mobiles, tablets and desktop web browsers. You can check out his work at alxgbsn.co.uk and follow him on Twitter.

Read Next

30 Most Exciting New Tools for Designers, 2023

As we near the end of 2023, we wanted to take a look back over all the tools we collected over the past year, to pick…

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…