Design a Multi-Page Form in WordPress: Data Storage

In this second article in our series on multi-page form design, we’re going to create the database tables required to store the custom form data. We’ll also delve into the process of storing the first page of form data and displaying the second page to the user. We employ some very basic PHP and SQL to achieve our design goals. (If you’re interested in learning more about PHP, our partner site, PHPMaster.com, has a wide variety of guides ranging from beginner to expert.)

Step 1: Using phpMyAdmin to Create a Database Table

If you’ve never worked with phpMyAdmin, this is a big step for you. I realize that it can be daunting, but custom form development usually means you’re going to want custom database tables. While you could use existing, built-in WordPress data tables and store this information as user meta, you’re going to have to jump through many more hoops to make that work. In the end, avoiding phpMyAdmin is a lot harder than learning it. So, go to your domain hosting provider, log in, and go to your hosting control panel. You should see a button or link for phpMyAdmin or some other database management tool. Since the vast majority of domain hosting providers use phpMyAdmin, I’ll use that as my example. Once logged into phpMyAdmin, go to the SQL tab for your WordPress installation and paste in the following code: [sourcecode language=”sql”] CREATE TABLE `shopping_preferences` ( `id` INT( 7 ) NOT NULL AUTO_INCREMENT, `first_name` VARCHAR( 50 ) NOT NULL, `last_name` VARCHAR( 50 ) NOT NULL, `email` VARCHAR( 50 ) NOT NULL, `phone` VARCHAR( 12 ) NOT NULL, `zip_code` VARCHAR( 5 ) NOT NULL, `gender` INT( 1 ) NOT NULL, `age` INT( 3 ) NOT NULL, `education` VARCHAR( 50 ) NOT NULL, `income` VARCHAR( 50 ) NOT NULL, `location` VARCHAR( 50 ) NOT NULL, `categories` VARCHAR( 400 ) NOT NULL, `page` INT( 1 ) NOT NULL, `timestamp` TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY ( `id` ) ) [/sourcecode] You can modify this code as needed, of course, but this will get a new data table in place and allow you to start adding content from the inputs of our multi-page form.

Step 2: Adding Page One Data

For this step, we’ll accomplish two things:

1. Send the page one form inputs into the database table that we created in Step 1
2. Retrieve the ID of the form data so we can keep adding more information as the user fills out the forms.

To add data into our database table, we’ll be using the built-in WordPress $wpdb. While you can create a MySQL INSERT script, it’s good practice when working with WordPress databases to use their carefully-designed functionality. It’s a simple process that is also the least intuitive ever… at first. Once you get the hang of working with $wpdb, you’ll be just fine. First, we need to grab the POST data from page one of our form. If you’ve ever worked with forms, this is a familiar process. The insert process starts by defining the columns using an array format assigned to a variable. Then the insert function takes it from there. [sourcecode language=”php”] // Start Page 2 of Form elseif ( $page == 1 ) { // Grab the POST data that the user provided $first_name = $_POST[‘first_name’]; $last_name = $_POST[‘last_name’]; $email = $_POST[’email’]; $phone = $_POST[‘phone’]; $zip_code = $_POST[‘zip_code’]; // Assign the table and inputs for our upcoming INSERT function $page_one_table = ‘shopping_preferences’; $page_one_inputs = array( ‘first_name’ => $first_name, ‘last_name’ => $last_name, ’email’ => $email, ‘phone’ => $phone, ‘zip_code’ => $zip_code, ‘page’ => $page ); // Insert the data into a new row $insert_page_one = $wpdb->insert($page_one_table, $page_one_inputs); // Grab the ID of the row we inserted for later use $form_id = $wpdd->insert_id; echo ‘<h3>You made it to the 2nd page!</h3> Here are your form inputs: First Name: ‘ . $first_name . ‘ Last Name: ‘ . $last_name . ‘ Email: ‘ . $email . ‘ Phone: ‘ . $phone . ‘ Zip Code: ‘ . $zip_code . ‘ Form ID: ‘ . $form_id . ”; }//End Page 2 of Form [/sourcecode] In the last part of the code, we are doing a bit of initial checking of our data, we display our message about making it to page two of the form, and then we show the stored input values to the user who provided them. If we have a Form ID value, we have successfully inserted a row!

Step 3: Adding the Page Two Form

So, we inserted a row of data from our first page of the form, and now we’re ready to collect some more information. This time, we want to get some socioeconomic data. Even if the user bails on us at this point, we’ve still got some useful information that we can use to get in touch with them later. After the $form_id code above, we’re going to replace the rest and add the second page of our fancy form: [sourcecode language=”php”] echo ‘<form method=”post” action=”‘ . $this_page .'”> <label for=”gender” id=”gender”>Gender: </label> <select name=”gender” /> <option value=”nothing” selected>Select Gender</option> <option value=”0″>Female</option> <option value=”1″>Male</option> </select> <label for=”age” id=”age”>Age: </label> <input type=”text” name=”age” id=”age” /> <label for=”education” id=”education”>Education: </label> <select name=”education” /> <option value=”nothing” selected>Select Level of Education</option> <option value=”some_high_school”>Some High School</option> <option value=”all_high_school”>High School Diploma/GED</option> <option value=”some_college”>Some College</option> <option value=”all_colleg”>College Degree</option> <option value=”some_grad”>Some Graduate School</option> <option value=”all_grad”>Graduate</option> <option value=”some_doc”>Some Post Graduate</option> <option value=”all_doc”>Doctorate</option> </select> <label for=”income” id=”income”>Income: </label> <select name=”income” /> <option value=”nothing” selected>Select Income Range</option> <option value=”10000″ selected>Less than $10,000</option> <option value=”25000″ selected>$10,000 – $25,000</option> <option value=”50000″ selected>$25,000 – $50,000</option> <option value=”75000″ selected>$50,000 – $75,000</option> <option value=”max” selected>More than $75,000</option> </select> <input type=”hidden” value=”2″ name=”page” /> <input type=”hidden” value=”‘ . $form_id . ‘” name=”form_id” /> <input type=”submit” /> </form>’; } //End Page 2 of Form [/sourcecode] For the sake of brevity, I left the “Age” option as a fill in the blank so we don’t have a long form with overwhelming options. The final version will have a drop-down menu.

Step 4: Building the Page 3 Handler

Now, let’s grab the information from page two and make sure we’ve captured what we need. We’ll display it on the page for testing purposes. Another ELSEIF statement is required to test for the page number. Just place this immediately after the “End Page 2″ comment from the previous code sample: [sourcecode language=”php”] elseif( $page == 2 ) { $gender = $_POST[‘gender’]; $age = $_POST[‘age’]; $education = $_POST[‘education’]; $income = $_POST[‘income’]; $page = $_POST[‘page’]; $form_id = $_POST[‘form_id’]; echo ‘$gender: ‘ . $gender . ”; echo ‘$age: ‘ . $age . ”; echo ‘$education: ‘ . $education . ”; echo ‘$income: ‘ . $income . ”; echo ‘$page: ‘ . $page . ”; echo ‘$form_id: ‘ . $form_id . ”; } [/sourcecode] Make sure your function still has the closing “};” brace — it’s easy to copy and paste over the top of it. Missing one of these opening or closing braces or brackets can break your entire form, so work carefully.

Conclusion

Refresh your form and behold! We’re getting close! You’ve already got a two-page form that successfully collects data and stores it from page one to page two. That’s a huge first step. In the next article, I’ll show you how to update the database with page two inputs and how to display an optional version of the form — one for males and one for females. For the sake of completeness, here’s the code we have so far: [sourcecode language=”php”] add_shortcode(‘multipage_form_sc’,’multipage_form’); function multipage_form(){ global $wpdb; $this_page = $_SERVER[‘REQUEST_URI’]; $page = $_POST[‘page’]; if ( $page == NULL ) { echo ‘ <form action=”‘ . $this_page .'” method=”post”><label id=”first_name” for=”first_name”>First Name: </label> <input id=”first_name” type=”text” name=”first_name” /> <label id=”last_name” for=”last_name”>Last Name: </label> <input id=”last_name” type=”text” name=”last_name” /> <label id=”email” for=”email”>Email: </label> <input id=”email” type=”text” name=”email” /> <label id=”phone” for=”phone”>Phone: </label> <input id=”phone” type=”text” name=”phone” /> <label id=”first_name” for=”first_name”>Zip Code: </label> <input id=”zip_code” type=”text” name=”zip_code” /> <input type=”hidden” name=”page” value=”1″ /> <input type=”submit” /></form>’; }//End Page 1 of Form // Start Page 2 of Form elseif ( $page == 1 ) { $first_name = $_POST[‘first_name’]; $last_name = $_POST[‘last_name’]; $email = $_POST[’email’]; $phone = $_POST[‘phone’]; $zip_code = $_POST[‘zip_code’]; $page_one_table = ‘shopping_preferences’; $page_one_inputs = array( ‘first_name’ => $first_name, ‘last_name’ => $last_name, ’email’ => $email, ‘phone’ => $phone, ‘zip_code’ => $zip_code, ‘page’ => $page ); $insert_page_one = $wpdb->insert($page_one_table, $page_one_inputs); $form_id = $wpdb->insert_id; echo ‘ <form action=”‘ . $this_page .'” method=”post”><label id=”gender” for=”gender”>Gender: </label></form><select name=”gender”></select>Select GenderFemaleMale <label id=”age” for=”age”>Age: </label> <input id=”age” type=”text” name=”age” /> <label id=”education” for=”education”>Education: </label> <select name=”education”></select>Select Level of EducationSome High SchoolHigh School Diploma/GEDSome CollegeCollege DegreeSome Graduate SchoolGraduateSome Post GraduateDoctorate <label id=”income” for=”income”>Income: </label> <select name=”income”></select>Select Income RangeLess than $10,000$10,000 – $25,000$25,000 – $50,000$50,000 – $75,000More than $75,000 <input type=”hidden” name=”page” value=”2″ /> <input type=”hidden” name=”form_id” value=”‘ . $form_id . ‘” /> <input type=”submit” /> ‘; }// End Page 2 of Form // 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’]; echo ‘$gender: ‘ . $gender . ”; echo ‘$age: ‘ . $age . ”; echo ‘$education: ‘ . $education . ”; echo ‘$income: ‘ . $income . ”; echo ‘$page: ‘ . $page . ”; echo ‘$form_id: ‘ . $form_id . ”; };// End Page 3 of Form }// End multipage_form() function [/sourcecode]

Frequently Asked Questions about Designing a Multi-Page Form in WordPress and Data Storage