Contact Forms - The Definitive Guide (and short history)

Chapter 1

Contact Form Fundamentals

Chapter 2

A Short History of HTML Forms

Chapter 3

Field Types

Chapter 4

UI and UX

Chapter 5

Form Validation

Chapter 6

Form Processing

Chapter 7

Security

Chapter 8

Legalities

Chapter 9

Technology

What are contact forms?

Most people have completed a form at some time in their life, it may have been on paper with a pen or on a device like a mobile phone or computer.

Contact forms are traditionally found on the contact page of a website alongside other modes of communication like telephone number or address.

Example contact page with form

Are contact forms important?

If you want to provide an easy way for people to contact you through your website, then having a contact form is a great way to make this simple for your visitor.

Contact forms are a great way to allow your visitors to get in touch at any time of the day or night.

Of course, they are not always the best method of communication but are a great addition in most cases.

Why is a contact form used?

Almost all websites want to provide at least one method to allow visitors to get in touch with them.

The most common options they provide are physical addresses, telephone numbers, social media links (Facebook, Twitter, Instagram, etc), email addresses, online chat with an advisor, online chat with a robot, and a contact form.

Visitors can often have many options available to contact the people behind the website.

Sometimes a phone number is the best option if they need real-time assistance, or social media if they what the communication to be public. Other times they may physically want to visit the place of business.

However, often a contact form is used when none of the other communication methods are possible, available, or appropriate.

From the website users' point of view, a contact form allows them to provide details which they may find harder to explain over a phone, or they may feel more comfortable writing than talking. Often phone numbers are busy or closed, so sending a message through a contact form is quick and easy.

From a website owners' point of view, a contact form allows them to require enough information (for example, their name, email address, and reason for contact) to deal with the message. It also allows for a digital paper trail and future potential marketing.

Before we get to HTML forms, let's first briefly uncover a short history of HTML.

The roots of HTML

HTML (HyperText Markup Language) is a declarative language used for web pages and viewed by web browsers.

HTML was based on SGML (Standard Generalized Markup Language). SGML dates from 1986 and was developed to add markup tags to describe a document format.

SGML was based on GML (Generalized Markup Language) from IBM and was created in 1969. GML was named after the original authors (Charles Goldfarb, Edward Mosher, and Raymond Lorie). It was developed to tag document formats (headers, paragraphs, etc) so they could be translated for printers or screens.

HTML was first mentioned publicly by Sir Tim Berners-Lee (inventor of the world wide web) in 1991. It was known internally, at CERN (where Tim was contracting at the time), as HTML Tags.

Between 1991 and 1993, several drafts for HTML DTD (Document Type Definition) were created.

HTML and HTML+ were first published as drafts by IETF (Internet Engineering Task Force) in mid to late 1993, with HTML+ adding some additional enhancements including tables and forms (referred to as fill-out forms).

When were form fields added to HTML?

In November 1993, David Raggett of HP published a paper (A review of the HTML+ document format) in which he mentions single and multi-line text input fields, radio buttons, and checkboxes as well as a submit and reset button.

The first public and official mention of HTML Forms was in 1993.

The specification for HTML+ fill-out forms is available on W3.

When HTML 2 was published in November 1995, the file upload form type was introduced (in RFC 1867)

Through the releases of HTML 3 (1997) and HTML 4 (1997 to 1999), forms remained without any changes. Although an alternative version of HTML 4 known as XHTML required that some form tags used an extra slash (/) to conform to that standard.

With the introduction of HTML 5, in 2014, several new form field sub-types and validation hints were added. However, it took some years for the most popular browsers to provide proper support for these.

Timeline of HTML and HTML Fields

The diagram above show some the most common field types for HTML 5, but there are some others available.

Some of the field types specified by HTML 5 are not yet supported by some or all browsers.

Interestingly, many of the field types first proposed back in 1993 didn't make it into an official specification until 2014, and some are still not yet supported.

Let's move on and look at these field types in more detail.

Basic anatomy of an HTML form

Before digging into form fields, let's quickly look at the HTML needed to support the fields.

An HTML form is usually enclosed inside the form tags and includes one or more fields and at least one button (which technically is also a field).

Here's a typical form presented in HTML code. Please pay attention to the first and last lines.

<form name="contactform" method="post" action="process.php">
    <label for="email">Email address</label>
    <input type="text" id="email" name="email">
    <button type="submit">SEND</button>
</form>

Basic anatomy of form fields

Usually, a form field contains two parts:

1 The label element is the visible text which appears before the field (Email address for example).

2 The field element takes the user input.

There are some exceptions to this, for example, the form submit button doesn't contain a label.

<label for="email">Email address</label>
<input type="text" id="email" name="email">
<button type="submit">SEND</button>

The label and field are related to each other through the "for" attribute of the label and the "id" attribute of the field.

As well as being semantically correct to relate the label to the field, it's also used by screen-reader technology (often used by people with visual impairments or other ailments which make it hard for them to read).

It's worth mentioning briefly at this point that buttons can be defined in multiple ways. More details on this later.

Commonly used form field attributes

As we've seen in the example code above, the form fields can have some attributes. For example, the id attribute could be used like: id="email". Noticed the attribute is followed by an equal sign and has a value enclosed in quotes.

Other attributes which are often used for contact forms are placeholder will is used to hold text hints inside the field, and value which is used to pre-populate the field with a value.

<input type="text" 
    placeholder="Enter your name" 
    name="Name" 
    required>

<input type="text" 
    value="John Smith" 
    name="Name" 
    required>

The order of the attributes inside the field tags is not important. You can define type before or after value if you want, it doesn't matter. It's recommended to be consistent for readability though.

The make the field required, adding the attribute required to the field will tell the browser to check that a valid value has been entered. You can see this in action in the two fields above.

The most common field elements

First, we're going to look at a selection of common input elements, then we'll cover some others including buttons.

The Hidden input field is defined with type=hidden. As you may imagine, based on its type, the field is hidden from view.

<input type="hidden" name="something" value="some value">

The purpose of the hidden field is for the form to pass the information along with the rest of the form when the form is submitted, but the user is not required to provide that data directly.

In the above example, the hidden field has the name of "something" and a value of "some value".

In the examples presented below, a submit button is included to allow you to test the field out in your browser. Browser vendors may show slightly different behaviors for these fields.

Go ahead, enter something into the fields and click on the submit button. You may see a message if the data you've entered is invalid.

The Text input field is defined with type=text and is designed to accept text characters (alphanumeric).

<input type="text" name="Surname">

In the above example code, the text field type has the name of "Surname". No value is defined (although it could be) because we usually want the user to enter something into the field.

The Tel input field is defined with type=tel and is designed to accept a telephone number.

<input type="tel" name="Phone">

In the above example code, the tel field type has the name of "Phone". No value is defined (although it could be) because we usually want the user to enter a telephone number into the field.

You may notice that this field will allow you to enter any characters into it. This is because the telephone field will accept a wide range of inputs as phone numbers can vary by format and region. This behavior can be changed, if desired, using JavaScript.

The URL input field is defined with type=url and is designed to accept a website URL.

<input type="url" name="Website">

The Email input field is defined with type=email and is designed to accept an email address.

<input type="email" name="Email">

The Password input field is defined with type=password and is designed to accept text characters, however, the input is usually masked out with dots to prevent onlookers from reading it.

It's not that common to ask for a password in a contact form.

<input type="password" 
    name="Password">

The Date input field is defined with type=date and is designed to accept a date.

The browser will usually show date picker options when this field is selected and the format of the date will usually be based on the location settings on your device.

<input type="date" name="Date">

The Month input field is defined with type=month and is designed to accept a month.

The browser will usually show the month picker options when this field is selected.

<input type="month" name="Month">

The Week input field is defined with type=week and is designed to accept a week.

The browser will usually show the week picker options when this field is selected.

<input type="week" name="Week">

The Time input field is defined with type=time and is designed to accept a time.

The browser will usually show the time picker options when this field is selected.

<input type="time" name="Time">

The Local Date and Time input field is defined with type=datetime-local and is designed to accept a local date and time.

The browser will usually show the date and time picker options when this field is selected.

This field attempts to identify your local date and time based on your operating system settings.

<input type="datetime-local" 
    name="LocalDateAndTime">

The Number input field is defined with type=number and is designed to accept a number (a valid floating-point number).

This field is often defined with three additional attributes. min, max, and step. The min and max attributes can be used individually if desired.

When using the min attribute, you specify the minimum number allowed.

When using the max attribute, you specify the maximum number allowed.

When using the step attribute, you specify the increment between the minimum and maximum allowed values.

<input type="number" 
    name="Number"
    min="1" 
    max="10" 
    step="2">

The Range input field is defined with type=range and is designed to accept a number (a valid floating-point number).

It's similar to the Number input but presented differently.

This field is often defined with three additional attributes. min, max, and step. The min and max attributes can be used individually if desired.

When using the min attribute, you specify the minimum number allowed.

When using the max attribute, you specify the maximum number allowed.

When using the step attribute, you specify the increment between the minimum and maximum allowed values.

Because browsers don't have a consistent agreement on how to display this field, it should be used with caution. Some browsers will not show any number indications which makes it hard for the user to know which number they've selected.

<input type="range" 
    name="Number"
    min="1" 
    max="6" 
    step="1">

The Color input field is defined with type=color and is designed to accept a hexadecimal color code.

The browser will usually show the color picker options when this field is selected.

<input type="color" name="Color">

The Checkbox input field is defined with type=checkbox and is a toggle control, which can be checked or unchecked.

<input type="checkbox" name="Check">

The Radio Button input field is defined with type=radio and is a selection control, where you can pick one from a list.

This differs from a Checkbox in a couple of ways. First, you cannot toggle a selected radio button on or off, but you can pick a different radio button if another exists. Once you select a radio button, you cannot go back to a state where no radio buttons are selected.

<input type="radio" 
    id="One" 
    name="SelectedNumber"
    value="One">
<input type="radio" 
    id="Two" 
    name="SelectedNumber"
    value="Two">

The File Upload input field is defined with type=file and is designed to accept file selections.

On selecting this field the browser will trigger a file browse dialog to allow you to pick one or more files.

<input type="file" name="Photo">

By default, the file upload field will allow a single file to be selected. To allow for more than one file, add the attribute multiple to the field (see example code below).

It's important to mention at this point that the file upload field also requires the special attribute enctype="multipart/form-data" added to the form tag.

Example code with file upload form attribute

<form method="post" action="process.php" enctype="multipart/form-data">
    <input type="file" name="Photo" multiple>
    <button type="submit">SEND</button>
</form>

There are four other input types for Buttons, however before we cover buttons, let's look at some other fields.

The Select field is defined with the <select> and <option> tags which are designed to show a list of drop-down options.

<select name="Selected">
    <option value="">Select one..</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

By default, the select element will allow a single option to be selected. To allow for more than one selection, add the attribute multiple to the select tag.

<select name="Selected" multiple>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

Using the multiple attribute with the select element is not recommended due to the requirement placed on the user. In order to use this, the user may need to hold certain keys down to select more than one option, and this differs between different operating systems and browsers.

In many cases, it may be better to use the Checkbox input type instead.

The Textarea element is defined with the <texarea> tag which is designed to accept text characters with multiple lines.

<textarea 
    cols="30" 
    rows="3" 
    name="Message">

Two of the attributes used in this example textarea are cols which is the number of characters for the width and rows which is the number of rows. In practice, CSS is often used to change the size.

Another important attribute used with this field (as well as many input types) is maxlength, this allows you to specify the maximum number of characters to allow.

There are five Buttons available to use in HTML. Four of which are input types (type=submit, type=image, type=reset, and type=button) and the last one is the Button element.

It's possible to use all of these to Submit a form, with the exception of Reset button. But first, let's look at the Input type=submit.

<input type="submit" value="Submit">

Using this button within a form will trigger the form to submit. This is when the form tag attributes are used to decide on how the form will be submitted.

In some cases, it may make sense to include a Reset button. This button does exactly as you'd imagine and resets the form back to its original state.

<input type="reset" value="Reset">

The Button element can also be used instead and supports type=submit, type=reset, and type=button

<button type="submit">Submit <b>Form</b></button>

This button is different from the input type in that you do not specify the buttons value attribute, instead, you wrap it inside the button tags. This allows for HTML to be included. In this example, the <b> bold tag was added to make the word "Form" show in bold (Submit Form).

This chapter will be available January 2022

The chapter will be made available in a future update.

The chapter will be made available in a future update.

The chapter will be made available in a future update.

The chapter will be made available in a future update.

The chapter will be made available in a future update.