Using WordPress Templates to Create Forms

For the past week I’ve been working on integrating a custom form into a WordPress installation. Yes, I know there are a whole host of plug-ins out there that will allow you to add a form to your WordPress blog, but I had some pretty unique criteria that needed to be met. The criteria couldn’t be satisfied by a plug-in, so I had to roll my own.

The criteria were that the details returned by the form had to be stored in a separate database, had to have a form for user submitted data, a form for administration and had to allow me to add new queries as required. And all had to be accessible from within WordPress. So here are the basics of how I went about it.

The first step is to create a page template containing your form, e.g. my-form.php. Creating a page template is as easy as including the following lines at the top of your template:

<?php// Template Name: My Page Template?><?php require("my-form-functions.php"); ?><?php get_header(); ?><?php get_sidebar(); ?>

The last line of your template should be:

<?php get_footer(); ?>

Save the file in your theme directory. Use the following syntax when creating the HTML for your form:

<form name="my-form-name" action="" method="post">

There are two important points to note about the above code examples:

  1. The PHP require statement pointing to the name of the function file that will process your form, and
  2. the form action attribute is empty.

The first is important as I found that using your theme’s function.php can sometimes lead to problems. For example, I was unable to login to WordPress with my form processing contained in functions.php.

By leaving the action attribute empty, the form will be submitted to the containing page. Trying to direct the form to another custom page just results in a “Sorry, not found” error message from WordPress.

Because you are using the same page to display and process the form, you’ll need to create a PHP function that checks if the form is being submitted or if it is the users first visit to the page.

The easiest way to accomplish this is to include a hidden input in your form and to check the PHP $_POST global variable for the presence of the hidden input. For example, you could use code something like this:

function CheckSubmit() {if (array_key_exists('process-form', $_POST)) {.....do something.....}}

This code assumes that you have a hidden input named process-form. The value of the hidden input doesn’t matter as $_POST will only contain data if a form has been submitted. In other words, if the user has just accessed the page, $_POST will be empty and no code will be executed.

The last step is to create a new WordPress page and to use your new custom form page as the Page Template.

Due to the large number of people requesting a copy of the code I used, I’ve uploaded it my Page Template and you can download it here.

About my Code

File descriptions: comment-card.php is the page template that displays the form and com-functions.php contains the code that makes the form work.

Database details: This code was written to connect to a database containing 2 tables – responses and details. The com-functions.php file uses four constants to define your database connection details. These must be updated if you want your form to work.

Form questions: The questions in this page template are specific to the site I developed it for, so each question is validated accordingly. If you change the questions, you will also need to change the ValidateForm() function in com-functions.php.

Comment Admin: The download also contains an admin interface contained within the com-admin folder. This folder should be kept outside the WordPress hierarchy, in other words, save it to a completely separate folder from your blog.

The admin interface provides basic search and a form to send SMS text messages. The SMS facility is provided by a company called Esendex and the SMS form uses their PHP API. More information from the Esendex website.

If you have any questions, please feel free to post a comment.