Contactable – Contact Form Easy with WordPress

The integration of a contact form in WordPress usually begins with a search of a Plugin and often ends with a great effort too. Since scripts are loaded on all pages and posts - only to be integrated on one side of a form. The blog is only as good as his technician and I would like to show a very simple way how to integrate a contact form into your own blog without much knowledge.

The solution is not the holy grail, but it shows how easy and resource friendly it is to integrate a contact form in WordPress.
So that we can devote ourselves fully to the integration, and we do not have to deal with PHP and JavaScript, I'll use for the example the great form Plugin contactable for jQuery by Philip Beel. This Plugin brings all the necessary files and only needs to be integrated - very easy to use and you can adapt to your own needs. Documentation can be found on the Plugin site. For the integration of the form I use the standard Kubrick theme on WordPress, but you can use it in any other theme.

WordPress provides the jQuery library. The calling of all the necessary files and scripts will take place within the template, which takes care to output the contact form. This call we'll do with the functions of WordPress - so we make sure that the files really are loaded only once. WordPress takes care of the correct order and of the dependencies.

First we create a template, I call it contact-page.php and it must be stored in the folder of your themes. This includes calling the necessary scripts and the associated stylesheets. Basically, you only need these four calls to store in the page.php of your theme, assign a new name for the file and put a comment to get recognized by WordPress (at the beginning the file). The following describes the syntax of the example of page.php in the default theme Kubrick.

<?php
/**
 * Template Name: Contact Page
 *
 * @package WordPress
 * @subpackage Default_Theme
 */

wp_enqueue_script( 'jquery.contactable', get_bloginfo('template_directory') . '/contactable/jquery.contactable.js', array('jquery') , 3.1, true );
wp_enqueue_script( 'jquery.validate', get_bloginfo('template_directory') . '/contactable/jquery.validate.pack.js', array('jquery') , 3.1, true );
wp_enqueue_script( 'my_contactable', get_bloginfo('template_directory') . '/contactable/my_contactable.js', array('jquery') , 3.1, true );
wp_enqueue_style( 'contactable', get_bloginfo('template_directory') . '/contactable/contactable.css' );

get_header(); ?>

    <div id="content" class="narrowcolumn" role="main">

        <div class="post" id="post-<?php the_ID(); ?>">
        <h2><?php the_title(); ?></h2>

            <div class="entry">
                <?php the_content('<p class="serif">Read the rest of this page »</p>'); ?>

                <div id="mycontactform"> </div>

            </div>
        </div>

    </div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

As you can see in the syntax, I have saved all files of the jQuery Form Plugnis in the folder contactable in the folder of the theme. Therefore, your paths may have to be adjusted. Right now it looks like this in my theme:

  • default

    • contactable
      • jquery.contactable.js
      • jquery.validate.pack.jss
      • my.contactable.js
      • contactable.css
    • style.css
    • contact-page.php
    • ...

I only added the file my.contactable.js; this takes care to call the form and can be filled with parameters. Their content is as follows:

jQuery(document).ready( function($){
    $('#mycontactform').contactable({
        name: 'Name',
        email: 'E-Mail',
        message : 'Message',
        recipient: 'example@domain.com',
        subject: 'Contact Form',
        recievedMsg : 'Thanks for your message.'
    });
});

If all files are stored and are adapted to your needs, then you only need to create a page in the admin area of WordPress. Give the page a name, if you want fill it with content and select a template - in our case the Contact Page. After saving the page, you should view it in the front end and click on the small label and the form will appear and can be filled out.

Through the call with the help of WordPress functions and the right parameters, the scripts are now integrated in the footer of the site. The jQuery library will not be called, it will be added by WordPress if it is not there yet, by the dependence of the parameters for the key jquery. By using a template with all calls, all the scripts and stylesheets are only involved if the page is called by WordPress. If you want the form snippets on all sides, you can insert the call in the header.php or functions.php.

You do not want to use this feature, then either don't use that CSS, or add your own design or you can fit the JS to your own needs. The same applies for additional fields in the form, this must be adapted to the content of the files.

Comments are closed.

10 comments

  1. phil

    Great integration of the plugin! I am working on a new version, which will make the mail.php a lot safe. Great tutorial!

  2. Pontus

    Exactly what I was looking for. Great article and great site!

  3. Art Webb

    Thanks for the find. This will save me tons of time!

  4. Frank

    @phil: Thanks for read us an more thanks for write a new version with more security. I love this easy to use for a form in websites.

  5. Kevin Chapelier

    It would be a nice plugin if the recipient address wasn't send via an hidden input. Right now any blog using it could be used by "the bad guys" to send spam.

  6. Keith

    Is there an easy way to integrate a captcha peice?

  7. Keith

    Thank you for the article by the way. Love the site!

  8. phil

    @Kieth - That's a very good point you made and something I have fixed in the latest version of the plugin 1.2.1 http://theodin.co.uk/blog/ajax/contactable-jquery-plugin.html please check it out!

  9. newbie

    Where do you create the actual form? I've matched my files to what you displayed before and I see the jquery scripts and css loading. Where do you store the images from Contactable?

  10. newbie

    I figured it out (I think). The form is created by the my.contactable.js file. There is an inconsistency in the naming of this file in this tutorial. It is called my_contactable.js in the contact-page.php and it was not loading for me. Once I made it consistent, I ran into another problem. Removing the array(jquery), 3.1, true from that line seemed to solve the problem.

    Also, I placed the Contactable images directory into the contactable directory under the theme folder.

    I'm getting closer to getting all of this to work.