Making Forms Mobile Friendly And How IPhone AutoCorrect Almost Cost Us A Big Order

One of the reasons new entrepreneurs are hesitant to start an online store is because they fear the customer support.

Steve, am I going to have to install a support line for my shop? I’d rather not have to deal with customers directly over the phone. Can I just put up an email address and call it a day?

While having to deal with the inconvenience of phone support is definitely a valid concern, I don’t fear customer support at all. In fact, I embrace it. And if I could get every single customer on the phone I would.

Why? It’s because good things always happen when I talk to a customer directly. Not only are the chances of converting a sale drastically increased, but customer calls have resulted in many major bug fixes for my website.

Today, I want to share with you a killer bug with my mobile site that has been driving customers away for almost a year!

Darn You AutoCorrect!

iphone autocorrect
One day, I just happened to be stalking a customer online when I noticed some very strange behavior. This person had a ton of merchandise in their shopping cart but kept going back and forth between 2 pages on the website.

One moment they’d be on the checkout page and then they’d go back to the shopping cart page and then back to the checkout page…over and over again. In fact, this inexplicable web surfing pattern continued for about 10 minutes.

Now under normal circumstances, I would have called this person right away but I didn’t have their info yet because they hadn’t completed the first page of checkout. So all I could do was wait. And even though I couldn’t see the customer’s face, I could tell that they were getting frustrated and that we were likely to lose the sale.

Fortunately, the customer finally decided to call us on the phone to place her order online.

Customer: I can’t tell you how frustrated I am!

Wife: We are so sorry. How can I help you?

Customer: My son told me that shopping on my iPhone is supposed to be easy and straightforward, but for the life of me I can’t seem to checkout on your site

Wife: I’d be happy to take your order over the phone.

Customer: Thank you so much. I’ve had it up to here already. This stupid phone would not let me enter in my city and email address correctly!!! And I was getting so frustrated that I wanted to throw my phone across the room.

Wife: We’re so sorry about that. Would you mind describing your exact issue to me for our knowledge?

It turns out that this nice lady lived in a town called “Southborough”. But her IPhone would not let her enter in her city correctly because it kept turning “Southborough” into “South borough”. Her IPhone thought it was doing her a favor by correcting her typing but it wouldn’t let her enter in her city correctly.

Addressing The Autocorrect Issue

iphone orm
Sure enough, when I tried entering in “Southborough” on my wife’s IPhone, it kept trying to auto correct the city as well. And like this lady, I was getting a little frustrated that it took so much effort to get the phone to register my typing correctly.

After doing a little web research, it turns out that I had a critical design flaw in my mobile site. To prevent a web browser from interfering with a customer’s input, you are supposed to turn off auto correct on all forms for smartphones and tablets.

Fortunately, turning off autocorrect was easy to do…

For all of your forms, you simply need to add the following tag to all of your text input fields.

<input type=”text” name=”name” autocorrect=”off”>


And for good measure, you should also turn off auto-capitalization and auto-complete by adding auto-capitalization=”off” and auto-complete=”off” to all of your forms as well.

<input type=”text” name=”name” autocorrect=”off” auto-capitalization=”off” auto-complete=”off”>


Once I made these changes, it was very straightforward to enter in the correct address. We were lucky that this customer decided to call, because I probably would not have thought of this potential problem. And even though I tested our mobile website very thoroughly, I did not think to test names and forms that the IPhone would try to auto correct.

Making Phone Numbers Clickable

After this customer fiasco, I decided to do a more thorough analysis of my mobile web forms by specifically paying attention to usability and here’s what I came up with.

First off, and this is just a hunch, but I believe we would have lost this customer for sure had we not had our telephone number prominently displayed in the footer of our mobile website.

clickable phone number

But I was really lucky and here’s why. Android and iOS do a great job of automatically making phone numbers clickable by default. But since I didn’t actually write any code to explicitly make the number clickable, our click-to-call number might not work across all phones.

In general, it’s better to err on the side of caution and not rely on auto-detection, so here’s the code to make phone numbers clickable on a phone.

First off, you want to turn off any auto-detection that the phone offers already because you want to prevent the OS from making random numbers accidentally clickable.

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

Then, you want to turn your phone number into a link

Our phone number: <a href=”tel:6505555555″>650-555-5555</a>

Making Form Entry Even Easier

telephone form
One other thing that I noticed while trying to place an order was that entering my phone number was a bit clunky. Since my standard phone keyboard puts all of the numbers in the top row of my phone, it’s very easy to make a typing mistake.

Fortunately, there are a few HTML5 constructs that make typing in numbers easier.

By adding the following tags to the telephone input field, you can make certain phones (most importantly the IPhone) use a telephone keyboard instead of the standard keyboard when entering in numbers.

<input type=”tel” name=”tel”/>

Adding these tags to your phone number input fields will pop up the numeric keyboard to make number entry much easier.

Conclusion

When it comes to mobile phone and tablet usability, I’ve clearly got a lot to learn:) But now that I’m more aware of the potential issues, I’m better able to spot bugs and problems with our design.

But if there’s a lesson to be learned, it always pays to talk to customers and ask them for their opinions on usability. After all, they are the ones paying the bills and it’s in your best interests that they have the smoothest shopping experience possible.

Good luck with your shop and click here if you want to read more about my experiences with mobile design

Ready To Get Serious About Starting An Online Business?


If you are really considering starting your own online business, then you have to check out my free mini course on How To Create A Niche Online Store In 5 Easy Steps.

In this 6 day mini course, I reveal the steps that my wife and I took to earn 100 thousand dollars in the span of just a year. Best of all, it's absolutely free!

Give Me Access To The Free Course!
Enter Your Email Address:

Similar Posts

Have you read these?

8 thoughts on “Making Forms Mobile Friendly And How IPhone AutoCorrect Almost Cost Us A Big Order”

  1. Steve,

    It is very nice that you give real life examples of some of the everyday life challenges that you are facing as an online entrepreneur. Not everything about selling online is as simple as putting up a website and watching the money roll in. If it was everyone would be doing it.

    1. Thanks Jim. There’s a lot of change going on in the ecommerce industry and it’s been a fun challenge to keep up

  2. Craig says:

    Great article Steve. The auto correct can be annoying. Making the phone keyboard bigger so you can see it and actually click on the right number is great.

    Thanks for the great info

    Craig

    1. What’s funny is that I went through checkout probably a hundred times and auto correct never really bothered me with the names/addresses that I tried. That’s why it’s a good idea to pick customer’s brains when you have them on the phone.

  3. I recently had two experiences with forms that made me close the tab:

    - A form doesn’t accept an accented character, so keeps rejecting my first name as a valid entry.

    - A form only accepts US zip codes to validate a credit card. Now, my usual way to deal with this is by using 90210 (the only zip code most Canadians can remember!), but when I need to validate a card with a US zip code, I just close the tab and look elsewhere.

    Great post Steve. I’ll be sharing it with the Flippa audience!

    1. Hi Ophelie

      You have an interesting point about the accent. We don’t put any restrictions on our text input but I’d be curious to give that a shot on our checkout forms. Thanks for the tip!

  4. Scott says:

    Thanks so much Steve. This will be a great help as we prepare to launch our responsive site. Is there a site you came across where we can learn more about these little things?

    1. Hmm…Ever since I designed my mobile site, I’ve been keeping up with mobile design from all over the place. Unfortunately, I don’t really keep track of all the articles. I mainly just use Google.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>