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.