HTML.form.guide

Creating a multi-page order form using PHP

php order form

Forms are part of virtually any web application today. They are the main method to receive input from people using the application. They range in size from one-field opt-in forms where you only enter your email address, to very long forms with tens or even hundreds of fields.

To make long forms user-friendlier, it is a good idea to span the form on multiple pages. This can make it easier to follow for the user, and we can also split the data in separate sections, based on the scope (for example separate personal customer information from payment data in a shopping cart checkout form).

One of the challenges that arise from splitting the form over multiple pages is passing the data from one page to another, as at the final point of the form, we have all the needed data ready for processing. We are going to look at two methods to do this: session variables and hidden input fields.

What are sessions anyway?

A HTML session is a collection of variables that keeps its state as the user navigates the pages of a certain site. It will only be available to that domain that created it, and will be deleted soon after the user left the site or closed his browser.

So, the session has a semi-permanent nature, and it can be used to pass variables along different pages on which the visitor lands during a visit to the site.

Multi-page form using sessions

In our example, we are going to create a three pages form, resembling a membership signup and payment form. The first page will ask for customer’s name and address, on the second page there is the choice for membership type, and on the third and final page, payment data must be entered. Final step is saving the data in MySQL.

The first file we are going to create (step 1 of the form) will contain just a simple form with two fields.

<form method="post" action="form2.php">
    <input type="text" name="name">
    <input type="text" name="email_address">
    <input type="submit" value="Go To Step 2">
</form>

Ok, so nothing more than 2 input fields and a submit button to take us to step 2. In the following page, apart from the HTML form to gather membership data, we are going to need code to store the submitted data from step 1 in the session.


<?php

//let's start the session
session_start();

//now, let's register our session variables
session_register('name');
session_register('email_address');

//finally, let's store our posted values in the session variables
$_SESSION['name'] = $_POST['name'];
$_SESSION['email_address'] = $_POST['email_address'];

?>


<form method="post" action="form3.php">
<input type="radio" name="membership_type" value="Free">
<input type="radio" name="membership_type" value="Normal">
<input type="radio" name="membership_type" value="Deluxe">
<input type="checkbox" name="terms_and_conditions">
<input type="submit" value="Go To Step 3">
</form>

On to step 3, we must again create new session variables, assign values received by post, and create the final part of the form.


<?php

//let's start the session
session_start();

//now, let's register our session variables
session_register('membership_type');
session_register('terms_and_conditions');

//finally, let's store our posted values in the session variables
$_SESSION['membership_type'] = $_POST['membership_type'];
$_SESSION['terms_and_conditions'] = $_POST['terms_and_conditions'];

?>


<form method="post" action="form_process.php">
<input type="text" name="name_on_card">
<input type="text" name="credit_card_number">
<input type="text" name="credit_card_expiration_date">
<input type="submit" value="Finish">
</form>

Now that we created step 3 of the form, what’s left is the final processing script that inserts the data in the MySQL database.

<?php

//let's start our session, so we have access to stored data
	session_start();

//let's create the query
$insert_query = 'insert into subscriptions (
				name,
				email_address,
				membership_type
				terms_and_conditions,
				name_on_card,
				credit_card_number,
				credit_card_expiration_date
						) values (
				" . $_SESSION['name'] . ",
				" . $_SESSION['email_address'] . ",
				" . $_SESSION['membership_type'] . ",
				" . $_SESSION['terms_and_conditions'] . ",
				" . $_POST['name_on_card'] . ",
				" . $_POST['credit_card_number'] . ",
				" . $_POST['credit_card_expiration_date'] . "
						);

//let's run the query
mysql_query($insert_query);
?>

And we are done. Please note that in the final query, we are using data from the $_SESSION array, and also data from the $_POST array, that was posted from the last step of the form.

Categories