Web Forms Best Practices

Here are some of the rules that will help you build better forms. As we know, it’s a mobile world, so we wish our forms to be responsive and mobile first by nature. Let’s see how to do it right.

Use big font size and provide easily touch buttons

Here it’s simple, when you have doubt, make things bigger and check. In other words, you wish your fonts to look great both on mobile and desktop. For mobile, a rule of at least 16px will be a good start. Why? because it’s big enough in most cases for mobile. Plus,  this minimum size will prevent all iPhones from zooming into the fields. For buttons and touch areas, start with at least a size of 32px for the input field height. This will ensure it’s not too small. However, check it both on mobile (few devices from 4″ to 6″) and on larger screens (=desktop or large tablets). Both Foundation and Bootstrap gives you a default size for such elements that is good for mobile.

Take advantage of Autofill

This will enable your users an easy way to complete forms with pre-populated data.  Look for opportunities to pre-fill information you already know (e.g. Geolocation to fill the zip code), or may anticipated to save the user from having to provide it. For example, pre-populate the shipping address with the last shipping address supplied by the user. See it in action at: greenido.github.io/form-example.html

Advertisement

Auto Complete Attribute Will Improve Your Profit (And Forms)

Autofill in Chrome

Chrome has a great new Autofill feature that as a developer you’ll want to add to your websites for Chrome to use. Other browsers are sure to follow too. The first time you fill out a form, Chrome automatically saves the contact information that you enter, like your name, address, phone number, or email address, as an Autofill entry. You can store multiple addresses as separate entries. Moreover, Chrome can save your credit card information, with your explicit permission. When you enter credit card information on a form, Google Chrome asks you at the top of the page whether you’d like to save the information. Click “Save info” if you’d like the credit card to be saved as an Autofill entry.

Later, when you start filling out a form, the Autofill entries that match what you’re typing will appear in a menu. Select an entry to automatically complete the form with information from the entry. Chrome also saves the text you’ve typed in specific form fields. The next time you fill out the same field, text that you’ve typed in the past appears in a menu. Just select the text you want to use from the menu to insert it directly into the field.

Improving your checkout flow

In Chrome, you get a full support for the autocomplete attributes . All we need to do is to make sure we are leveraging them. You will improve your checkout process and make your users 6.73 times happier. Since autocomplete is part of the standard (WHATWG HTML) you know that other browsers will support it as well.

The autocomplete attributes can be accompanied with a section name, such as:

• shipping given-name
• billing street-address

This is recommended because it will make your form easier to understand and fill. The browser will auto complete different sections separately, and not as a continuous form.

In-App Payments On The Web

There are many examples of applications that are free but let you add features with in-app payments. Think of a game that is free to play, but offers additional levels or virtual goods for a certain price (a low one in most cases). It’s very common to see applications that are free at the ‘trial period’ and later gives premium users the option to buy a specific level that match their needs. It’s a good practice to give users your product or service without any barriers (e.g credit card information). If they find it useful, they will pay for it with a smile.

Few examples

• A designing web app that give the options to buy more projects (or more shapes, tools, features).
• A Customer Relationship Management (CRM) application, that offer certain capabilities for a price.
  The basic options to collect and manage your contacts will be free, but if you wish to send emails they will charge you.
• A game that let you advances more quickly if you buy certain improvements. For example a ‘magic’ power that give you the ability to pass a difficult stage (e.g. the mighty eagle in Angry Birds).

How To Implement Web Payments

One aspect for Monetization on the web is the simple action – BUY.
In this method, the user will pay and only then, she could ‘use’ the application or service. There are several providers that offer developers an efficient ways to lead users through the checkout process. In the image below you can see an example of such usage when the user got the option to ‘Pay with Card’ in one-click.

After you will click on this button you will get a dialog that ask for your credit card details. In this example, we are using Stripe. It’s a good option that works in many countries around the globe. Moreover, you are getting for ‘free’ all the best practices of client-side validation for the credit card details. In the image below, you can see an example of buying “one hour with Ido”, it’s looking like a bargain.