How to Integrate Custom Data Input Forms into a WordPress Theme

We Web designers are using WordPress almost exclusively now days. WordPress does a great job designing the site. It’s quicker and the styling looks great. However one thing WordPress doesn’t do well is data input forms. WordPress input forms are heavily styled by the theme. The form fields are too long with too much padding. They usually contain 3 or 4 fields. Prospects can tell it’s a WordPress form. It’s not a professional look. The input form is the weakest design element of the site.

Serious clients don’t want fluff pieces. They want web sites that do serious work. When it comes to the data form – where the prospect actually interacts with the site – Web designers do the same thing. They throw up Contact Form 7 with CAPTCHA and send it to the client’s email address. That’s lame. It shows a lack of programming expertise. This article explains how to integrate real database forms within your site’s WordPress theme. Then you can send input from the site to a database like this one:

The web site form is where the rubber meets to road. All the work of creating the site comes down to getting leads through the form. When you’ve done the hard work of creating compelling content it is too bad to send people to a generic form. The form is the call to action. It is the point where your user makes the decision to get involved or not.

To most designers the web form is an afterthought. Almost everyone installs Contact Form 7, throws in a few fields, and calls it a day. The “Contact Us” page of WordPress sites all look the same. It becomes commonplace. The user can tell that little, if any thought went into the page. This article shows you how to create custom database style forms for your WordPress site.

Step 1 – Develop a custom WordPress template in your theme

Wordpress uses templates. When you edit a page you’ll see the available templates in the dropdown list on the right. You’ll want to create a unique template for the form. Here’s how you do that.

1. Find the template that most closely resembles the form.

In other words, design a page in WordPress exactly how you want your form to appear (without any fields). Use the closest existing template. If you are using sidebars add them now. Get the page setup how you want it to look. Add the word “test” into the page. Preview it in the Web browser.

2. FTP into the site and find the template folder

Wordpress file format seems complicated but it really isn’t. Every WordPress site is organized the same way. Once you FTP in go to the WordPress folder. Then go to wp-content folder. Then go to the themes folder. Then find your theme and go into that folder.

This is where the templates reside. The template name you see in the WordPress page edit screen is not the filename. You’ll find the template name in a comment in the first few lines of code. Download a file. Open it in a text editor like Notepad or Tex-edit and review the code. You’ll find the template name at the very top in the comments.

3. Find your existing template

Find the template you used to design the form in step one. Usually it’s obvious. You may need to open a few files. When you find it you’ll see the name shown in the dropdown (on WordPress page edit) in the file.

4. Create a new template by doing save as

Modify the template in a text editor. Change the template name to something like “custom form.” Do a save as to save the file as custom-form.php. FTP that file to the web. Refresh your WordPress page edit screen. Verify that your custom template shows up in the template dropdown. Set your page to your new template. Preview the page in a Web browser. Now you’re ready to add your form.

Step Two – Add your form to your custom template by modifying the PHP

1. Add your form by modifying the PHP.

Open the new template PHP file in a text editor. Take a look at the code. Preview the form in a Web browser. Do a View Source in your Web browser. Do a search for the word “test” added in step 1. Look at the code above and below it.

Return to your template in the text editor. The word “test” won’t be there because that comes out of the database. But the code above and below it will. Find the place where the text belongs by reviewing the code. This is the point where to form goes.

2. Insert your form into your template

Design your form offline using Dreamweaver. In Dreamweaver you can design a complicated form with many fields. The idea is to develop a sophisticated form. When you have it designed save it to the Desktop.

Open your Dreamweaver designed form in your text editor. In the html, find the point that begins with form. This is the start of the form. Then find the point that ends in /form. This is the end of the form. Take that html, from the beginning to the end of the form and copy it to the clipboard.

Go back to your template and paste it in. You’ll want to paste it to the right location in the PHP, exactly where the word “test” would have been. Save your new template.

3. Upload your template and assign it in WordPress Page Edit

Upload the revised template to the site. Overwrite your template. Then go into WordPress, Pages, Edit Page and review the form page. Make sure your new template is assigned. Preview the page in the browser. Your Dreamweaver designed form should now be integrated perfectly into your WordPress design complete with heading, footer, menu, sidebars and everything else.

That’s the basics of getting a real data input form integrated into WordPress.

Step 3 – Add the styling you want to your form by overriding the over-styled theme CSS

If you’re a programmer like me the theme styling of data input forms looks hideous. It almost always creates huge padded 100% length forms that look terrible. Database forms should be tight. The idea is to get a lot of fields on the page. The solution is to add your CSS styling to your custom template to override the theme’s styling of form elements.

Most WordPress themes put heavy CSS styling on form elements. They style things like input fields, submit buttons, etc. They almost always add to much padding. You’ll want to add your own styling so the form looks tighter and more professional. You do this by adding your own CSS above the form in the template. Simply add a style tag above the form. Style the form elements using CSS to your liking. What you are doing as overwriting the theme’s form styling for this one page only. Add in you CSS and them close with a /style tag. Upload the template again and refresh the page. Work the CSS until the form looks like you want it to.

Step 4 – Process your form through a PHP script, not Contact Form 7

Almost all designers process their forms using Contact Form 7. This is unacceptable for all but the most basic web sites. If you have a complicated form it is better to process it using a custom form processing script. WordPress is written in PHP. Want you’ll want to do is find or create a email-back script written in PHP. The form tag of your form needs to POST to that script. When someone submits the form it will call the script. PHP form processing scripts are easy to find. They are not complicated. Usually you are just formatting the fields into an email and sending it. You can also send the form data to a database.

Exactly how to write a PHP form processing script is beyond the scope of this article but it isn’t hard. Just create a PHP script and POST your form to it. Now you are processing the form completely outside of WordPress.

When you write a custom PHP form processing script you usually send the output to a database or email or both. When you’re done processing the data from the form send the user to a thank you page (designed in WordPress). What you’ve done is jailbreak out of the WordPress theme, processed the form, and returned to it and the user is none the wiser.

Creating custom forms opens your WordPress designed site up to true data processing. It gets it out of the mode of just picture and text and puts it in the mode of database processing. It gives you custom forms using the design capability of WordPress without sacrificing the data processing side of things. You can create a true data input screen this way. Your site won’t have that “dumbed down” look of a Contact Form 7 form. This is an excellent way to have a true database site integrated into a lovely WordPress site.