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.

    


        

        


            

                Read the rest of this page »
'); ?>

                
 

            
        

    

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.