How to make an HTML form, in simple steps

One of the most useful pages of any website is the html contact form page. No website should be without a contact or feedback form.

Don't want to spend days or weeks learning to make your own forms?
Now you can use our professional form builder to create your own forms in only a few minutes.
It's unbelievably easy to use, and the one-off cost is very affordable. Find out more.
Be smart by saving time and effort.

tick We now offer a contact form (totally unbranded),
comes with full source-code, click here for details.

Scroll down a little to see our form created using HTML (front-end). Further down you will see the PHP code for the form processing (back-end) - this is used to take the form submissions and send it to you by email.

Index of this page:

HTML Form Code
Form Processing Code
Example HTML Form
Form Tag
HTML Text Field
HTML Textarea Field
HTML Radio Buttons
HTML Checkboxes
HTML File Upload
HTML Password Field
HTML Drop down menus
HTML Submit Buttons
HTML Submit Buttons

Form created using HTML

This is just an example form for you, if you need something a little different from the one below, then please have a look through our other web pages (we have many other forms available).

Copy and Paste this code directly into your HTML web page.

<form name="htmlform" method="post" action="html_form_send.php">
<table width="450px">
</tr>
<tr>
 <td valign="top">
  <label for="first_name">First Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="first_name" maxlength="50" size="30">
 </td>
</tr>

<tr>
 <td valign="top"">
  <label for="last_name">Last Name *</label>
 </td>
 <td valign="top">
  <input  type="text" name="last_name" maxlength="50" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="email">Email Address *</label>
 </td>
 <td valign="top">
  <input  type="text" name="email" maxlength="80" size="30">
 </td>

</tr>
<tr>
 <td valign="top">
  <label for="telephone">Telephone Number</label>
 </td>
 <td valign="top">
  <input  type="text" name="telephone" maxlength="30" size="30">
 </td>
</tr>
<tr>
 <td valign="top">
  <label for="comments">Comments *</label>
 </td>
 <td valign="top">
  <textarea  name="comments" maxlength="1000" cols="25" rows="6"></textarea>
 </td>

</tr>
<tr>
 <td colspan="2" style="text-align:center">
  <input type="submit" value="Submit">   ( <a href="http://www.freecontactform.com/html_form.php">HTML Form</a> )
 </td>
</tr>
</table>
</form>

HTML Form Processing. PHP Script

You also need to save this PHP script. This is used to capture the form submissions and send you an email.

You will need to change two parts of this. You need to set your email address.

Save this file as html_form_send.php

<?php
if(isset($_POST['email'])) {
	
	// CHANGE THE TWO LINES BELOW
	$email_to = "you@yourdomain.com";
	
	$email_subject = "website html form submissions";
	
	
	function died($error) {
		// your error code can go here
		echo "We are very sorry, but there were error(s) found with the form you submitted. ";
		echo "These errors appear below.<br /><br />";
		echo $error."<br /><br />";
		echo "Please go back and fix these errors.<br /><br />";
		die();
	}
	
	// validation expected data exists
	if(!isset($_POST['first_name']) ||
		!isset($_POST['last_name']) ||
		!isset($_POST['email']) ||
		!isset($_POST['telephone']) ||
		!isset($_POST['comments'])) {
		died('We are sorry, but there appears to be a problem with the form you submitted.');		
	}
	
	$first_name = $_POST['first_name']; // required
	$last_name = $_POST['last_name']; // required
	$email_from = $_POST['email']; // required
	$telephone = $_POST['telephone']; // not required
	$comments = $_POST['comments']; // required
	
	$error_message = "";
	$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
  if(!preg_match($email_exp,$email_from)) {
  	$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
  }
	$string_exp = "/^[A-Za-z .'-]+$/";
  if(!preg_match($string_exp,$first_name)) {
  	$error_message .= 'The First Name you entered does not appear to be valid.<br />';
  }
  if(!preg_match($string_exp,$last_name)) {
  	$error_message .= 'The Last Name you entered does not appear to be valid.<br />';
  }
  if(strlen($comments) < 2) {
  	$error_message .= 'The Comments you entered do not appear to be valid.<br />';
  }
  if(strlen($error_message) > 0) {
  	died($error_message);
  }
	$email_message = "Form details below.\n\n";
	
	function clean_string($string) {
	  $bad = array("content-type","bcc:","to:","cc:","href");
	  return str_replace($bad,"",$string);
	}
	
	$email_message .= "First Name: ".clean_string($first_name)."\n";
	$email_message .= "Last Name: ".clean_string($last_name)."\n";
	$email_message .= "Email: ".clean_string($email_from)."\n";
	$email_message .= "Telephone: ".clean_string($telephone)."\n";
	$email_message .= "Comments: ".clean_string($comments)."\n";
	
	
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);  
?>

<!-- place your own success html below -->

Thank you for contacting us. We will be in touch with you very soon.

<?php
}
die();
?>

Example HTML Form

< Download the complete html form script here >

We also offer a Form Builder application which will enable you to build your own forms. As well as our pre-built booking form script and order form script.

HTML form field examples

To add new fields to your form, just copy and paste the field type you need from the examples below.
We have included a breakdown of different HTML Form tags.

HTML Form Tags

HTML website forms should be enclosed inside the FORM tags. There are various parameter options available, the most common ones are:
action - this allows you to tell the form where to go once submitted (usually the filename of a script which will read and process the form data which has been submitted).
name - it's usually a good idea to give your forms a name, this is used to uniquely identify your form on a given page.
method - the value of this should be POST or GET. This tells the form how to send the data once submitted. Forms should usually always be set to use POST (as GET will attached the form data onto the page URL which is almost always a bad idea for security reasons). There are some other methods available, but we will not discuss these here.

 <form action="index.php" name="myform" method="POST">
  Example form field: <input type="text" name="example">
 </form>

HTML Text Field - Single Line

This is without doubt the most common field you will find.

 <form action="index.php">
  Enter your name: <input type="text" name="your_name">
 </form>

Text field in action

Enter your name:

HTML Textarea (multiple lines text field )

The multi-line text field (commonly known as a textarea field) is more suitable to take larger block of text from your visitors. This is idea for comments.

 <form action="index.php">
  Comments: <textarea rows="5" cols="30"> 
 </form>

Textarea field in action

Comments:

HTML Radio Buttons

When you want your users to pick one item from a short list, the radio button set is ideal.

 <form action="index.php">
  <input type="radio" name="color" value="red" /> Red<br />
  <input type="radio" name="color" value="white" /> White<br />
  <input type="radio" name="color" value="blue" /> Blue<br />
  <input type="radio" name="color" value="green" /> Green<br />
 </form>

Radio button group in action

Red
White
Blue
Green

HTML Check box fields (checkboxes)

When you want your users to pick one or more items from a short list, then checkboxes are ideal.

 <form action="index.php">
  <input type="checkbox" name="friut" value="apples" /> Apples<br />
  <input type="checkbox" name="friut" value="oranges" /> Oranges<br />
  <input type="checkbox" name="friut" value="pears" /> Pears<br />
  <input type="checkbox" name="friut" value="peaches" /> Peaches<br />
 </form>

Checkboxes in action

Apples
Oranges
Pears
Peaches

HTML File Upload Field (field selector)

Sometimes it may be good to offer your website users the option to upload a file. For this you could use the HTML field type file. If you are using this option you also need to include an additional option to the FORM tag enctype="multipart/form-data"

 <form action="index.php" enctype="multipart/form-data">
  Select a file to upload: <input type="file" name="selectedfile" />
 </form>

File input type (file upload) in action

Select a file to upload:

HTML Password Field

If you ever need to ask your users to enter a password into a form, then you should use the special text field type password. Using this option will mask each character as the user types, allowing them to type in secret.

 <form action="index.php">
  Enter your password: <input type="password" name="password">
 </form>

Password field in action

Enter your password:

HTML drop-downs (aka selects or combo-boxes)

When you want your visitors to pick something from a list, you could use a drop-down list. These are sometimes know as option selects, select fields or combo-boxes. By default only one option can be selected, however you can allow multiple selections by including the word multiple to your select tag (this will also alter the appearance of the field).

 <form action="index.php">
  Select Something: 
  <select name="something">
   <option value="Google">Google</option>
   <option value="Bing">Bing</option>
   <option value="Yahoo">Yahoo</opton>
  </select>
 </form>

HTML Drop-down select field in action

Select Something:

HTML Submit button

Finally, every form should probably allow the user to option of submitting the form. Form submissions are usually handled by using an HTML button. Again the button field is an input type field (as text and password fields are), however these special fields are of type submit. To specify the text which appears on the button, we use the value parameter to state out value (in the example below we state 'Submit Form').

 <form action="index.php">
  <input type="submit" value="Submit Form" name="submit">
 </form>

Submit button field in action

HTML Reset button

Occassionally you may want to allow your visitors to reset a form back to its default state. This is accomplished by using the input type of reset. As with the Submit button, you specify the button text using the value parameter. Reset buttons are not very common these days but can still be useful under certain circumstances.

 <form action="index.php" name="resettest">
  Enter your name: <input type="text" name="your_name"><br />
  <input type="reset" value="Reset Form" name="submit">
 </form>

Reset button field in action

tick
We now offer a contact form (which is totally unbranded). It comes with full source-code, click here for details.

First Name *
Last Name *
Email Address *
Telephone Number
Comments *
( HTML Form )