Web Contact Form (Radio Buttons, Checkboxes)

Radio Buttons and 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.

More by this Author


Comments 13 comments

Lgali profile image

Lgali 7 years ago

very useful hub


gfang profile image

gfang 7 years ago from Southern California

You might write a hub letting people know what the difference between server side (PHP) and client side scripting/code is, and how to set up a server on their machine, or how to use the functions of a hosting account they already have.  Most web hosting services will allow their clients to use PHP.  You might mention that PHP and MySQL are free.

I like to see someone excited about this stuff, keep at it.

 


Alpho011 profile image

Alpho011 7 years ago from Marietta, Georgia Author

I think I will write those and thanks for the comment.


bvitrano 7 years ago from El Paso, Texas

Consider seperating your HTML from your form processing script

<form action="contact_form_processing.php" method="post">

It helps to keep things seperate.


@@@ 6 years ago

gfdg


purple 6 years ago

good tuts, on forms, but amnot able to get it, when i tried,shuld i keep html seperate from proceesing script, pls get bck, i need this tuts badly


ljfuiano 6 years ago

I'm able to get almost everything to work. I formatted new css and the e-mails and verification work great. However, I'm unable to add fields. For example, I wanted to add a "name" and "shipping address" to the form. The extra fields will display, but they will not return content in the e-mail.

Any thoughts/suggestions?


Hes 6 years ago

I get a "Invalid argument supplied for foreach()" can you tel me why ;)


donno php 6 years ago

use [code] [/code] boxes and it will be much easier to read the tut.

thx anyways.


Alpho011 profile image

Alpho011 6 years ago from Marietta, Georgia Author

@donno php:

Tell me how to do that I was trying to come up with an easier readable way to lay it out.


cristy 6 years ago

hi!!

gracias por el aporte me ayudo bastante Dios te bendiga :)


Seattle Architects 5 years ago

Very useful tutorial. Thanks for putting this together. I was able to get it working well after studying this.


Datax 5 years ago

I love this. It works. Good job

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working