Web Contact Form (Radio Buttons, Checkboxes)

Looking on the web you can find numerous examples of simple web contact forms using text boxes and text areas, but the ones dealing with radio buttons and check boxes are hard to come by.

This simple how-to will show how to display, validate and email the form contents from a PHP page to an email box, it will use text boxes, text areas, check boxes and radio buttons.

We are going to use the multi-purpose page approach leaving everything to be done on one page or script, no outside pages or scripts fro validation or messages. Easier to maintain and easier to deploy the script in a real world setting.

No need to be familiar with PHP, but here are the functions that we will be using in the article.

• isset()
• empty()
• foreach()
• !
• mail()
• $_SERVER

The multi-purpose page approach is based on two things concerning the form submittal:

1. When I don't push the submit button
2. When I do push the submit button

On step one we use the isset() function to look to see if the Submit button has been set or pushed which would cause it to be set.

<!--this will show the form-->
<?php if(!isset($_POST['Submit'])){
$errMess = 'Welcome to the Form Test';//you change this message;
$aClass = 'norm';//look at the css
?>
<h3><?=$errMess;?></h3>
<form name="form1" id="form1" action="<?=$_SERVER['PHP_SELF'];?>" method="post">

<!-- rest of code -->

First line:

if(!isset($_POST['Submit']) using the isset function to look for the Submit button variable, we know that when the form first loads it will stop from self submitting, because the button was not pushed.

This is the variable in raw form $_POST['Submit'] that we are looking for using the isset function.

We could rewrite that and assign it to another variable i.e. $submit = $_POST['Submit'], but that is beyond the scope of the tutorial.

This is the form code:

<form name="form1" id="form1" action="<?=$_SERVER['PHP_SELF'];?>" method="post">
<table>
<tr>
<td>Email</td><td><input class="<?=$aClass;?>" id="email" name="email" type="text" value="<?=$_POST['email'];?>"/></td>
</tr>
<tr>
<td>Is the sky blue</td>
<td>
<ul class="<?=$aClass;?>">
<li><input name="sky" type="radio" value="Yes" /> Yes</li>
<li><input name="sky" type="radio" value="No" /> No</li>
</ul>
</td>
</tr>
<tr>
<td>Things you like about the sky</td>
<td>
<ul class="<?=$aClass;?>">
<li><input name="likeSky[]" type="checkbox" value="stars" /> Stars</li>
<li><input name="likeSky[]" type="checkbox" value="moon" /> Moon</li>
<li><input name="likeSky[]" type="checkbox" value="clouds" /> Clouds</li>
</ul>
</td>
</tr>
<tr>
<td>Message</td><td><textarea name="comments" rows="5" class="<?=$aClass;?>" id="comments"></textarea></td>
</tr>
<tr>
<td colspan="2"><div align="center"><input id="Submit" name="Submit" type="submit" value="Submit" /></div></td>
</tr>
</table>

As you can see nothing fancy or complicated.

We now go into step two of our multi-purpose form technique, we pushed the submit button, here it is.

}else{
//set up the variables for validation and then processing
$email = $_POST['email'];
$comments = $_POST['comments'];
$sky= $_POST['sky'];
$likeSky = $_POST['likeSky'];

The above just takes the form values and assigns them to a variable easier to deal with in the validation and the processing.

We have to be able to stop the form if we have missing form elements, like the following:

//some simple validation for empty values
if(empty($email) || empty($comments) || empty($sky) || empty($likeSky)){
$errMess = 'Fill out the form!';//you change this message;
$aClass = 'err';//look at the css

The empty() function, just does what it says; looks for nothing, and if it does its job, the script will stop and display our simple form again, along with some CSS values assigned to a PHP variable, that way you can change the look of the form for errors without re-writing it.

The next step is secondary step built into step two, this will happen when the form is filled out and ready to be emailed:

$to = $email;//you can change this line and put in your own email i.e. "whateverMyEmailIs@yoyo.com"
$subject = "$email has got a Question for You!";
$message = "Is the sky is blue?\r\n";
$message.="$sky\r\n\n";
$message.="I love this part of the sky:\r\n";
foreach ($likeSky as $likeSky){
$message.="$likeSky\n";
}
$message.= "\n\n$comments";
//end message, begin headers
$headers = "From: $email\r\n";
$headers.= "Reply-To: $email\r\n";
$headers.= "X-Mailer: PHP/" . phpversion();
$helloWorld = true;

Now in bold we have hi-lighted the foreach loop to look though the form values that are in the checkbox array, we use this because on the form we display the checkboxed values are like so.

<li><input name="likeSky[ ]" type="checkbox" value="stars" /> Stars</li>
<li><input name="likeSky[ ]" type="checkbox" value="moon" /> Moon</li>
<li><input name="likeSky[ ]" type="checkbox" value="clouds" /> Clouds</li>

Notice the names we gave the checkboxes are all the same names, and we also named all the radio buttons the same name:

<li><input name="sky" type="radio" value="Yes" /> Yes</li>
<li><input name="sky" type="radio" value="No" /> No</li>

One difference; we don't need the radio buttons to have multiple values assigned, but we do with the checkboxes, because they are created to have such ability (to carry multiple values).

The brackets [ ] are PHP's way of assigning it (element) to a collection of values i.e. sky collection has stars, moon, clouds, etc, the list could gone on, but with this form we wanted this selection of options for the user.

More could be said and written about arrays but again, the explanation is outside of the scope of this article.

The last function we go over is the mail function:

mail($to,$subject,$message,$headers);

All this does is take take the variables and send them out (email).

In the script we validate whether the function worked or not, (not if the person got the email), plenty can be written on that subject, we accomplish this like so:

if($helloWorld !=true){
$errMess = 'Email Failed!';//you change this message;
$aClass = 'err';//look at the

Earlier in the how-to we see a variable that we assigned the value true to:

$helloWorld = true;

That would only be true if the mail function worked properly, if not an error message will display and the form will show and ready for another try at it.

If the mail function did not fail we simply show a message and of course our handy form ready for another message.

Here is the entire code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Email testo</title>
<style>
body{font-family:Arial, Helvetica, sans-serif;font-size:13px;}
table{width:300px;border:1px solid #cccccc;background-color:#f1f1f1;}
h3{color:#0099FF;}
/*--classes for the form --*/
.norm{font-family:Arial, Helvetica, sans-serif;font-size:11px;list-style:none;}
.err{font-family:Arial, Helvetica, sans-serif;font-size:11px;border:1px solid #FF0000;}
</style>
</head>

<body>
<!--this will show the form-->
<?php if(!isset($_POST['Submit'])){
$errMess = 'Welcome to the Form Test';//you change this message;
$aClass = 'norm';//look at the css
?>
<h3><?=$errMess;?></h3>
<form name="form1" id="form1" action="<?=$_SERVER['PHP_SELF'];?>" method="post">
<table>
<tr>
<td>Email</td><td><input class="<?=$aClass;?>" id="email" name="email" type="text" value="<?=$_POST['email'];?>"/></td>
</tr>
<tr>
<td>Is the sky blue</td>
<td>
<ul class="<?=$aClass;?>">
<li><input name="sky" type="radio" value="Yes" /> Yes</li>
<li><input name="sky" type="radio" value="No" /> No</li>
</ul>
</td>
</tr>
<tr>
<td>Things you like about the sky</td>
<td>
<ul class="<?=$aClass;?>">
<li><input name="likeSky[]" type="checkbox" value="stars" /> Stars</li>
<li><input name="likeSky[]" type="checkbox" value="moon" /> Moon</li>
<li><input name="likeSky[]" type="checkbox" value="clouds" /> Clouds</li>
</ul>
</td>
</tr>
<tr>
<td>Message</td><td><textarea name="comments" rows="5" class="<?=$aClass;?>" id="comments"></textarea></td>
</tr>
<tr>
<td colspan="2"><div align="center"><input id="Submit" name="Submit" type="submit" value="Submit" /></div></td>
</tr>
</table>
</form>
<!--this will do the validation and processing-->
<?php
}else{
//set up the variables for validation and then processing
$email = $_POST['email'];
$comments = $_POST['comments'];
$sky= $_POST['sky'];
$likeSky = $_POST['likeSky'];
//some simple validation for empty values
if(empty($email) || empty($comments) || empty($sky) || empty($likeSky)){
$errMess = 'Fill out the form!';//you change this message;
$aClass = 'err';//look at the css
?>
<h3><?=$errMess;?></h3>
<form name="form1" id="form1" action="<?=$_SERVER['PHP_SELF'];?>" method="post">
<table>
<tr>
<td>Email</td><td><input class="<?=$aClass;?>" id="email" name="email" type="text" value="<?=$_POST['email'];?>"/></td>
</tr>
<tr>
<td>Is the sky blue</td>
<td>
<ul class="<?=$aClass;?>">
<li><input name="sky" type="radio" value="Yes" /> Yes</li>
<li><input name="sky" type="radio" value="No" /> No</li>
</ul>
</td>
</tr>
<tr>
<td>Things you like about the sky</td>
<td>
<ul class="<?=$aClass;?>">
<li><input name="likeSky[]" type="checkbox" value="stars" /> Stars</li>
<li><input name="likeSky[]" type="checkbox" value="moon" /> Moon</li>
<li><input name="likeSky[]" type="checkbox" value="clouds" /> Clouds</li>
</ul>
</td>
</tr>
<tr>
<td>Message</td><td><textarea name="comments" rows="5" class="<?=$aClass;?>" id="comments"></textarea></td>
</tr>
<tr>
<td colspan="2"><div align="center"><input id="Submit" name="Submit" type="submit" value="Submit" /></div></td>
</tr>
</table>
</form
><!--this will end the conditional statement-->
<?
}else{
//if we get past the validation we parse it
//mail the message
$to = $email;//you can change this line and put in your own email i.e. "whateverMyEmailIs@yoyo.com"
$subject = "$email has got a Question for You!";
$message = "Is the sky is blue?\r\n";
$message.="$sky\r\n\n";
$message.="I love this part of the sky:\r\n";
foreach ($likeSky as $likeSky){
$message.="$likeSky\n";
}
$message.= "\n\n$comments";
//end message, begin headers
$headers = "From: $email\r\n";
$headers.= "Reply-To: $email\r\n";
$headers.= "X-Mailer: PHP/" . phpversion();
$helloWorld = true;
//testo baby
//echo $to;
//echo $subject;
//echo $message;
//return;
mail($to,$subject,$message,$headers);
if($helloWorld !=true){
$errMess = 'Email Failed!';//you change this message;
$aClass = 'err';//look at the css
?>
<h3><?=$errMess;?></h3>
<form name="form1" id="form1" action="<?=$_SERVER['PHP_SELF'];?>" method="post">
<table>
<tr>
<td>Email</td><td><input class="<?=$aClass;?>" id="email" name="email" type="text" value="<?=$_POST['email'];?>"/></td>
</tr>
<tr>
<td>Is the sky blue</td>
<td>
<ul class="<?=$aClass;?>">
<li><input name="sky" type="radio" value="Yes" /> Yes</li>
<li><input name="sky" type="radio" value="No" /> No</li>
</ul>
</td>
</tr>
<tr>
<td>Things you like about the sky</td>
<td>
<ul class="<?=$aClass;?>">
<li><input name="likeSky[]" type="checkbox" value="stars" /> Stars</li>
<li><input name="likeSky[]" type="checkbox" value="moon" /> Moon</li>
<li><input name="likeSky[]" type="checkbox" value="clouds" /> Clouds</li>
</ul>
</td>
</tr>
<tr>
<td>Message</td><td><textarea name="comments" rows="5" class="<?=$aClass;?>" id="comments"></textarea></td>
</tr>
<tr>
<td colspan="2"><div align="center"><input id="Submit" name="Submit" type="submit" value="Submit" /></div></td>
</tr>
</table>
</form>
<?php
}else{
$errMess = 'We have received your inquiry and will be in touch shortly!<br/>Thank you!';//you change this message;
$aClass = 'norm';//look at the css
?>
<h3><?=$errMess;?></h3>
<form name="form1" id="form1" action="<?=$_SERVER['PHP_SELF'];?>" method="post">
<table>
<tr>
<td>Email</td><td><input class="<?=$aClass;?>" id="email" name="email" type="text" value="<?=$_POST['email'];?>"/></td>
</tr>
<tr>
<td>Is the sky blue</td>
<td>
<ul class="<?=$aClass;?>">
<li><input name="sky" type="radio" value="Yes" /> Yes</li>
<li><input name="sky" type="radio" value="No" /> No</li>
</ul>
</td>
</tr>
<tr>
<td>Things you like about the sky</td>
<td>
<ul class="<?=$aClass;?>">
<li><input name="likeSky[]" type="checkbox" value="stars" /> Stars</li>
<li><input name="likeSky[]" type="checkbox" value="moon" /> Moon</li>
<li><input name="likeSky[]" type="checkbox" value="clouds" /> Clouds</li>
</ul>
</td>
</tr>
<tr>
<td>Message</td><td><textarea name="comments" rows="5" class="<?=$aClass;?>" id="comments"></textarea></td>
</tr>
<tr>
<td colspan="2"><div align="center"><input id="Submit" name="Submit" type="submit" value="Submit" /></div></td>
</tr>
</table>
</form
><?php
}//end mail if
}//end second if
} ?>
</body>
</html>

We touched on a few key functions and a splash of CSS to give the user some feedback.

That should give you a good primer on how to deal radio buttons and checkboxes in a html form using PHP.

Please do come back and look over my articles to come on ready to use techiques and code concerning PHP, HTML and CSS.