Are you a member? Register or Login

HTML Form Basics

HTML is used mainly for presenting and showcasing information for the visitor. But it’s also easy to allow them to enter information and use it in various ways. This tutorial uses the example of a contact form.

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Explore Digital Assets

Simple Contact Form

Providing your web host supports PHP, you just need to follow our example below to email the contents of a form to yourself. Firstly, this is the HTML code to put on your page:

This will result in a form which looks similar to the following:

Name:

Email Address:

Message:


So you’re able to collect the data. Now to explain how to email it. To do this, you need to make a file called submit.php and put it in the same folder as your HTML file. It’s quite complicated to go into exactly how this works, but if you copy and paste the following code it should work fine:

All you need to do is change [email protected] to your actual email address. You’ll be receiving form submissions from your website in no time!

Other Form Options

HTML doesn’t just use text fields for collecting information. You also have the option to use checkboxes, radio buttons and drop down lists. Feel free to take and use the examples below:

Radio Buttons

These allow you to enforce that the visitor only makes one choice, unlike checkboxes which allow you to select multiple answers/settings. They look something like:

Red
Blue
Yellow

The code you use to create the above is:

Checkboxes

Several checkboxes can be ticked, allowing multiple selections. It is as simple as changing the word radio above to say checkbox:

Red
Blue
Yellow

The code you use to create the above is:

Drop Down Boxes

Drop down boxes work in a similar way to radio buttons, allowing the user to select one option. However, they save a great deal of space if you are dealing with a long list – selecting your country for example:


The code you use to create the above is: