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:
- The PHP require statement pointing to the name of the function file that will process your form, and
- 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.
Tags: custom, forms, page template, wordpress
Hiya,
I’m trying to the do the same thing – build a custom form within a template and insert the data into the database. I’ve been playing around with http://wordpress.org/extend/themes/prologue theme, with the code used their (within index.php and post-form.php) to process the form – it works fine to insert standard post table fields but I’m trying to insert custom fields also and running into problems – just wondering if you’ve been looking at the same method and have any ideas..?
Hi Diarmuid,
If you’re trying to insert data into the WordPress database, have a look at the inbuilt WordPress functions for accessing and modifying the database.
A handy place to start is the wpdb class:
http://codex.wordpress.org/Function_Reference/wpdb_Class
If you want to create and access a new table within the WordPress database, then have a look at this page:
http://codex.wordpress.org/Creating_Tables_with_Plugins
While it refers to creating tables using a plugin, the code examples on the page could be used within a page template with just a little tweaking.
If you want to access the Custom Fields, then you’ll find the details here:
http://codex.wordpress.org/Using_Custom_Fields
Have a look at the WordPress Function reference for the add_post_meta, delete_post_meta, update_post_meta functions.
http://codex.wordpress.org/Function_Reference
If it’s of any help, I can send you the template code that I used to create a custom form.
HTH,
Paul.
I am interested in seeing the code to produce a form template. I have not found any plug ins suitable for what I am trying to accomplish. I want to get information from users without them having to login. Being a php and wordpress rookie I understand the concept of your article, but need a little more help. Thank you.
Hi Jonas,
I’ll email you on some sample code when I get back in front of my machine tomorrow night.
Regards,
Paul.
Hi Jonas,
I’ve emailed you the code, any questions, let me know.
Paul.
Hiya Paul,
Thanks for all the references, finally got it working with wordpress’s db inserts etc. Would be great to have a look at how you’ve put together your form template if you could send me a copy of your code it would be great.
I’m now working to validate the data before inserting, any ideas on how to do this within wordpress?
thanks a mil.
Diarmaid.
Hi Paul,
thanks alot for your article, it is exactly what i am planing to do, but keeing on having problems and lost of errors! I would be very glad if you can show me some template form that works so i can understand and follow.
regards
Leon
Hi Leon,
I’ve emailed you a copy of a page template form that I’ve used to administer a database.
HTH,
Paul.
Hi Paul,
I am very grateful for the email you have sent me, actually it was what i have been looking for as starting point in learning about implement Forms! THANK YOU
Now, I’d love to know how display the contents of the above form (by extracting it from the two database tables) in the new page, or something similar. If you can help me with this I will be more than ever grateful, you have shown me already some great work which I am proud to have leant from.
Best regards
Leon
Hi Leon,
The sample form that I sent you contains a folder called com-admin. Inside that folder is a file called querys.php. That file contains all the code for accessing the database. This sample form uses its own database. If you want to use a table in the WordPress database, then I’d recommend that you have a look at the following:
http://codex.wordpress.org/Creating_Tables_with_Plugins
http://codex.wordpress.org/Function_Reference/wpdb_Class
If you want to store the form data in a separate database outside of WordPress, then have a look at the following PHP functions:
http://php.net/manual/function.mysql-connect.php
http://php.net/manual/function.mysql-query.php
http://php.net/manual/mysql.examples-basic.php
HTH,
Paul.
Found you while trying to learn a bit more about building a custom form in WP for a friend of mine and i found this article quite useful.
Well before making a new website for him (for free I am stupid or what) in Wordpress I want to make sure his custom contact forms (can’t use a plugin at all) work properly.
Would it be too much to ask you for the same as Leon? At least a non PHP expert girl like me would have a wonderfull starting point.
Thanks in advance
Joana P.
No problem Joana, I’ll email it on to you.
Regards,
Paul.
Hi Paul,
I would be very glad if you can send me example cause I’ve some problems with iplementation.
Thanks,
Max
Hi Max,
I’d be delighted to send you on an example of how this works, but unfortunately I’m away from home for a couple of days and don’t have access the the files I used. I should be back in a couple of days, so I’ll send them on as soon as I’m in front of my own computer.
Regards,
Paul.
Hi Max,
I’ve emailed you a copy of my code, it’s fully commented so it should be easy enough to follow, but if you do have any questions, do let me know.
Cheers,
Paul.
Hi Paul,
could you email me your sample code?
I am trying to make a form like yours, but still have problem.
Many thanks
#Mario
Hi Mario,
I’ve emailed you the code you asked for. Any questions, just ask.
Paul.
Hi Paul,
Thanks for the code. I will try it first.
Rgds,
#Mario
No problem Mario. Like I said, any questions, please let me know.
Cheers,
Paul.
This is a great article!
But I would also like to see some example code, could you email me please?
Thanks
/Johannes
This absolutely exactly what I have been looking for. I am working on a website project for my school and we are about to launch a redesigned website that uses WordPress. One item we want to offer is an online registration for our two parent-teacher conference nights. This is certainly going to give me a good starting point for developing this feature. Thank you so much for providing it!
Hello Paul,
Itz a wonderful article and exactly what i was looking for.
m a starter, could you please me the example codes too?
thanks
Seema
hi paul,
excellent articel. i am working on project where i need to create a form which has three stages, when user submits the first form i need to show second form and so on. i am using wordpress for the site. i have my three forms ready jus wondering how i can integrate it to wordpress theme.
can u plz send me ur code.
thanks,
Madhavi.