How to make your contact forms mobile friendly

Given 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.

  • Piper

    I think the HTML portion of this article is very helpful, but I don’t think styling your checkbox like a radio button is the best decision.

    • http://jimbergman.net Jim Bergman

      I agree. Checkboxes must be square, and radio boxes should be round, otherwise you’re just going to confuse people. Users already confused about radio buttons in general, lets not make this worse by making round checkboxes.

  • webdevlint

    Some interesting features, like html5 input types & css, but because I’m reading it on my mobile I’d like to have a demo to test with my device…

  • webdevlint

    Some interesting features, like html5 input types & css, but because I’m reading it on my mobile I’d like to have a demo to test with my device…

  • http://twitter.com/acornale Andrew Cornale

    Love the HTML5 stuff that brings up the right keyboard. There’s nothing more annoying than using a “mobile” site that isn’t mobile friendly.

  • Gary Hicks

    Encountering (mobile) forms that insist on Autocapitalisation and Autocomplete is a pet peeve of mine. Now I know how to turn them off, thanks!