Connect with us

Published on: 31 Jul 2016

Many HTML5 forms are just not good enough!

Forms matter, they are critical for many websites. With forms users can communicatie, login, give feedback and order products. All crucial features for any online project.

Unfortunately many forms found on the web are far from perfect, in this post I will list a few common mistakes made with HTML forms, improve them and finally show how to create a nice HTML5 contact form and use this in MODX and FormIt.

HTML5 form best practices

Below are a few thing to keep in mind when using HTML5 forms, all of these will be used to create our own contact form.

Always use a label

In his excellent post Always use a label from Adam Silver on Medium, the point for using labels is made in a great way.

As Adam stated:

Sometimes designers oversimplify a form by removing the labels. The problem is that minimal does not always mean it’s simple — which is certainly the case for labels. Labels, in fact, are an essential part of designing easy-to-use forms.

Using a label is very simple, simply add for="userName" to a label tag, where the value matched the input tag id: id="userName".

		
		<label for="userName">User name
		<input type="text" id="userName" />
		
		

Another option is to wrap the input field inside the label tag:

		
		<label>User name 
			<input type="text" id="userName" />
		</label>
		
		

These both renders as:

Use the required attribute

If the required attribute is present, then the field must contain a value before the form can be submitted. This is a great way to set fields like username and passwords as required in a very easy way.

Later in this tutorial we will also set the required function in our MODX FormIt configuration.

		
		<label>User name 
			<input type="text" id="userName" required />
		</label>
		
		

Placeholders are great

Placeholder can give a user a hint of what they need to fill in.

			
			<label>E-mail 
				<input type="email" id="email" placeholder="e.g. my@email.com" />
			</label>
			
		

This renders as:

HTML5 form imput types

HTML5 introduces a number of new input types. These new input types give hints to the browser about what type of keyboard layout to display for on-screen keyboards.

Input Type Description
url For entering a URL. It must start with a valid URI scheme, (for example http://, ftp:// or mailto:).
tel For entering phone numbers. It does not enforce a particular syntax for validation, so if you want to ensure a particular format, you can use pattern.
email For entering email addresses. By default it will only take one, but if the multiple attribute is provided, a comma separated list of email addresses is valid.
search A text input field styled in a way that is consistent with the platform's search field.
number For numeric input, can be any rational integer or float value.
color For choosing colors.
range For number input, but unlike the number input type, the value is less important. It is displayed to the user as a slider control.
datetime For entering a date and time value where the time zone is provided as GMT.
datetime-local For entering a date and time value where the time zone provided is the local time zone.
date For entering a date (only) with no time zone provided.
time For entering a time (only) with no time zone provided.
week For entering a date that consists of a week-year number and a week number, but no time zone.
month For entering a date with a year and a month, but no time zone.

Source: Making Forms Fabulous with HTML5 - html5rocks.com

Coding our HTML5 form

So what form are we going to create? I good example would be a contact form with the following fields:

  • Name

  • Last name

  • E-mail

  • Subject

  • Locations (multiple radio options)

  • Color (single dropdown option)

  • Message

  • Send button

Fields with a * will be required and the form whould support nice styling and feedback should errors happen.

Here you can see a very basic example of a HTML contact form, we will start with this and improve it step-by-step.


	

This renders as:

Form coding steps

  1. Wrap fields inside label tags

    To structure thing a bit more, I like to wrap the fields with the label tag. It just looks more structured and the functionality is the same.

    So not this:

    
    					

    But this:

    
    					
  2. Wrap labels in p tags

    A great trick to get basic spacing and margins in a easy way is to wrap the field (and labels around it) in a p tag, it will give line-breaks and margins without having to add unneeded div's or tags in your form.

    So not this:

    
    					

    But this:

    
    					
  3. Add radio, dropdown and checkbox options

    Many forms need options, of various types. In this tutorial I will use the most common input types: dropdown, radio and checkbox option.

    Dropdown option

    For the dropdown (select) option wil will wrap it with a label tag and a p tag around that.

    
    					

    This renders as:

    Radio option

    It is a good practice to group radio and checkbox options as a group since the inputs belong together. To do this wrap the label and input tags in a fieldset tag. After this, the fieldset tag support the legend tag to give the groupped set a title.

    
    					

    This renders as:

    Sizes:
    Checkbox option

    Very similar to the radio options, the checkbox options are grouped inside a fieldset.

    
    					

    This renders as:

    Colors:
  4. Add some placeholders

    Input fields and the textarea allow the use of a placeholder text to give the user a hint of what they need to fill in there.

    
    					
  5. Set required in the html

    Input fields can have the required setting, this lets modern browsers know that these field can not be empty.

    
    					
  6. Group form sections to provide structure

    As a last step we add groups to our form: personal and Options. This allows users to scan the form and make sense of the fields quicker.

    
    					

The final coded HTML5 form

We are done with our HTML5 contact form! See the full code below.


	

This renders as:

Personal

Options

Colors:

Sizes:

Form styling

Now that whe have our HTML form strcutured we can think about styling. In the medium article: Design Better Forms by Andrew Coyle al lot of great tips are listed.

The key things we wil focus on:

  • good contrast

  • one column form

  • top align labels

  • good spacing and margins

  • checkboxes and radio options in a vertical list

  • clear inline error messages

  • make fields only as long as needed

Basic form rules

We will first setup some basic rules, the form should not be too wide and it can use some colors for contrast.

  1. Add background, border and max width

    
    					

    This renders as:

    Personal

  2. styled input fields

    Next we make the input field 100% wide and add a border, color, padding and some margin:

    
    					

    This renders as:

    Personal

  3. Styling error messages

    Form feedback and error messages are important for a form. I will seperate two types of error messages here:

    • errors messages generated by the browser due to the required setting

    • errors generated by FormIt or MODX

    Browser generated error messages

    I will not be styling the errors messages generated by the browser due to the required setting, these are browser dependant and very hard to customize. It is best practice to keep these messages generated by the browser.

    A chrome error medssage generated by the required setting A chrome error message generated by the required setting

    Form or PHP generated error messages

    For other messages generated by the form or PHP, it is good practice to display the error message at the field where the error message is related to, as well as to help the user fix the error with descriptive error messages.

    You message can't be send, please check the error(s) below.

    Personal

Our final styled form

The HTML


	

The CSS


	

This renders as:

Personal

Options

Colors:

Sizes:

The form with errors:

You message can't be send, please check the error(s) below.

Personal

Options

Colors:

Sizes:

Download the code

The code used for the form can be found in a single HTML file here also included is the full MODX form code.

Using the form in MODX with FormIt

Now that we have our HTML5 contact form, lets use it in MODX!

Don't know MODX?

MODX is The fastest, most flexible, scalable and secure Open Source CMS. I use if for over 90% of my website projects and highly recommend it.

Easy forms in MODX using FormIt

FormIt is a dynamic form processing Snippet for MODX. It handles a form after submission, performing validation and followup actions like sending an email.

Find the FormIt documentation here.

Updating our form to work with FormIt

We need to change our form to be able to use FormIt in MODX.

  1. add a FormIt snippet tag

    We need to start with a bit of PHP code (called a snippet in MODX terms) this snippet is the configuration of our FormIt contact form. Placxe it above the HTML form.

    Lets look at each setting:

    • &hooks=`spam,email,redirect`
      These are the steps FormIt will take when the sumbit button of the form is clicked.
      #1 check if the anti spam field is empty
      #2 send the email
      #3 redirects the user to the thank you page

    • &emailTpl=`contact_form_tpl`
      The name of the MODX chunk (bit of HTML code) that is used as the template of the email send by FormIt.

    • &emailTo=`user@example.com`
      The email adress where emails are send to by FormIt.

    • &redirectTo=`123`
      The page ID (MODX gives every resource/page a unique ID) of the page to send users to when they have sucessfully used the form.

    • &validate=`name:required,
      email:email:required,
      numbers:required,
      colors:required,
      sizes:required`
      The fields of the form to be checked (validated) by FormIt before sending the email.

      In this case we configure the form that the: name, email, numbers, colors and sizes input fields need to be correctly filled in.

    
    					
  2. Create a FormIt email chunk

    We need to set a template for the email send by the form, we can style this in any way we want but to keep it simple we just use unstyled HTML for now in a chunk called contact_form_tpl.

    Create a new chunk called: contact_form_tpl and use the code shown here.

    
    					
  3. Adjust the form code for MODX and FormIt

    • Add a general error message on top of the form inside a MODX output filter.

    • Set the form action to:
      [[~[[*id]]]]

    • Add a blank input field for anti spam:
      input type="hidden" name="nospam:blank" value="[[+fi.nospam]]"

    
    					
    • Add a form specific error message to every field inside a MODX output filter:
      [[!+fi.error.name:notempty=`<span class="error">[[!+fi.error.name]]</span>`]]

    • Set all field values to:
      value="[[[[!+fi.field_name]]"

      Make sure to replace the field_name value to your field id!

    
    					
    • Add MODX tags to every select field option:
      [[!+fi.numbers:FormItIsSelected=`the_option_value`]]

      Make sure to replace the the_option_value value to your option value!

    
    					
    • Add MODX tags to every radio and checkbox field option:
      [[!+fi.numbers:FormItIsSelected=`the_option_value`]]

      Make sure to replace the the_option_value value to your option value!

    • For every radio and checkbox field add a hidden input field:
      <input type="hidden" name="colors[]" value="" />

    • Add [] behind every field option name for every radio and checkbox field.

    
    					
  4. Our full new form code

    
    			
  5. Create a Thank You page

    Finally, we need to have a page where form users are send to after submitting a form.

    Just create a new MODX resource and call it Thank you (or what you want) remember to update the setting in your FormIt tag, the 123 should be the ID of your Thank You page.
    &redirectTo=`123`

    This was a setting in the tag here.

    
    					

That is it!
We have a nice, modern HTML5 Contact form in MODX. I hope this tutorial was usefull, please leave any comments and suggestions below.

Download the code

The code used for the form can be found here as a zip download.


Feel free to contact us to find out if we can help you improve your website.

Lets chat free of charge