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

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…