Design a Multi-​​Page Form in WordPress: Form Completion and Data Reporting

We’ve been rocking our new multi-page form, and it’s time to apply the last little bit of code we need. If you’re just joining us, go review Parts 1-3 of this series to see our general theory, the design approach, and the terms we’re using.

In this article, we will update our database with the latest values and display a “Thank You!” message. We also want a way to review the results without having to log into phpMyAdmin, so I’ll show you a quick and easy way to accomplish that as well.

Step 1: Add The Latest Form Inputs

At this point, we’re just rinsing and repeating. We did all these steps in Part 3, but now we need to grab the location and categories inputs:

[sourcecode language=”php”]

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

$location = $_POST[‘location’];
$category = $_POST[‘category’];
$page = $_POST[‘page’];
$form_id = $_POST[‘form_id’];

$page_three_table = ‘shopping_preferences’;
$page_three_inputs = array(
‘location’ => $location,
‘categories’ => $category,
‘page’ => $page
);
$page_three_where = array(
‘id’ => $form_id
);

$insert_page_three = $wpdb->update($page_three_table, $page_three_inputs, $page_three_where);

}// End Page 4 of Form

[/sourcecode]

There’s nothing new here, but let’s review anyway. First, we started off with an ELSEIF statement to check our page number. Then, we grabbed our POST content from the form on the previous page. Next, we set up our arrays for the WordPress database update. Finally, we ran our update.

Step 2: Build a Custom “Thank You!” Message

Now, you can insert anything you want as a “Thank You!” message. You can go with something as simple as:

[sourcecode language=”php”]

$insert_page_three = $wpdb->update($page_three_table, $page_three_inputs, $page_three_where);

echo ‘<h3>Thanks so much!</h3>’;
echo ‘<p>We very much appreciate you taking the time to fill out this survey! You’re all done!</p>’;

}// End Page 4 of Form

[/sourcecode]

Or, you can create a completely customized response based upon their inputs. It’s your choice at this point.

You may be wondering how to access all our wonderful data and put it to good use. There are lots of applications, but let’s look at a simple form for viewing all our data in this table.

Step 3: Custom Reporting — Dump the Data to an HTML Table

Now, you may want the ability to either view your form inputs on your own or set up a view for your client. I prefer a simple PHP script that calls the data and displays it on the page in table format. This allows your clients to dump it into Excel or whatever software they prefer for manipulation of the data. We’ll start with a simple dump of all the information in the table.

(Note: You’ll need to be able to upload a document via FTP to your WordPress site or use your domain hosting to upload the file.)

Create a new PHP file with the following:

[sourcecode language=”php”]

<?php

$location = $_SERVER[‘DOCUMENT_ROOT’];

include ($location . ‘/wp-config.php’);
include ($location . ‘/wp-load.php’);
include ($location . ‘/wp-includes/pluggable.php’);
global $wpdb;

$form_results = $wpdb->get_results( ” SELECT * FROM shopping_preferences ” );

echo ‘<table cellpadding=”0″ cellspacing=”0″ border=”1″>
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
<th>Zip Code</th>
<th>Gender</th>
<th>Age</th>
<th>Education</th>
<th>Income</th>
<th>Location</th>
<th>Category</th>
<th>Page</th>
<th>Timestamp</th>
</tr>
</thead>’;

foreach ($form_results as $form_results) {
echo ‘
<tr>
<td>’ .$form_results->id . ‘</td>
<td>’ .$form_results->first_name . ‘</td>
<td>’ .$form_results->last_name . ‘</td>
<td>’ .$form_results->email . ‘</td>
<td>’ .$form_results->phone . ‘</td>
<td>’ .$form_results->zip_code . ‘</td>
<td>’ .$form_results->gender . ‘</td>
<td>’ .$form_results->age . ‘</td>
<td>’ .$form_results->education . ‘</td>
<td>’ .$form_results->income . ‘</td>
<td>’ .$form_results->location . ‘</td>
<td>’ .$form_results->categories . ‘</td>
<td>’ .$form_results->page . ‘</td>
<td>’ .$form_results->timestamp . ‘</td>
</tr>
‘;
}

echo ‘</tr></table>’;

?>

[/sourcecode]

This code assumes that your WordPress installation is in the root folder of your website. If not, modify the first three INCLUDE statements to have the proper folder.

Let’s slow down and look at what we just did. First, we told this PHP script where all the pertinent database info could be found with our INCLUDE statements.

Next, we set up a query using the built-in get_results() function. You can run any query using standard SQL and MYSQL syntax if you’re more comfortable with those languages.

Then, we set up our table. You can get as fancy as you want here with CSS and JavaScript, but for this example I just want to give you some basic tools.

Lastly, we ran a FOREACH statement that loops through each result of the query. You can create a table with all or just a few results. So if you want a more customized table that only includes email address, age, and gender; it could look like this:

[sourcecode language=”php”]

<?php

$location = $_SERVER[‘DOCUMENT_ROOT’];

include ($location . ‘/wp-config.php’);
include ($location . ‘/wp-load.php’);
include ($location . ‘/wp-includes/pluggable.php’);
global $wpdb;

$form_results = $wpdb->get_results( ” SELECT email, age, gender FROM shopping_preferences ” );

echo ‘<table cellpadding=”0″ cellspacing=”0″ border=”1″>
<thead>
<tr>
<th>Email</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>’;

foreach ($form_results as $form_results) {
echo ‘
<tr>
<td>’ .$form_results->email . ‘</td>
<td>’ .$form_results->age . ‘</td>
<td>’ .$form_results->gender . ‘</td>
</tr>
‘;
}

echo ‘</tr></table>’;

?>

[/sourcecode]

Create all the custom reports you want this way and give the client a link to each one. As they need more reports, it’s as simple as creating a query and then doing any other math you need completed client-side via JavaScript (although a properly structured SQL query should get you pretty darn close to most reporting needs).

Step 4: Protect Your Reports

While you technically can leave the reports free to be executed by anybody with the URL, obviously you should not do this. Using the above example, all the email address, names, and other user information is exposed to anyone with the link.

So, let’s play it smart and use the reports within the WordPress structure that provides us with a lot more security. In this example, I will require the user to be logged in as an administrator of the site (other standard options are editors, authors, contributors, and subscribers in descending order of rights).

First, we want to create a shortcode so that the reports can be displayed on a post or page. This can go in your theme’s functions.php file or in a separate plugin:

[sourcecode language=”php”]

add_shortcode(‘multipage_email_age_gender_report_sc’,’multipage_email_age_gender_report’);

function multipage_email_age_gender_report(){

$location = $_SERVER[‘DOCUMENT_ROOT’];

include ($location . ‘/aeonstrong/wp-config.php’);
include ($location . ‘/aeonstrong/wp-load.php’);
include ($location . ‘/aeonstrong/wp-includes/pluggable.php’);
global $wpdb;

$form_results = $wpdb->get_results(
”
SELECT email, age, gender
FROM shopping_preferences
” );

echo ‘<table cellpadding=”0″ cellspacing=”0″ border=”1″>
<thead>
<tr>
<th>Email</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>’;

foreach ($form_results as $form_results) {
echo ‘
<tr>
<td>’ .$form_results->email . ‘</td>
<td>’ .$form_results->age . ‘</td>
<td>’ .$form_results->gender . ‘</td>
</tr>
‘;
}

echo ‘</tr></table>’;
}

?>

[/sourcecode]

At this point, anybody who can access a post or page can see these results. You can use the built-in password protection on a per-post or per-page basis if you’d prefer — sometimes clients like that. And, that’s exactly why I included this version instead of skipping straight to the user-based reports.

To lock down the reports so that they can only be viewed by users with the administrator role, here’s a common method that checks whether an admin is logged in by seeing if they are capable of performing a task that only admins have by default. In this case, it’s the ability to create a user. If they don’t have permission to create users, they get a message:

[sourcecode language=”php”]

add_shortcode(‘multipage_email_age_gender_report_sc’,’multipage_email_age_gender_report’);

function multipage_email_age_gender_report(){
if( current_user_can( ‘create_users’ )) {

$location = $_SERVER[‘DOCUMENT_ROOT’];

include ($location . ‘/wp-config.php’);
include ($location . ‘/wp-load.php’);
include ($location . ‘/wp-includes/pluggable.php’);
global $wpdb;

$form_results = $wpdb->get_results(
”
SELECT email, age, gender
FROM shopping_preferences
” );

echo ‘
<table cellpadding=”0″ cellspacing=”0″ border=”1″>
<thead>
<tr>
<th>Email</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>’;

foreach ($form_results as $form_results) {
echo ‘
<tr>
<td>’ .$form_results->email . ‘</td>
<td>’ .$form_results->age . ‘</td>
<td>’ .$form_results->gender . ‘</td>
</tr>
‘;
}

echo ‘</tr></table>’;
}// End If
else {
echo ‘<p>You do not have permission to view this report.</p>’;
}// End else
}// End multipage_email_age_gender_report()

[/sourcecode]

Conclusion

Well, that should just about cover it! You should have the basic tools you need to both create a custom, multiple-page form in WordPress and be able to securely access any custom reports that you or your client would like to create.

I can’t wait to see what you all come up with! Please feel free to share; you might even get some valuable data out of it!