HTML Web Forms – Part 2: PHP File for Sending Form Data

Part 2 of our HTML Web Forms guide will be focused on creating the PHP file that will send the data entered in on our form to an email address. When it comes to processing forms, there are many different things you can do: you can send the information to a database, post it onto a page, and send it to an email address. The reason I chose to have my form handled by a PHP file that sends the data in an email, is because it was the easiest method I could find. If you search on Google you’ll find all kinds of ways to process a form, however just like in the last part of this guide, the biggest problem I had was integrating everything together with what I already had. This was largely due to the fact that I have minimal PHP knowledge, so not a lot of it made sense to me. Needless to say, because of that most of the methods I use in this part of the guide are pretty simple. So even if you don’t know anything about PHP either you should have no problems following this part of the guide. In fact while I was writing this part of the guide I came across a new way of handling check boxes, which actually made it a lot easier…and that’s good news for you!

If you haven’t already, I recommend reading through Part 1 of this guide, since you’ll need to edit the file you made in Part 1 at the end of this post. If you’ve already done Part 1, you should have a file named tutorial_form.html. Keep this file handy, since you’ll be editing a short line of code in it in step 10.

This is a multiple part series:

• Part 1: Creating the Form on an HTML Page
• Part 2: Creating the PHP File to Send the Form Data
• Part 3: Validating Form Fields with Javascript and PHP
• Part 4: Styling Your Form with CSS

Keep checking back over the next few days for the next part!

---

STEP
1

The first thing you should do is make a new folder and put the file from the last part (tutorial_form.html) inside of it. You can name the folder whatever you’d like, but it will help to have that file and the one we’re creating in this part in the same spot. Now you need to open up a fresh file in your favorite text editor, or program of choice, make sure it is 100% blank and save it as tutorial_form_submit.php. This will be the file we’ll work in for this part. Remember to save your file after each step, so if your computer crashes or you make a mistake you don’t lose too much!

---

STEP
2

Now that you have your blank PHP file, you need to add in what is essentially the starting PHP tag.

<?php

For those of you that may be really new to PHP, you can think of this as the opening tag for all your PHP. Only unlike HTML, we’ll have a ton more things that go inside. Then at the end of the file we’ll close this tag, just like with an HTML tag

---

STEP
3

First will add in the lines that tell the PHP file to get the data from the text field, drop down list, and text area, and then give them a name the PHP file can recognize. The reason we’re doing these first is because they’re a little easier than the check boxes and radio buttons, and they all work the same way.

<?php

$email = $_POST['email'] ;
$age = $_POST['age'] ;
$moredetails = $_POST['moredetails'] ;

The first line we added will be to handle the email text field in our form.

• $email is the name we’re giving the data that the PHP file gets from the form, this will be used later on to insert the data into an email.
• After the = sign we need to tell the PHP file to get (“post”) the data from the form, this is done with $_POST['email']. The name inside the brackets corresponds with the name of the text field in the HTML file for our form.
• Don’t forget the quotations inside the brackets, or the semicolon at the end, both are required to make everything work!

The next line is to handle the drop down list for the age ranges in our form.

• Again, $age is the name we’re giving to the data the PHP file collects from the drop down list in our form, and we’ll use this later on to send it in an email.
• Just like with the text field, we need to tell the PHP file to get the data that’s selected in the drop down list when the user submits the form, this is again done by using $_POST['age']. The name inside the brackets is the same name we gave to our drop down list in the HTML file for our form.
• Don’t forget the quotations inside the brackets, or the semicolon at the end, both are required to make everything work!

The last line in this step is for our text area field, everything works the same as the other two above.

• $moredetails is the name we’re giving to the data the PHP file collects from the text area field.
• Use $_POST['moredetails'] after the = sign to tell the PHP file to get the data that the user entered into the text area field.
• Again, don’t forget the quotations inside the brackets, or the semicolon at the end, both are required to make everything work!

---

STEP
4

The next set of lines will be to get the data from the radio buttons and the check boxes. These work a little differently than the fields we worked with above, mostly because there’s multiple inputs that are all part of the same group. We need to take into account the “group” factor. Remember how we added brackets after the name of our check boxes and radio buttons? This is why!

<?php

$email = $_POST['email'] ;
$age = $_POST['age'] ;
$moredetails = $_POST['moredetails'] ;

foreach($_POST['color'] as $value) {
		$color_msg .= "$value" ;
		}
foreach($_POST['pets'] as $value) {
		$pets_msg .= "$value, " ;
		}

The first set of lines is for our radio buttons.

• foreach($_POST ['color'] as $value) {    – This first line has some similar elements to what we worked with for our text field. What it’s telling the PHP file is for each piece of data that’s posted from the group named color, it should assign it the name $value. The reason we need to set it up this way for radio buttons is because there’s multiple inputs that can be chosen for the same question, and this is much more efficient than telling the PHP file to post something for each separate radio button, since only one will ever be picked anyway.
• $color_msg – This becomes the name of the values the PHP file gets from the form, and will be what we use to put the values into an email later on.
• “$value” – This last part after the equal sign is just defining what we’re giving the name to, in this case it’s the values that the PHP file gets from the line above.
• Pay attention to the subtle things in this code, like the curly brackets, the period before the equal sign, and the semicolons. All of these things are required for the code to run without errors.

The next set of lines is for our check boxes, and works exactly like the radio button code did.

• foreach($_POST['pets'] as $value) {    – Once again, this line is telling the PHP file to assign each piece of data it collects from pets group the name $value. This is especially important for check boxes because it’s possible for more than one to be checked, and we want to make sure that each one is included when we send the data to an email.
• $pets_msg – This becomes the name of the list of values that we’ll use to put them into our email.
• “$value, “ – This is slightly different than what we used for the radio buttons above. For this we added a comma after $value, if multiple check boxes are checked, this will make sure a comma separates each value (with the comma appearing at the end of each value). If you have a long list, this makes is much easier to see the different values when they get listed out in the email.

---

STEP
5

We’re going to start working on the code that handles the email. There’s quite a few options available, so I’m just going to cover what I see as the essentials. The first part of setting up the email is to tell the PHP file what email address to send it to, and what to use as the subject for the email.

<?php

$email = $_POST['email'] ;
$age = $_POST['age'] ;
$moredetails = $_POST['moredetails'] ;

foreach($_POST['color'] as $value) {
		$color_msg .= "$value" ;
		}
foreach($_POST['pets'] as $value) {
		$pets_msg .= "$value, " ;
		}

$to = $_POST['email'] ;
$subject = "Form Submission From Website.com" ;

• $to – This is where we tell the file what address to send the email to. In the case of this example, we’re telling it to send the email to the address the user entered into the form, using the same command we used earlier. In the next step we’ll tell the file to send a copy to an email address we enter ourselves, that way you can make sure you get a copy of the data as well.
• $subject – This is where we define what will appear in the subject line of the email. You’ll want it to be something that can easily be associated with your company or website, so the person doesn’t delete it as spam without looking at it.
• Be sure you don’t forget any quotation marks or semicolons!

---

STEP
6

Now we’re going to add in additional information for the email itself. This includes stuff like sending a copy to yourself (your own email address), as well as what email address to use if the user replies to the email they receive, and what email address to use if returned mail notification needs to be sent.

<?php

$email = $_POST['email'] ;
$age = $_POST['age'] ;
$moredetails = $_POST['moredetails'] ;

foreach($_POST['color'] as $value) {
		$color_msg .= "$value" ;
		}
foreach($_POST['pets'] as $value) {
		$pets_msg .= "$value, " ;
		}

$to = $_POST['email'] ;
$subject = "Form Submission From Website.com" ;
$headers .= "From: Your Name Here <youremail@website.com>\r\n" ;
$headers .= "Cc: youremail@website.com\r\n" ;
$headers .= "Return-Path: youremail@website.com\r\n" ;
$headers .= "Reply-To: youremail@website.com\r\n" ;

• Since each of these definitions uses the same name ($headers), you need to be sure to include a period before the equal sign, this will allow the file to recognize each of them as being under the same name, but still appear as separate definitions (it also makes it look a little more user friendly when editing the file).
• The first header is where we put in the name we want to appear, as well as what email address it says the message is from. This is useful in preventing the message from ending up in a spam folder, so you should make sure you use a legitimate name and email address here.
• The second header will tell the file to send a copy of the message to whatever email address you put there, this is useful if you want a message sent to yourself as well (which you no doubt will).
• The Return-Path will be where any messages are sent that couldn’t be delivered to the email that the user entered into the form. This should be a real email address that you have access to, that way if something is wrong with the users email, you can still contact them and let them know that you received their submission.
• Reply-To will be the email address that any replies will be sent to if the user decides to click the reply button on the email they received.
• \r\n – This appears at the end of each line, and what it’s telling the file to do is to put a line break after each line, so in the header of the email program the user opens the email in all of these will be on their own line. If you’re curious what exactly they are, \r is for a Carriage Return Line Feed, and \n is for a Line Feed. Don’t worry about the specifics though if you don’t want to, just know that \n will make a line break.
• Don’t miss any semicolons where you seem them at the end of the line, this is a common oversight and will lead to nothing in the file working!

---

STEP
7

Now we’re going to make the body of the email, this is where all of the data we collected will go. You can make this area as fancy as you want with HTML, but I prefer to stick with plain text, since you really just want a simple summary of the information.

<?php

$email = $_POST['email'] ;
$age = $_POST['age'] ;
$moredetails = $_POST['moredetails'] ;

foreach($_POST['color'] as $value) {
		$color_msg .= "$value" ;
		}
foreach($_POST['pets'] as $value) {
		$pets_msg .= "$value, " ;
		}

$to = $_POST['email'] ;
$subject = "Form Submission From Website.com" ;
$headers .= "From: Your Name Here <youremail@website.com>\r\n" ;
$headers .= "Cc: youremail@website.com\r\n" ;
$headers .= "Return-Path: youremail@website.com\r\n" ;
$headers .= "Reply-To: youremail@website.com\r\n" ; 

$body = "Thank you for sending in your data! Below is a summary of what we've received:

Email: $email
Favorite Color: $color_msg
Pets: $pets_msg

More Details:
$moredetails" ;

• $body – This is the name given to the entire body section.
• On the first line right after the equal sign and the quotation marks is the opening line that will appear in the email. You can make this as long and as specific as you want, even if it ends up being longer than one line it won’t be a problem. Also, don’t pay any attention to the fact that the word “for” is blue in that line, it has nothing to do with anything in the PHP, and is just a symptom of the code plugin I use.
• Next we put in a couple line breaks, normally you’d need to use \n like we did in the headers, but in everything I’ve tested just having the line breaks physically in this file is enough. If you run into problems when you test this, just add in \n wherever you want a line break.
• Now we can start adding in the data. It’s actually very simple. All you need to do is add in a label that will show up in the email, and then put in the name we defined earlier in steps 3 and 4. For example, the first line will show the email address the person entered. So in the email it would show up as something like: Email: usersemail@theirdomain.com. For the check boxes it will show a list next to the label in the email, so it would be something like: Pets: Dog, Cat, Fish. Just repeat that for each piece of data you collect.
• Be sure to remember the ending quotation marks and the semicolon at the end of the body, in the case of the example above it’s after $moredetails, but if you extended your email message, just put it at the end of your message.

---

STEP
8

There’s only a few more lines to go, but they’re very important! The first one we’re going to add is telling the PHP file to send the email, using the names we setup in steps 5, 6, and 7. This is very important, since without it the email would never leave the file, or it wouldn’t contain the correct information.

<?php

$email = $_POST['email'] ;
$age = $_POST['age'] ;
$moredetails = $_POST['moredetails'] ;

foreach($_POST['color'] as $value) {
		$color_msg .= "$value" ;
		}
foreach($_POST['pets'] as $value) {
		$pets_msg .= "$value, " ;
		}

$to = $_POST['email'] ;
$subject = "Form Submission From Website.com" ;
$headers .= "From: Your Name Here <youremail@website.com>\r\n" ;
$headers .= "Cc: youremail@website.com\r\n" ;
$headers .= "Return-Path: youremail@website.com\r\n" ;
$headers .= "Reply-To: youremail@website.com\r\n" ; 

$body = "Thank you for sending in your data! Below is a summary of what we've received:

Email: $email
Favorite Color: $color_msg
Pets: $pets_msg

More Details:
$moredetails" ;

if (mail($to,$subject,$body,$headers)) {

This line is telling the PHP file that “if” the data is present and the file has run correctly (and later on in this series, if that data passes verification) to send an email using the following data, and then it lists off our $to, $subject, $body, and $header names, to send the email using that data. Please note that the order the names are listed inside of mail() is very important, and you shouldn’t have them listed in any other order, or your file may not work correctly! Also take note of the parenthesis and the curly bracket, make sure you include them in the correct order.

---

STEP
9

Now we’re going to tell the file to redirect the user to a specific page once the email has been sent. Generally you’ll want to create some sort of confirmation page, so the user knows the data has been sent. I discourage against just redirecting them back to the form, since that may lead to them submitting the form multiple times without knowing it was actually sent. They may even just give up and go elsewhere if they think they’re not getting through. We’re also going to close out our PHP file and then we’ll be done!

<?php

$email = $_POST['email'] ;
$age = $_POST['age'] ;
$moredetails = $_POST['moredetails'] ;

foreach($_POST['color'] as $value) {
		$color_msg .= "$value" ;
		}
foreach($_POST['pets'] as $value) {
		$pets_msg .= "$value, " ;
		}

$to = $_POST['email'] ;
$subject = "Form Submission From Website.com" ;
$headers .= "From: Your Name Here <youremail@website.com>\r\n" ;
$headers .= "Cc: youremail@website.com\r\n" ;
$headers .= "Return-Path: youremail@website.com\r\n" ;
$headers .= "Reply-To: youremail@website.com\r\n" ; 

$body = "Thank you for sending in your data! Below is a summary of what we've received:

Email: $email
Favorite Color: $color_msg
Pets: $pets_msg

More Details:
$moredetails" ;

if (mail($to,$subject,$body,$headers)) {
	header ('Location: http://www.dvorakdesigns.com') ;
	}

exit ();

?>

• header – This is used to call a new HTTP header, basically a new URL.
• Location – This is where you enter in the URL you want to be called, in this case it should be to the confirmation page you make for this form.
• Don’t forget to put in the closing curly bracket, this completes the if statement we started with the mail line that listed all our headers.
• exit(); – This line tells the PHP file to quit running, or exit.
• Lastly we have our closing PHP tag, which is simply: ?>

Remember to save this file as tutorial_form_submit.php, and put it in the folder that you created in step 1, along with the HTML file we’ve already created.

---

STEP
10

Okay, finally the last step! For this you need to open up your HTML file, tutorial_form.html. We need to tell our form to run the PHP file we just made when someone hits the submit button.

<form name="myform" method="post"  action="tutorial_form_submit.php">

Just type in the name of your PHP file between the quotation marks for action. If you post a form on your site, I recommend putting in the full URL to the file, just to be safe, though for this tutorial putting in the name will work fine if both files are in the same folder.

---

That’s all for this part! If you’re able to, upload your form and the PHP file to a web server to test it out. The form won’t function right off your computer because it needs to utilize PHP, so if you don’t have a web server to use you’ll just have to trust that you did all the steps right until you can get to one! In the next part we’ll work on adding in some verification to the different fields, to make sure we collect all the data we want to. Adding in verification can sometimes help ward off spam robots too, it’s not a guarantee to stop all spam, but it can definitely help (for sure if you have a long form). If you have any questions about this part, feel free to post a comment below and I’ll answer it as soon as I can!

Advertisement

Connect With Us

Archives

Categories

Tag Cloud

Freelance Design

Advertisement

Popular Posts

• HTML Web Forms – Part 3: Validating Form Fields
• HTML Web Forms – Part 4: Styling Forms With CSS
• Disable ETags and Configure Caching/Expires Heade...
• 4 SEO Tools to Give Your Website a Full Checkup

Still can't find what you want?
Try searching for it!

Copyright © Dvorak Designs, 2009-2010. Images, logos and company names appearing on this site for portfolio or review purposes are property of their respective owners.
Privacy Policy