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.

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:

1
2
3
4
5
6

<form action="submit.php" method="get">
   Name: <input type="text" name="name" /><br />
   Email Address: <input type="text" name="email" /><br />
   Message: <textarea name="message"></textarea><br />
   <input type="submit" value="Send Form" />
</form>

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

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:

1
2
3
4
5
6
7
8
9
10

<?php
$subject = "Website Message";
$message = "Someone sent you a message from your website:
Name: $name
Email: $email
Message: $message";
$youremail = "me@mywebsite.com";
mail($youremail,$subject,$message,"From: $email");
echo 'Thankyou for filling in a form!';
?>

All you need to do is change me@mywebsite.com 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:

The code you use to create the above is:

1
2
3

<input name="favouritecolor" type="radio" value="red" /> Red
<input name="favouritecolor" type="radio" value="blue" /> Blue
<input name="favouritecolor" type="radio" value="yellow" /> Yellow

Checkboxes

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

The code you use to create the above is:

1
2
3

<input name="favouritecolor" type="checkbox" value="red" /> Red
<input name="favouritecolor" type="checkbox" value="blue" /> Blue
<input name="favouritecolor" type="checkbox" value="yellow" /> Yellow

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:

1
2
3
4
5
6
7

<select name="favouritecolor">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="pink">Pink</option>
</select>