Contact forms are a great way to enable visitors to your site to contact you. In this tutorial, I will explain how to create a contact form using HTML and PHP. While PHP is not the easiest language to learn, it is easily customizable and can be easily extended to work with various technologies such as mySQL and Flash!
Let's start with a very basic contact form for now. Our contact form will span two pages. One page will actually contain the HTML form, and the other page will contain the PHP code that receives the data from the HTML form and e-mails it to your mailbox:
This tutorial is in several parts. The first part will simply provide the code for recreating a contact form. You will copy and paste some code I provide for both the HTML page and the PHP page. In the second part of the tutorial, I explain why the code works. In the third part of the tutorial, I expand upon what you created by introducing more form elements such as checkboxes, option buttons, and drop-down menus!
The HTML Page
First, let us create the HTML page that simply contains the contact form. Create a new page called contact.htm. On that page, we will be add our contact form. Our form is very simple. It simply contains two text fields and and one text area.
Here is how our final form would look - not very pretty, I know:
But, let's start with a very basic form and build our way up to having something more complicated such as what you see above. The following is a lite version of the form:
<form method="POST" action="mailer.php">
<input type="text" name="name" size="19"><br>
<br>
<input type="text" name="email" size="19"><br>
<br>
<textarea rows="9" name="message" cols="30"></textarea>
<br>
<br>
<input type="submit" value="Submit" name="submit">
</form>
So, here is our PHP code. You should place the following code into a new file you create called mailer.php.
<?php
if(isset($_POST['submit'])) {
$to = "you@you.com";
$subject = "Form Tutorial";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";
echo "Data has been submitted to $to!";
mail($to, $subject, $body);
} else {
echo "blarg!";
}
?>
Once you copy and paste the above code into mailer.php, make sure you change the text you@you.com to your e-mail address. Save this file.
You should now have completed versions of both the contact.htm and mailer.php files. Upload both of those files to the same directory on your web server. Open the contact.htm page in your browser. Fill out the form and press the Submit button. If everything worked out, which I'm sure it did, you should receive the data you entered in the mailbox of the address you specified in mailer.php.
Why this Works
In this and the previous page, you simply copied and pasted code I gave you. I'm going to explain why the code works so that you can implement your own variation of this form for your needs later!
Let's start with the HTML code:
<form method="POST" action="mailer.php">
<input type="text" name="name" size="19"><br>
<br>
<input type="text" name="email" size="19"><br>
<br>
<textarea rows="9" name="message" cols="30"></textarea>
<br>
<br>
<input type="submit" value="Submit" name="submit">
</form>
The first line of code tells the form where to send the data. In our case, our form data will be handled by our php file mailer.php. The word post is emphasized because we are telling the form to send the data to the file.
The next sections of code are standard HTML definitions for creating form elements. The important thing you should take note are the actual names I have given the form elements. The input text fields are called name and email. The name of the message box is called message. Finally, your submit button is aptly called - submit!
The names of the form elements have no effect on the functioning of your form. They simply help to categorize the data, and that will be useful when we are retrieving the data into the PHP file!
Let's now look at the PHP code:
<?php
if(isset($_POST['submit'])) {
$to = "you@you.com";
$subject = "Form Tutorial";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";
echo "Data has been submitted to $to!";
mail($to, $subject, $body);
} else {
echo "blarg!";
}
?>
In this section of code, I check to see if the visitor accessed mailer.php via contact.htm or if the visitor simply went to the mailer.php file directly. If the user pressed the Submit button on contact.htm, the if statement will return a true because isset($_POST['submit']) will not return false!
If someone accessed the site without first pressing the Submit button on contact.htm, isset($_POST['submit']) will return false and the code under else would be executed.
$to = "you@you.com";
$subject = "Form Tutorial";
In the next two lines of your PHP code, you create two variables that simply store your e-mail address and the e-mail subject. Nothing too complicated here.
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
Finally - some action! These three variables catch the data sent from the form on contact.htm. The form data is collected in a series of $_POST variables with the form element name specified. Note the appearance of name, email, and message...the same three names we gave our form elements in our contact.htm page earlier.
$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";
In the above line I am just combining all previous parts of our message into one variable. Why would I want to do that?
The reason is that the PHP mail function only takes in one variable for the body of your e-mail. Since we have three variables relating to information the user submitted, we need to nicely compact all three pieces of data into one variable that can be passed into our mail function. You will see what I mean when I explain my use of the mail function below.
echo "Data has been submitted to $to!";
mail($to, $subject, $body);
This is the section of code that executes if the user submitted the form data. The first line simply displays a line of text in the browser that says "Data has been submitted to you@you.com!" (where you@you.com is your e-mail address specified by $to).
The second line is the PHP mail function. The mail function takes in three arguments. It takes the address to send the data to, the subject of the e-mail, and the body of your e-mail. If you remember, earlier I created a variable $body that took and formatted the values of what the user sent. I gave a weak reason without any proof as to why I would need to do that. Now you see that the mail function only takes in one argument for the body of the e-mail message. That's why I, as I explained earlier, combined the user inputted data into the $body variable. That's the only way our mail function would display all of the user-inputted data.
echo "error: no data sent!";
The above line executes only when the user accesses the mailer.php file without actually submitting the form from contact.htm. In that case, the browser simply displays the no data sent message.
Checkboxes
Implementing a checkbox in HTML is easy! Getting them to work in PHP is a little less straightforward. Let's look at our basic HTML example again, this time, with checkboxes added:
<form method="POST" action="mailer2.php">
Name:
<input type="text" name="name" size="19"><br>
<br>
E-Mail:
<input type="text" name="email" size="19"><br>
<br>
<input type="checkbox" name="check[]" value="blue_color"> Blue<br>
<input type="checkbox" name="check[]" value="green_color"> Green<br>
<input type="checkbox" name="check[]" value="orange_color"> Orange<br>
<br>
Message:<br>
<textarea rows="9" name="message" cols="30"></textarea><br>
<br>
<input type="submit" value="Submit" name="submit">
</form>
Since our HTML code is very similar to what you had earlier, I have only emphasized the checkbox code. Here is our modified mailer.php code that accommodates the use of checkboxes:
<?php
if(isset($_POST['submit'])) {
$to = "kirupa@kirupa.com";
$subject = "Form Tutorial";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
foreach($_POST['check'] as $value) {
$check_msg .= "Checked: $value\n";
}
$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message\n $check_msg";
echo "Data has been submitted to $to!";
mail($to, $subject, $body);
} else {
echo "blarg!";
}
?>
Checkbox Explanation
Note the code in pink our modified HTML code. The value of each textbox that gets passed to the PHP file is a brief description of what the textbox is.
The code in red is the actual name of each checkbox. Notice that, unlike the two text fields earlier, I do not give each checkbox a different name. The value for the checkbox name is an array variable called check[].
Basically, here 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 green and blue checkboxes, your check[] array contains the values green_color and blue_color as its elements.
In other words, each checkbox value ends up being an element of the check[] array. Now, if you remember, we have to get all of our form elements stashed into one variable ($body) that can be sent as an argument for the body into PHP's mail function.
So, what we need to do, is figure out a way of taking the values from the array and store it in a variable. That new variable can then be concatenated (linked together) with your previous form element data into our $body variable:
$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message\n $check_msg";
As you can see from the above code, our checkbox values are stored nicely into the $check_msg variable. So, to reiterate, we require a way of taking the values from the check array and storing them in this variable. Well, PHP provides a great function that iterates through an array: foreach()
Here is our code using foreach():
foreach($_POST['check'] as $value) {
$check_msg .= "Checked: $value\n";
}
The array we are looping through is check, and we are storing each element of the array into a variable called $value. The body of the function simply increments the $check_msg variable with the value of each element in your array. For, foreach, simply goes through each element in your array, executes the body, goes to the next element in the array, executes the body, and so on until it reaches the end of the array.
This is similar to a do/while loop with the end test being when you reach the end of your array. Most of the complexities of implementing such a loop, though, are hidden by the foreach function!
Option (Radio) Buttons and Drop-Down Menus
The following is both the HTML and PHP code for our contact form with the code for the option buttons and drop-down menus emphasized:
<form method="POST" action="mailer.php">
Name:
<input type="text" name="name" size="19"><br>
<br>
E-Mail:
<input type="text" name="email" size="19"><br>
<br>
<input type="checkbox" name="check[]" value="blue_color"> Blue<br>
<input type="checkbox" name="check[]" value="green_color"> Green<br>
<input type="checkbox" name="check[]" value="orange_color"> Orange<br>
<br>
<input type="radio" value="yes" name="radio"> YES<br>
<input type="radio" value="no" name="radio"> NO
<br>
<br>
<select size="1" name="drop_down">
<option>php</option>
<option>xml</option>
<option>asp</option>
<option>jsp</option>
</select><br>
<br>
Message:<br>
<textarea rows="9" name="message" cols="30"></textarea><br>
<br>
<input type="submit" value="Submit" name="submit">
</form>
Not to be left behind, here is the PHP code tagging along:
<?php
if(isset($_POST['submit'])) {
$to = "you@you.com";
$subject = "Form Tutorial";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
$option = $_POST['radio'];
$dropdown = $_POST['drop_down'];
foreach($_POST['check'] as $value) {
$check_msg .= "Checked: $value\n";
}
$body = "From: $name_field\n E-Mail: $email_field\n $check_msg Option: $option\n Drop-Down: $dropdown\n Message:\n $message\n";
echo "Data has been submitted to $to!";
mail($to, $subject, $body);
} else {
echo "blarg!";
}
?>
Explanation
As you can tell from the above code, the option buttons and drop-down menu behave similarly to our text field and message area form elements. The reason is that nothing fancy is going on behind the scenes.
Note the code that is colored in red in the HTML code, and find its corresponding red code in the PHP code. I highlighted the code in pink in the PHP code to simply show that I still combine these new pieces of data into our ever-expanding $body variable.
Let's start with a very basic contact form for now. Our contact form will span two pages. One page will actually contain the HTML form, and the other page will contain the PHP code that receives the data from the HTML form and e-mails it to your mailbox:
The HTML Page
First, let us create the HTML page that simply contains the contact form. Create a new page called contact.htm. On that page, we will be add our contact form. Our form is very simple. It simply contains two text fields and and one text area.
Here is how our final form would look - not very pretty, I know:
<form method="POST" action="mailer.php">
<input type="text" name="name" size="19"><br>
<br>
<input type="text" name="email" size="19"><br>
<br>
<textarea rows="9" name="message" cols="30"></textarea>
<br>
<br>
<input type="submit" value="Submit" name="submit">
</form>
So, here is our PHP code. You should place the following code into a new file you create called mailer.php.
<?php
if(isset($_POST['submit'])) {
$to = "you@you.com";
$subject = "Form Tutorial";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";
echo "Data has been submitted to $to!";
mail($to, $subject, $body);
} else {
echo "blarg!";
}
?>
Once you copy and paste the above code into mailer.php, make sure you change the text you@you.com to your e-mail address. Save this file.
You should now have completed versions of both the contact.htm and mailer.php files. Upload both of those files to the same directory on your web server. Open the contact.htm page in your browser. Fill out the form and press the Submit button. If everything worked out, which I'm sure it did, you should receive the data you entered in the mailbox of the address you specified in mailer.php.
Why this Works
In this and the previous page, you simply copied and pasted code I gave you. I'm going to explain why the code works so that you can implement your own variation of this form for your needs later!
Let's start with the HTML code:
<form method="POST" action="mailer.php">
<input type="text" name="name" size="19"><br>
<br>
<input type="text" name="email" size="19"><br>
<br>
<textarea rows="9" name="message" cols="30"></textarea>
<br>
<br>
<input type="submit" value="Submit" name="submit">
</form>
The first line of code tells the form where to send the data. In our case, our form data will be handled by our php file mailer.php. The word post is emphasized because we are telling the form to send the data to the file.
The next sections of code are standard HTML definitions for creating form elements. The important thing you should take note are the actual names I have given the form elements. The input text fields are called name and email. The name of the message box is called message. Finally, your submit button is aptly called - submit!
The names of the form elements have no effect on the functioning of your form. They simply help to categorize the data, and that will be useful when we are retrieving the data into the PHP file!
Let's now look at the PHP code:
<?php
if(isset($_POST['submit'])) {
$to = "you@you.com";
$subject = "Form Tutorial";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";
echo "Data has been submitted to $to!";
mail($to, $subject, $body);
} else {
echo "blarg!";
}
?>
In this section of code, I check to see if the visitor accessed mailer.php via contact.htm or if the visitor simply went to the mailer.php file directly. If the user pressed the Submit button on contact.htm, the if statement will return a true because isset($_POST['submit']) will not return false!
If someone accessed the site without first pressing the Submit button on contact.htm, isset($_POST['submit']) will return false and the code under else would be executed.
$to = "you@you.com";
$subject = "Form Tutorial";
In the next two lines of your PHP code, you create two variables that simply store your e-mail address and the e-mail subject. Nothing too complicated here.
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
Finally - some action! These three variables catch the data sent from the form on contact.htm. The form data is collected in a series of $_POST variables with the form element name specified. Note the appearance of name, email, and message...the same three names we gave our form elements in our contact.htm page earlier.
$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";
In the above line I am just combining all previous parts of our message into one variable. Why would I want to do that?
The reason is that the PHP mail function only takes in one variable for the body of your e-mail. Since we have three variables relating to information the user submitted, we need to nicely compact all three pieces of data into one variable that can be passed into our mail function. You will see what I mean when I explain my use of the mail function below.
echo "Data has been submitted to $to!";
mail($to, $subject, $body);
This is the section of code that executes if the user submitted the form data. The first line simply displays a line of text in the browser that says "Data has been submitted to you@you.com!" (where you@you.com is your e-mail address specified by $to).
The second line is the PHP mail function. The mail function takes in three arguments. It takes the address to send the data to, the subject of the e-mail, and the body of your e-mail. If you remember, earlier I created a variable $body that took and formatted the values of what the user sent. I gave a weak reason without any proof as to why I would need to do that. Now you see that the mail function only takes in one argument for the body of the e-mail message. That's why I, as I explained earlier, combined the user inputted data into the $body variable. That's the only way our mail function would display all of the user-inputted data.
echo "error: no data sent!";
The above line executes only when the user accesses the mailer.php file without actually submitting the form from contact.htm. In that case, the browser simply displays the no data sent message.
Checkboxes
Implementing a checkbox in HTML is easy! Getting them to work in PHP is a little less straightforward. Let's look at our basic HTML example again, this time, with checkboxes added:
<form method="POST" action="mailer2.php">
Name:
<input type="text" name="name" size="19"><br>
<br>
E-Mail:
<input type="text" name="email" size="19"><br>
<br>
<input type="checkbox" name="check[]" value="blue_color"> Blue<br>
<input type="checkbox" name="check[]" value="green_color"> Green<br>
<input type="checkbox" name="check[]" value="orange_color"> Orange<br>
<br>
Message:<br>
<textarea rows="9" name="message" cols="30"></textarea><br>
<br>
<input type="submit" value="Submit" name="submit">
</form>
Since our HTML code is very similar to what you had earlier, I have only emphasized the checkbox code. Here is our modified mailer.php code that accommodates the use of checkboxes:
<?php
if(isset($_POST['submit'])) {
$to = "kirupa@kirupa.com";
$subject = "Form Tutorial";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
foreach($_POST['check'] as $value) {
$check_msg .= "Checked: $value\n";
}
$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message\n $check_msg";
echo "Data has been submitted to $to!";
mail($to, $subject, $body);
} else {
echo "blarg!";
}
?>
Checkbox Explanation
Note the code in pink our modified HTML code. The value of each textbox that gets passed to the PHP file is a brief description of what the textbox is.
The code in red is the actual name of each checkbox. Notice that, unlike the two text fields earlier, I do not give each checkbox a different name. The value for the checkbox name is an array variable called check[].
Basically, here 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 green and blue checkboxes, your check[] array contains the values green_color and blue_color as its elements.
In other words, each checkbox value ends up being an element of the check[] array. Now, if you remember, we have to get all of our form elements stashed into one variable ($body) that can be sent as an argument for the body into PHP's mail function.
So, what we need to do, is figure out a way of taking the values from the array and store it in a variable. That new variable can then be concatenated (linked together) with your previous form element data into our $body variable:
$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message\n $check_msg";
As you can see from the above code, our checkbox values are stored nicely into the $check_msg variable. So, to reiterate, we require a way of taking the values from the check array and storing them in this variable. Well, PHP provides a great function that iterates through an array: foreach()
Here is our code using foreach():
foreach($_POST['check'] as $value) {
$check_msg .= "Checked: $value\n";
}
The array we are looping through is check, and we are storing each element of the array into a variable called $value. The body of the function simply increments the $check_msg variable with the value of each element in your array. For, foreach, simply goes through each element in your array, executes the body, goes to the next element in the array, executes the body, and so on until it reaches the end of the array.
This is similar to a do/while loop with the end test being when you reach the end of your array. Most of the complexities of implementing such a loop, though, are hidden by the foreach function!
Option (Radio) Buttons and Drop-Down Menus
The following is both the HTML and PHP code for our contact form with the code for the option buttons and drop-down menus emphasized:
<form method="POST" action="mailer.php">
Name:
<input type="text" name="name" size="19"><br>
<br>
E-Mail:
<input type="text" name="email" size="19"><br>
<br>
<input type="checkbox" name="check[]" value="blue_color"> Blue<br>
<input type="checkbox" name="check[]" value="green_color"> Green<br>
<input type="checkbox" name="check[]" value="orange_color"> Orange<br>
<br>
<input type="radio" value="yes" name="radio"> YES<br>
<input type="radio" value="no" name="radio"> NO
<br>
<br>
<select size="1" name="drop_down">
<option>php</option>
<option>xml</option>
<option>asp</option>
<option>jsp</option>
</select><br>
<br>
Message:<br>
<textarea rows="9" name="message" cols="30"></textarea><br>
<br>
<input type="submit" value="Submit" name="submit">
</form>
Not to be left behind, here is the PHP code tagging along:
<?php
if(isset($_POST['submit'])) {
$to = "you@you.com";
$subject = "Form Tutorial";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
$option = $_POST['radio'];
$dropdown = $_POST['drop_down'];
foreach($_POST['check'] as $value) {
$check_msg .= "Checked: $value\n";
}
$body = "From: $name_field\n E-Mail: $email_field\n $check_msg Option: $option\n Drop-Down: $dropdown\n Message:\n $message\n";
echo "Data has been submitted to $to!";
mail($to, $subject, $body);
} else {
echo "blarg!";
}
?>
Explanation
As you can tell from the above code, the option buttons and drop-down menu behave similarly to our text field and message area form elements. The reason is that nothing fancy is going on behind the scenes.
Note the code that is colored in red in the HTML code, and find its corresponding red code in the PHP code. I highlighted the code in pink in the PHP code to simply show that I still combine these new pieces of data into our ever-expanding $body variable.
No comments:
Post a Comment