Multi-Page Form in WordPress

  | May 2009  Posted in Business Blogging   |   0 Comments  

I have recently been working on a project for a client which required a multi-page form, but I wanted to build the site in wordpress.  The trick was finding a way to make this work in WordPress, I could not find a plugin that supported the type of form that I needed.  I have been using Dagon Design, form mailer for all of my wordpress form needs, mainly because I really like the functionality that it provides, and it is supper easy to use!  I liked it so much I even sent the developer an email asking him to add the function to the plugin.  And of course I offered to pay him!  But I never heard back from him and so I moved on looking for a new solution.

I had be searching for a week before I found an amazing PHP script for handling form to email processing.  The script is called FormToEmail and can be found at formtoemail.com.  It works with any form and does not require a lot of customizing.  I was hoping that I could use this script to assist in my need for a multi-page form in wordpress, and it was not until 2 weeks into searching that I found an article written about FormToEmail and how to use it with a multi-page form.  That’s when the fun part started.

You see, I am not by any means a PHP programmer and really anything PHP outside of wordpress is a bit beyond me.  So I was in for a daunting task, however, I was lucky enough to have my brother in law in the office next to me who is a flex developer and has experience with with other types of development and we were able to figure this out.

To start here is what you need;

1. The FormToEmail scrip downloaded (free version is great, but it does not provide validation of emails and you can not set required fields, if you use the paid version, the steps are mostly the same, but there are different lines of code to use which can be found at formtoemail.com)
2. Dreamweaver or text editor for editing code
3. A WordPress site to set this up in
4. The ability to write an html form (I will include a simple one)
5. Access to the server, to upload some files
6. And to follow the steps that I will provide

The instruction that I read on the formtoemail.com site, says that your action=(this is the code that navigates from page to page) must request a .php file (i.e formtoemail.php, contact-info.php), but I thought that wordpress is already made up of .php files (i.e page.php, post.php) so it should work.

My project required 3 pages, page one is a unique form designed with specific questions for targeting a specific services.  Page two, contact information and it is always the same form.  The third page, the thank you page.  Even though I was building this site in WordPress I did not want to go through the hassle of setting up this form to work through a database.  I wanted the information to only be sent via email. There are positives and negatives to this, especially depending on the size of your forms and the amount that you have…A database could prove to be much more effective, but email should be good enough for most uses.

WordPress uses ‘cookies’ much like a web browser uses ‘cookies’ to remember the sites that you have visited or username and passwords that you store in your browser.  This PHP script requires the use of sessions, which is PHP code that works just like ‘cookies’ remembering information and storing it on the side until you are ready to use it.

Lets get to it!

Step 1;

Open your wp-config.php file (found in the main directory were you uploaded your WordPress software) and add these lines of code to the very top of the page just below the  <?php open tag.

// Make the use of sessions possible.
if (!session_id())
session_start();

I got this bit of help from Frank Verhoeven’s blog…

Step 2;
You will need to make a few changes to the formtoemail.php file that you have downloaded (you will need Dreamweaver or a text editor).   Add this line of code at the top of the page, just below the <?php open tag and before all of the orange text.

session_start();

if($_SESSION['ses_request']){$_REQUEST = array_merge($_SESSION['ses_request'],$_REQUEST);}

Step 3;
Still in the formtoemail.php file scrolling down close to the bottom you will need to add a line of code directly after this code

mail($my_email,$subject,$message,$headers);

and before the php close tag ?>

session_destroy();

Step 4;
Save the formtoemail.php file and upload it to the main root of your server where you have installed your WordPress software.

Now this is the part that gets a little tricky, you need to decide how you are going to create your forms.  Are you going to create page templates, or just use the ad new page option to add your forms to your site?  I used both, for page 2, which is the contact information form, because the form always stays the same I created it in a page template that I then assign to a page in WordPress.  The page title is Contact Information, the page url is www.sitename.com/contact-information.+

For more on creating wordpress page templates;

Form page one, sense the form on this page must be unique, but the page outline is always the same, so I use both a page template and the WordPress page itself to create these forms.  That way I can have the same page body with a different form for every service. (if you would like to know more about this just let me know in the comments and I will explain how to make this work)

Step 5;
Option one: You will need to place the following lines of code at the top of every page except for the first page that has a form on it.  If you have 5 pages of forms, then pages 2,3,4 and 5 need to have this code at the top.  If you have no PHP code on your page (you will know because if you do you will see <?php as the first line), you will need to wrap the code in a PHP open, close tag, <?php ?> .

Without php tags:

session_start();

if(!$_SESSION['ses_request']){$_SESSION['ses_request'] = $_REQUEST;}else{$_SESSION['ses_request'] = array_merge($_SESSION['ses_request'],$_REQUEST);}

With php tags:

session_start();

<?php if(!$_SESSION['ses_request']){$_SESSION['ses_request'] = $_REQUEST;}else{$_SESSION['ses_request'] = array_merge($_SESSION['ses_request'],$_REQUEST);} ?>

And it is very important that if your pages are written in HTML that you place these lines of code before everything on the page…Like so…

Option two: You can place the code in your header.php file sense every page is going to call that file anyway.  But remember that the lines of code must be the first thing on the header.php page.

Step 6;
Setting up your form to process your information and move from one page to the next…The action= tag.  This is the start of your form and it looks like this;

<form action=”" method=”post”>

From page one to page two for my project, my action=”/contact-form” (which navigates from page to page) and from page two to page three the action=”/formtoemail.php” (which process the forms, sends an email, and then redirects to the thank you page.

/contact-form is the same as http://www.yourdomain.com/contact-form…just be sure to have the / in front of the page name so that WordPress can properly navigate through the site.

You will need to set the form action=”/page-name” for every form on the site.

Very important: When going from your final form page to your formtoemail page the action= MUST call for formtoemail.php.  This script must have the .php extension for it to properly work, which is why we are uploading it to the root directory for your site.  You can name the file anything you want as long as it is .php.

That is it you are done, and now you have a fully functional multi-page form on your wordpress site!!!

There are a couple of other things that you can do, with this script…The script has a built in thank you page that is displayed after the submit button on your form is pressed.  You will find the code for this at the bottom of the FormtoEmail.php file.

You can use this area to implement the code from your own thank you page, or just change the content to display info about your site and not formtoemail.com.  The other thing you can do is use a redirect function that will send your visitors to another page on your site after they press the submit button.  That is the option that I use, it is the easiest.

Here is the exact code that I use in the formtoemail.php file to redirect my visitors;

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

<html>

<head>
<meta HTTP-EQUIV=”REFRESH” content=”0; url=http://www.inixtech.com/”>

<title>Thank You | Redirecting</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>

<body bgcolor=”#ffffff” text=”#000000″>

<div>
<center>
<b>Thank you <?php if(isset($_REQUEST['name'])){print stripslashes($_REQUEST['name']);} ?></b>
<br>Your message has been sent and you are being redirected…
<p><a href=”<?php print $continue; ?>”>Click here</a> if you are not redirected in 5 seconds.</p>
</center>
</div>

</body>
</html>

This line of code is the piece that is doing all of the redirecting, so you will just need to change the domain name to get your visitors to the page you want them to land on after submitting a form.

<meta HTTP-EQUIV=”REFRESH” content=”0; url=http://www.inixtech.com/”>

There is on other thing you can change, this will appear in the email that is sent, it is a footer for the email, the defult is a link to formtoemail.com…Because this script sends an email to my clients, I put a link to my tech support page in the footer of their emails, in case there is a problem they can easily contact me.  ONLY CHANGE THE CONTENT WITHIN THE QUOTATIONS.

You are looking for this line of code;

$message = $message . PHP_EOL.PHP_EOL.”– “.PHP_EOL.”Thank you for using FormToEmail from http://FormToEmail.com”;

Here is an image to help you locate it;

So really that is it!!

For any assistance you might need, please use the comments section below, and I will offer any assistance that I can!

Best of luck, I hope you find this as useful as I did….

Similar Posts:

• Mapping out your new site
• An effective outline for your Sales Page
• Mac Internet Sharing with AirPort
• Business ethics and the complexities of making ethical judgments
• Basic tips and tricks for using Twitter effectively