Design a Multi-Page Form in WordPress: Multi-Page Processing

This is part three in a series on creating a multi-page form in WordPress, complete with its own database table. I strongly recommend you skim parts one and two if you haven’t yet, if nothing else to get familiar with our methodology and format.

In part one of the series, we created a shortcode, made a post/page for our form, and created the basic functions that we’re using for this process. In part two, we created the database table, inserted the inputs from the first page of our form, and handled the data from page two. In part three, we’re going to update (not insert) the data into the row we started for this form and show how we can make an optional version of the form based upon previous data entries.

Step 1: Get POST Data from Page Two of Form

If you don’t already have it, head on over to the second article in this series and get the code at the end of the article. We’ll continue to build on that from here on out.

Starting with your “Start Page 3 of Form” comment, we’re going to delete the echo statements that display our page two form inputs and replace that with our UPDATE statement.

We don’t want to use the $wpdb->insert function again because that would create a new row. Instead, we use the $wpdb->update function and throw in the $form_id number to tell WordPress which row to update:

[sourcecode language=”php”]

// Start Page 3 of Form
elseif( $page == 2 ) {

$gender = $_POST[‘gender’];
$age = $_POST[‘age’];
$education = $_POST[‘education’];
$income = $_POST[‘income’];
$page = $_POST[‘page’];
$form_id = $_POST[‘form_id’];

$page_two_table = ‘shopping_preferences’;
$page_two_inputs = array(
‘gender’ => $gender,
‘age’ => $age,
‘education’ => $education,
‘income’ => $income,
‘page’ => $page
);
$page_two_where = array(
‘id’ => $form_id
);

$insert_page_two = $wpdb->update($page_two_table, $page_two_inputs, $page_two_where);

};// End Page 3 of Format

[/sourcecode]

First off, we use the ELSEIF to test for the page number. Since page two has been completed, we want to insert that form data.

Next, we grab the POST data from the form and assign it to variables. Too easy, right?

Then, we start to assign our data to arrays for insertion via $wpdb. We have the table, inputs, and the where info that WordPress requires when updating a row.

Last, we call the $wpdb->update function and we’re good. Well, almost.

Step 2: Evaluating the Form Results

While this is optional, I want to go ahead and give you these tools for future reference. I’m going to be using nested IF statements to evaluate the results of the page two form data. Based upon the person’s gender, we will display different sets of forms.

Remember that there are three possibilities for gender: nothing, male, and female. So we must have three IF statements.

For female respondents, I’m going to have different options compared to males. If the person has listed themselves as “none” for gender, they get all of the options.

(Note: please ignore the obvious sexism in these form options — they’re just here to demonstrate dynamic forms, not to make any kind of distinction or statement about genders.)

[sourcecode language=”php”]

// Start Page 3 of Form
elseif( $page == 2 ) {

$gender = $_POST[‘gender’];
$age = $_POST[‘age’];
$education = $_POST[‘education’];
$income = $_POST[‘income’];
$page = $_POST[‘page’];
$form_id = $_POST[‘form_id’];

$page_two_table = ‘shopping_preferences’;
$page_two_inputs = array(
‘gender’ => $gender,
‘age’ => $age,
‘education’ => $education,
‘income’ => $income,
‘page’ => $page
);
$page_two_where = array(
‘id’ => $form_id
);

$insert_page_two = $wpdb->update($page_two_table, $page_two_inputs, $page_two_where);

echo ‘<form method=”post” action=”‘ . $this_page .'”>
<label for=”location” id=”location”>How do you like to shop?</label>
<select name=”location” />
<option value=”nothing” selected>Pick Your Favorite</option>
<option value=”ebay”>Online – Ebay</option>
<option value=”eretailer”>Online – Retailers</option>
<option value=”classifieds”>Online – Classifieds</option>
<option value=”store”>Physical Store</option>
</select>
‘;

if ( $gender == “nothing” ) {
echo
‘<label for=”category” id=”category”>What do you shop for most?</label>
<select name=”category” />
<option value=”nothing” selected>Pick Your Favorite</option>
<option value=”ebay”>Clothes</option>
<option value=”eretailer”>Shoes</option>
<option value=”classifieds”>Jewelry</option>
<option value=”classifieds”>Cooking Equipment</option>
<option value=”store”>Sports Gear</option>
<option value=”classifieds”>Computers – Desktop</option>
<option value=”classifieds”>Computers – Laptop</option>
<option value=”classifieds”>Computers – Software</option>
</select>’;
}
if ( $gender == 0 ) {
echo
‘<label for=”category” id=”category”>What do you shop for most?</label>
<select name=”category” />
<option value=”nothing” selected>Pick Your Favorite</option>
<option value=”store”>Sports Gear</option>
<option value=”classifieds”>Computers – Desktop</option>
<option value=”classifieds”>Computers – Laptop</option>
<option value=”classifieds”>Computers – Software</option>
</select>’;
}
if ( $gender == 1 ) {
echo
‘<label for=”category” id=”category”>What do you shop for most?</label>
<select name=”category” />
<option value=”nothing” selected>Pick Your Favorite</option>
<option value=”store”>Sports Gear</option>
<option value=”classifieds”>Computers – Desktop</option>
<option value=”classifieds”>Computers – Laptop</option>
<option value=”classifieds”>Computers – Software</option>
</select>’;
}

echo ‘
<input type=”hidden” value=”3″ name=”page” />
<input type=”hidden” value=”‘ . $form_id . ‘” name=”form_id” />

<input type=”submit” />
</form>’;

};// End Page 3 of Form

[/sourcecode]

As you can hopefully see from the IF statements, we evaluate the value from page two of the form gender input and dynamically serve a customized form. Hopefully your imagination is starting to flare up and you can see how powerful this little system could be for you!

At this point, we may also want to test to see if we’ve got all of the data we expect in our database tables. So, let me show you a quick way to check.

Step 3: Check Your Database

I usually keep the phpMyAdmin tool open during testing, but this is a good time to show you some other methods of querying WordPress if you’re a newbie. So let’s dump the data from our database to see what we have so far stored and check to see that it’s collecting the data we would expect.

We’ll use the $wpdb->select to query the database and display the results. Right below our closing form tag, but above the “END Page 3 of Form” comment, add the following:

[sourcecode language=”php”]

// Let’s check our data
$data_check = $wpdb->get_row(“SELECT * FROM shopping_preferences WHERE id = ‘$form_id'”);

echo ‘
<p> id: ‘ . $data_check->id . ‘</p>
<p> first_name: ‘ . $data_check->first_name . ‘</p>
<p> last_name: ‘ . $data_check->last_name . ‘</p>
<p> email: ‘ . $data_check->email . ‘</p>
<p> phone: ‘ . $data_check->phone . ‘</p>
<p> zip_code: ‘ . $data_check->zip_code . ‘</p>
<p> gender: ‘ . $data_check->gender . ‘</p>
<p> age: ‘ . $data_check->age . ‘</p>
<p> education: ‘ . $data_check->education . ‘</p>
<p> income: ‘ . $data_check->income . ‘</p>
<p> location: ‘ . $data_check->location . ‘</p>
<p> categories: ‘ . $data_check->categories . ‘</p>
<p> page: ‘ . $data_check->page . ‘</p>
<p> timestamp: ‘ . $data_check->timestamp . ‘</p>’;

[/sourcecode]

We’re listing all the information from our table in this example. Note that the location and categories will be blank, because we haven’t submitted the form for page three just yet. Bear in mind that I did not limit the query, so if you’ve been running lots of tests, you’ll see all the results.

In the next article in the series, we will create our “Thank You!” page and update the database with the last bit of information. I will also show you how to query the database and produce a report for your own use to see the questionnaire results.