Web Design/Responding to HTML forms with PHP

Web Design → Responding to HTML forms with PHP

This page is part of the Web Design project.

One of the simplest and yet most useful things we can do on a Dynamic site is interact with the information provided through our HTML forms!

A simple response

If you haven't already created a form for selling a product or service as part of the Intro to programming with JavaScript, create a form now... be creative! You may want to use HTMLDog or W3Schools as references as you go.

Make sure that your form:

includes at lease two normal input fields where your users can enter their first and last names (they should have name="firstname" and name="lastname" respectively).
allows a visitor to select a product to purchase,
allows a visitor to indicate the quantity of the product ("I'd like to buy 4 T-shirts").
allows visitors to include their billing information.
you've uploaded your form onto your website (or if you are using your own computer as a web-server, that you've put it in the right place) and test it out.

Responding to your form

When your form is submitted, we want to let our user know that we've received their submission. Create a new file with the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>My web site: Thanks for that!</title>
  </head>
  <body>
    
    <h1>Processing your request</h1>

    <?php

      // First set some variables from the form...
      $firstname = $_POST["firstname"];
      $lastname = $_POST["lastname"];

      echo "<h2>Thank you $firstname.</h2>";
      //echo is faster than print

      echo "<p>We've received your order as follows:</p>";

      echo "<p>Name: $firstname $lastname. </p>";
    ?>

</body>
</html>

You might want to read through the code to see if it gives you any hints as to what it will do, but don't worry too much about the details just yet.

Save this file as response.php and upload it to the same folder as your form. Test it out by submitting your form again (but don't be disappointed if nothing happens!)

Connecting your form to your php file

Nothing happened? That's right! We haven't yet connected our form to our php file! All that's left to do is modify our html form tag so that it includes the following two attributes:

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

Note: you might have other attributes such as inside your form tag—make sure you leave them there!

This now tells our form that the action it should take when the form is submitted is to send all the info to a file called response.php. There are two ways that this can be done with a web form, one is called "post" the other is called "get". We'll learn more about these later, but for the moment it's enough to know that we're "posting" our form information.

Submit your form again and you should now see a result!

EXERCISE • Responding to HTML forms with PHP • Extending your receipt

Try the following:

Continue to add to your response.php file so that all the information submitted on your form is printed out like a receipt. Do this in stages, one at a time, testing every time!

SOLUTION • Web Design/Responding to HTML forms with PHP • Extending your receipt

For each (sorry, I'll fill in later!)

EXERCISE • Responding to HTML forms with PHP • Formatting your receipt

Now that you've got all the information for your receipt, you might want to make it look a bit prettier!

Modify your response.php so that it links to your normal stylesheet (just the normal way, nothing special here!)
If your response is tabular data, try using an HTML table to layout your data.

SOLUTION • Web Design/Responding to HTML forms with PHP • Formatting your receipt

Sorry (again). you can add the solution yourself here... I'll try to get around to it!

Which method is better to use for your form: Get or Post?

While using HTML forms you can set form methods: "GET" (default) or "POST". Which one to use?

When using the GET method you can access all form variables with the $_GET array in PHP and when using POST you can access all the variables with the help of $_POST. You can also access all variables with the help of the $_REQUEST array. When using the GET method all the submitted data is displayed in the address bar. You will notice that information which is displayed after “?”, will be something like this:

http://domain.com/script.php?name1=value1&name2=value2

According to PHP Form Tutorials it can be useful, where you want to bookmark a page with some specific query string values. However, the GET method is limited by the URL length (2083 characters in Internet Explorer according to Microsoft) and each of the input values must not override 100 chars. Maybe you also don't want to use the GET method because when submitting important data like passwords, etc, it will be displayed in the address bar.

The POST method has the possibility of much more volume in data sending (usually only limited by the server settings) and it may be used unless it represents benefits in comparing GET method. Some browsers can not correctly bookmark pages which are displayed after HTTP POST method, because the submitted data is displayed in the address bar. When you need the query string, which is retrieved by using the GET method (ineffective by it’s limits), try to use POST method for your forms. You can use the POST method to submit the important information which shouldn’t be displayed in the address bar.

Sending an email with the form information

In the past, we have used the action attribute of our form to automatically email our forms, like follows:

  <form action="mailto:me@myemail.com" method="post">

but this way of collecting information is pretty limited. (TODO:Add limitations)

Now that we're handling our form from PHP, it's really easy to send an email automatically. Try adding the following bit of code to the PHP code in response.php:

  // First set the subject of the email:
  $subject = "A new order from website";

  // Then set the message text of the email. The \n character is for a new line
  // so that our email doesn't appear as one big line.
  $message = "A new order has been submitted by $firstname $lastname.\n Please respond ASAP";
  
  // Then send it off using the php mail function! Find out the scary details
  // at: http://www.php.net/manual/en/function.mail.php
  mail("me@myemail.com", $subject, $message);

Make sure you substitute your own email address instead of "me@myemail.com", and then test it out!

The following activities need to be filled out in more detail TODO: Activity 1: Include more of your form information in your email.

TODO: Activity 2: (advanced), try sending an HTML email.

TODO: Activity 3: Use the "Redirect after Post" protocol to avoid the "double submit" problem.