Web Form Guide
By Example
Web Form Guide
This guide will feature usable examples of web forms. Web forms are a part of HTML standards. This page is a HTML page. We also use a CSS framework Bootstrap. Form submissions also rely on JavaScript or a variant of JavaScript called JQuery.
Web Forms can really make your website productive in terms of people contact. Many people prefer to use a web form rather than deal with a human. They don't want to be sold to. Hence the functionality and design of your forms deserve some attention.
- Web Form Layout
- Web Form Validation
- User Interface Design Principles
- References to current Form Abandonment Statistics and Success Statistics
Use of Icons - Email Field
The use of icons is a fundamental User Interface Design principle (10 Usability Heuristics) Recognition rather than recall. It takes less memory load when we recognise say a road stop sign instead of the words. So in creating great web forms we use icons and standards where possible. Hence the
01.
Email Validation Test
This example does the following-:
- Will not allow the form to be submitted without input
- Provides instant custom feedback when there is a problem
- Validates on the structure of an email
- The Send button is subdued when the content is not valid
Use of Regex - Telephone Field
T his example validates a telephone field. We have used Regex which is a common language for defining patterns. This validation is a compromise between getting a phone number that is an exact match for every phone system in the world and one that would work for most numbers. Some validation systems allow you to add an extension. This example assumes a telephone number length including spaces to be no longer than 13 characters.
A fundamental User Interface Design principle (10 Usability Heuristics) Help users recognize, diagnose, and recover from errors is demonstrated here where it is easy to realise the error being made with the telephone number and to work around it.
Regex used:
^([0-9\(\)\/\+ \-]*)$
02.
Phone Validation Test
This example does the following-:
- Tests for characters that make a valid phone number
- Will invalidate if too many characters are entered
- Uses the Regex pattern ^([0-9\(\)\/\+ \-]*)$
Measuring the effectiveness of Web Forms
W eb forms allow the passing of parameters. These parameters can be hidden. So your web programmer can make various pages and styles of forms and you can measure the effectiveness in two ways-:
2. A custom back-end admin system
We use both methods because GA4 allows anyone with access to see the conversions (previously known as goals in Google Analytics Universal).
The back-end allows admin staff following up on enquiries quick at a glance information. On a large website this information will give clues as to the users preferences and behaviour. For example we may know what products the user was checking based on the location of the form.
A Gold Coast SEO and Web Developer