HTML5 Form Best Practices

A modern and responsive website is no longer just a portal that acts as a communication channel—for sharing information— between the organizations with its clients. For you to be successful with your website strategy—attracting visitors and converting them into leads and customers—you have to design a web form that establishes an affable relationship with the clients.

This article discusses some of the best practices that you can use in HTML5 to create a sensational and an affable website for your firm’s bottom line. Let’s get started.

* Labels – Explains about the corresponding input fields
* Input Fields – Enables users to provide details.
* Actions – this attribute defines the action to be performed when the form is submitted.
* Message – Gives information about the form submission.
* Validation – It ensures that the data submitted by the user comply with rules provided.

Apart from layout, functionality and purpose, all forms have 3 main aspects which needs to be handled to make a form usable:

Relationship

It is important to know your user for the establishment of a good business relationship. To do this following steps can be followed:

1. Trust can be built by using logo, imagery, color, typography and wording.
2. Name the form according to its purpose which will inform users what the form is about.
3. Always try to be in scope of the form. Don’t ask any questions beyond that.

Conversation

A form is the communication platform between the user and the organization. So this needs to be logical and to the point. The below mentioned points are advisable:

1. Labels needs to be ordered logically.
2. All the Related information are advised to be grouped.

Appearance

1. Label

a. Position – Label above an input field works better for maximum readability.
b. Alignment – Placing labels above input fields is preferable, but make them right aligned if you place them to the left of input fields.
c. Bold labels—Bold labels is bit difficult to read, so it is preferable to use plain text labels.

2. Input Fields

a. Type – Provide the appropriate type based on the requirements.
b. Required – Clearly mention which fields cannot be left blank.
c. Placeholder – Do not use this attribute alone.
d. Autocomplete – Activate this to get faster user input.

3. Actions

a. Naming conventions – Descriptive words for buttons are preferred. Because it will ensure the purpose of the button clearly.

4. Message

a. Success – Notify the users for successful form submission.
b. Error – Notify the users for errors in form submission.

5. Validation

a. Restrict validation to the key points because excessive validation will frustrate users.
b. Use both client side and server side validation. It will ensure the validation in spite of having JavaScript turned off in user’s browser and we can get better user experience with fast response and more secure validation.
c. Use captcha to protect the human-generated spam.
d. You can use Honeypot Technique as well over captcha because no user interaction is required.

Accessibility & Mark-up

1. Use <label> tags to link labels with inputs.

a. Properly read by screen readers.
b. Most browsers treat text with <label> tags as clickable: larger actions.

2. Use the tabindex attribute.

a. Provides control over tabbing order.
b. Enables forms to be navigated by keyboard.

3. Consider the accesskey attribute for additional keyboard support.

a. Direct access to associated input fields.
b. Consider to group related form fields.

#1: Always use smart defaults

Typing can be tiresome for your customers. You can promote your firm’s bottom line by doing the hard work of typing for your customers. For instance, you can pre-populate the information—such as e-mail addresses and the country of origin—on your web form if you already know about your visitor. I know you’re thinking, “How is this possible?”

Well, you can use the visitor’s IP address to geographically locate his/her country of origin so that such a customer doesn’t have to scroll down through a long list of countries to select his/her country. You can also make sensible guesses the options that your customers will be picking.

#2: The inline form validation is always the King!

It’s disheartening to fill out a form and hit the send button only to get an error message that the form hasn’t been filled correctly. You can avoid this scenario by ensuring that you’ve implemented the inline form validation. The in-line validation ensures that errors are captured immediately a user moves from one field to another.

Even though this task may be quite daunting, you can implement HTML5 validation checks to ensure that your forms have the correct in-line validation.

#3: Always top or right-align form labels

Knowing the right alignment for the form labels helps your customer to have an easy time while navigating on the web form. If the form labels are aligned improperly, your visitors or customer may want to postpone the filling out process to a later time—which may not promote your bottom line. So, which alignment is the best?

Ideally, top or right-alignment for the form labels are usually regarded as the best form of form alignment. This is because they provide a closer proximity to the form label thereby reducing the distance that the eye has to move in order to fill out the detail.

#4: Inform your visitors why you’re asking for the information

Always explain to your visitors why you’re asking for that data. For instance, some customers will not be willing to share their data such as telephone numbers if they know they will be blasted with several unsolicited calls. The same applies to e-mail addresses. However, if you explain to such customers why you’re interested in such data, then they will fill out the form on your website.

#5: Always ensure your CAPTCHAS are working fine

There’s no doubt about the power of CAPTCHAS in helping to differentiate between human beings and the machines. However, CAPTCHAS can cause problems on your forms and affect the submission rates. To remedy this problem, always ensure your CAPTCHAS—whether they are letters, logical questions or even image recognitions—are easy to read by the customer.

#6: Make the CTAs clear to the customer

Always check to ensure that the call-to-action text is clear to the website visitor. For instance, if you’re designing a multi-stage checkout system, you should ensure that your customers know the stage they are proceeding to. You can use words such as “Proceed to Payment” or “Complete the Order” instead of “Proceed” and “Complete.”

#7: Don’t make your customers create unnecessary usernames

Human beings are prone to forget usernames and passwords. Asking your visitors to formulate usernames may cause problems for them when they try to remember such names in future. You can use their e-mail addresses since the e-mail address is already unique and the customers can easily remember it.