Contactable - jQuery Plugin
11 January 2010 MondayContactable – A jQuery Plugin
Contactable is a jQuery plugin designed to make contact/feedback forms simpler and more accessible. This plugin will enable you to create a contact form on any page of a site with minimal effort. If you have ever seen the feedback forms provided by kamypyle you will be familiar with the technique they use, however contactable makes this process even simpler by overlaying the content onto your page quickly and easily with a slide effect and inline validation.
Usage
Contactable takes care of a lot of issues for you, however the plugin does have a dependency on jQuerys validate plugin, which is included in the download. To start simply create a div with an ID:
<div id="contact"> </div>
You will need to call in the jquery framework as well as the validator to make this plugin work:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.validate.pack.js"></script> <script type="text/javascript" src="jquery.contactable.packed.js"></script>
To initiate the contactable plugin simply call the plugin on the ID of your div. In the download you will also see a mail.php file. It is important that you put this at the top level of the of your server as to make the ajax request successfully:
$(function(){
$(´#contact´).contactable({
recipient: ´philip.beel@holidayextras.com´,
subject: ´A Feeback Message´
});
});
Options for contactable
There are a lot of added parameters for contactable, you can adjust pretty much everything on the form in terms of how it displays. The most important of these is the recipient which will sets who receives the message.
name: ´Name´, email: ´Email´, message : ´Message´, recipient : ´yourAddress@yoursite.co.uk´, subject : ´A contactable message´, recievedMsg : ´Thankyou for your message´, notRecievedMsg : ´Sorry, your message could not be sent, try again later´, disclaimer: ´Please feel free to get in touch, we value your feedback´
Demo
You can see the contactable plugin in action here. You can find all the styling included within the download. Thanks for checking it out, and please shout if you find any bugs or can think of ways to improve the plugin.
