Adding fields to the HTML contact form

This tutorial will show you how to add fields to the HTML contact form. This tutorial is a continuation of the tutorial How to create a contact form in HTML. If you have the files from that tutorial then open to continue on, or else download them

Part 1. HTML

Open the index.html file with your prefered HTML editor. We have 2 input, 1 textarea element and two buttons. So let’s add more features to it, like checkboxes, radio buttons and a drop-down list. The HTML syntax for all those elements is quite easy and you can check it below. Add this code right after the Submit and Reset buttons.

Additional options:

	<input type="checkbox" name="check[]" value="USA">USA<br />
	<input type="checkbox" name="check[]" value="Canada">Canada<br />
	<input type="checkbox" name="check[]" value="Mexico">Mexico<br />

Do you agree?

<input type="radio" value="yes" name="cf_radio_button">Yes
<input type="radio" value="no" name="cf_radio_button">No

Select an item from the drop-down:

<select size="1" name="cf_drop_down">
	<option>php</option>
	<option>html</option>
	<option>css</option>
	<option>asp</option>
	<option>ajax</option>
	<option>javascript</option>
</select>

Let’s clarify some interesting moments in this code. You might have noticed that the names assigned to the checkboxes are not different, as in case with text field added previously, also they have square brackets at the end. The brackets define that this is an array variable. So this is how it works. For each checkbox you check, the check[] array receives the value of the checkboxes pressed. For example, after checking both the USA and Canada checkboxes, your check[] array contains the values checked_usa and check_canada as its elements.

Nothing fancy going on with the radion buttons or drop-down. We’ve assigned the same name “cf_radio_button” to both of the radio buttons, as you can’t select both at the same time, so each of them don’t need to have a unique name.

The drop-down list syntax is quite easy as well. Open the tag <select>, then list inside it the options, wrapped in <option>…</option> tags, and at the end close with a </select> tag. The <select> tag has 2 attributes assigned to it, one of which is name, and the second – size. The size attribute specifies the number of visible options in a drop-down list.</select>

So here’s the result you should get with that code added.

(click to enlarge)

Part 2. PHP

So, now that we have the elements on the page, we should proccess their data sent and add to the email sent. Below, is the final code of contact.php file

<?php
// Grabbing data sent from the form and assigning it to variables
$field_name = $_POST['cf_name'];
$field_email = $_POST['cf_email'];
$field_message = $_POST['cf_message'];

foreach($_POST['check'] as $value) {
	$check_boxes .= $value." ";
}

$radio_button = $_POST['cf_radio_button'];
$drop_down_item = $_POST['cf_drop_down'];

// Composing body of the message
$mail_to = 'gordon@template-help.com';
$subject = 'Message from a site visitor '.$field_name;

$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message."\n";
$body_message .= "Additional options checked: ".$check_boxes."\n";
$body_message .= "Did the customer agree: ".$radio_button."\n";
$body_message .= "Selected item from the dropdown list: ".$drop_down_item;

// Creating headers of the message
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";

$mail_status = mail($mail_to, $subject, $body_message, $headers);

if ($mail_status) { ?>
	<script language="javascript" type="text/javascript">
		alert('Thank you for the message. We will contact you shortly.');
		history.back(1);
	</script>
<?php
}

else { ?>
	<script language="javascript" type="text/javascript">
		alert('Message failed. Please, send an email to gordon@template-help.com');
		history.back(1);
	</script>
<?php
}
?>

Let’s see what parts of code have been added here, and what they actually do.

We’ll use the php function foreach() to iterate through an array “check” and store each element of the array into a variable called $value. Then we create a variable $check_boxes and increment it with the value of each element in your array

foreach($_POST['check'] as $value) {
	$check_boxes .= $value." ";
}

As you see below, the radio buttons and drop-down list are defined in a similar way to input text fields. We create a php variable and assign it the data sent from a radio box or the drop-down list

$radio_button = $_POST['cf_radio_button'];
$drop_down_item = $_POST['cf_drop_down'];

This piece of code is also similar to what we’ve done before. We just add new data to the final email

$body_message .= "Additional options checked: ".$check_boxes."\n";
$body_message .= "Did the customer agree: ".$radio_button."\n";
$body_message .= "Selected item from the dropdown list: ".$drop_down_item;

TIP: One small update that might be usefull. In the previous version of the script, after the javascript alert message, there was a manual redirect to the page you specify in the code window.location = ‘contact_page.html’; So if you rename the contact_page.html to something else, you’ll need to correct the file name in contact.php A better way would be replacing that code with this one

history.back(1);

Basically the code itself explains what it does. This is the same as clicking the Back button in your browser.