Add a Contact Form with Contactify to your WordPress Theme

While it's possible to use plugins like WP-ContactForm to add contact forms to your website it's nice to have an alternative that doesn't require a plugin. Web service Contactify (which I first learned about from Lifehacker) allows you to add a contact form to your website in one of two ways.

Using Contactify's basic form you can instantly create a link that leads to a form, hosted at Contactify, which your visitors can use to send you messages. It's a solid feature but because it forces users to leave your site it's a bit annoying. Recently Contactify added a new option that uses web-service WidgetBox to create JavaScript which you can use to add the form directly to your site.

In this post we'll go over using custom page templates to add Contactify to your WordPress theme and we'll also cover a quick way to add JavaScript to just about any page inside of WordPress.

Creating Custom Page Templates in WordPress

One basic template that's available in most WordPress themes is page.php. This file generates a custom page for all your WordPress Pages - those are the static pages that aren't included in your regular posts. A plain template for your pages is ideal for anything like an About Page or Landing Page but occasionally you want to create a special template for less standard uses.

That's what Custom Page Templates are for.

Creating a Custom Page Template in WordPress is pretty straight forward. To get started simply open the "page.php" file in your favorite editor and chose a name for the template, we've chosen "Contact Form."

At the top of the file add the following:
<?php /*
Template Name: Contact Form
*/ ?>

This identifies the file as a Page template with the name "Contact Form" for WordPress. Simply save the file with a new name (in this cage we chose contactForm.php) and your custom template is created - it doesn't do anything different yet, but at least it now exists.

Upload it to your server but leave it open in your text-editor because we'll still need to tweak it a bit.

Publishing your Contact Form

Before we get into collecting the JavaScript from Contactify we should setup the main portion of the Contact Form - that's everything except the actual working form.

Contactify will generate a basic form but we should really take a moment to properly introduce it and invite the visitor to use the form.

First we'll have to create a new Page.

Head into the WordPress Admin Panel and select Write -> Write Page to get started. At this point you can write anything you feel is appropriate for your Contact Form. Add any information that introduces the form and be sure to let your reader know that everything is confidential. Before hitting the "Publish" button though you'll want to assign the template we've just created.

In the right hand sidebar look for the box you see to the left. It should contain a dropdown menu listing the possible page templates. If you don't see that box or if your newly created custom template isn't there go back and check the code you added in the last step. Make sure you have no extra spaces and that you uploaded the new form properly.

If everything's all set save the new Page and check it out in your browser. It's obviously missing the form right now but you should get a good sense of what the page is going to look like.

The next step is adding the JavaScript form used by Contactify to collect and send the email message.

Getting the Contactify JavaScript Widget from WidgetBox

The first phase here is to collect the JavaScript from Contactify and WidgetBox. To do this head on over to Contactify and setup your "contact link." Once this is done click on "embed" and enter your link idea into the box provided (you can see a picture of the setup above.) Click on the WidgetBox icon and you'll be whisked away to the next step.

Just click the first option and WidgetBox will return with the JavaScript you'll need to enter into your Custom Page Template. Copy the JavaScript into a blank document in your text-editor and swap back over to your custom template (if you're following our lead it would be contactForm.php.)

Adding the Contactify JavaScript to your WordPress Theme

If you're new to WordPress this next step is kind of at the heart of what wp-Toolbox is all about. Right now we're going to dive into the WordPress code (which if you're new to WP you probably know little about) and make it do something new - in this case push some JavaScript that wasn't originally part of the code.

Right now you should be looking at your Contact Form Template. In this case we want the form to appear right after the main body of the Contact Form's page. All the main content in a Page (and a post for that matter) is generate using the WordPress template tag the_content(). Browsing through you're new template try to locate that line of code - depending on your template there may be some text between the parenthesis but that's no bit deal. Once you've found the_content() just add the JavaScript right after it. You can now upload the file again and give it a spin by reloading the Contact Form in your browser.

If the form isn't exactly where you want it feel free to move it around until you find the right spot. You can see our Contact Form (which uses Contactify) as an example.