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="[email protected]" /> 

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

15 Best New Fonts, May 2024

In this month’s edition, there are lots of historically-inspired typefaces, more of the growing trend for French…

20 Best New Websites, May 2024

Welcome to May’s compilation of the best sites on the web. This month we’re focused on color for younger humans,…

Exciting New Tools for Designers, May 2024

This year, we’ve seen a wave of groundbreaking apps and tools. AI is reshaping the industry, enhancing productivity,…

Using AI to Predict Design Trends

Design trends evolve at a blistering pace, especially in web design. On multi-month projects, you might work on a…

15 Best New Fonts, April 2024

Just like web design, type design follows trends. And while there’s always room for an exciting outsider, we tend to…

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

How to Write World-Beating Web Content

Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

How Web Designers Can Stay Relevant in the Age of AI

The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…