Contactable – 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 this 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.min.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({
subject: 'A Feeback Message'
});
});
Important once downloaded open the mail.php file and navigate to the line 12. look for /*RECIPIENTS EMAIL ADDRESS HERE*/ and replace with the email address you wish to use.
mail('/*RECIPIENTS EMAIL ADDRESS HERE*/', $subject, $contactMessage);
Options for contactable
There are a lots of extra parameters for contactable, you can adjust pretty much everything on the form in terms of how it displays. A new feature added in 1.2.1 is hideOnSubmit which by default is set to true, this simple hides the contact form once a message has been sent successfully.
name: 'Name', email: 'Email', message : 'Message', 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', hideOnSubmit: true
Demo
You can see the contactable plugin in action here. You can find all the styling included within the download, which has been tested on IE6 IE7 FF PC FF mac Safari. Thanks for checking it out, and please shout if you find any bugs or can think of ways to improve the plugin.
Version History
26/08/2009 – Version 1.0
24/09/2009 – Version 1.2
18/01/2010 – Version 1.2.1
New features included
- Plugin now supports Strict HTML Doctypes
- CSS error field bug fixed
- Submit button issue fixed
- CSS IE6 IE7 style issues resolved
- Added auto hide form feature
- Security update to mail.php
- Sever side email validation
August 26th, 2009
Nice work!!!
« Reply
August 26th, 2009
very nice!
« Reply
August 26th, 2009
Very clean and nicely done!
« Reply
August 26th, 2009
Great work! Works fine… Nicely done
« Reply
August 30th, 2009
This is excellent. I’ve seen a lot of forms that attempt to make it easier to implement them as it seems to be a problem of much concern to the design community.
Thanks for this!
« Reply
August 31st, 2009
Excellent. But IE6, IE7 need hacks???
« Reply
philipbeel Reply:
August 31st, 2009 at 10:29 pm
@Bruno Thanks – I have tested IE7 on XP and Vista everything worked ok for me. If you spot any bugs please let me know and I will try to fix thanks!
« Reply
jophin Reply:
January 17th, 2010 at 1:37 pm
@philipbeel,
Thanks for sharing your knowledge……
I am found bug on xp ie7 ..plz can you update it
« Reply
August 31st, 2009
A minor buggette…
Line 80 of the contactable.js has:
$(‘#callback’).show().append(defaults.recievedMsg);
I think this should be
$(‘#callback’).show().append(defaults.notRecievedMsg);
« Reply
philipbeel Reply:
August 31st, 2009 at 10:36 pm
@Simes – Great spot, all fixed and updated, thanks for your help!
« Reply
September 1st, 2009
It seems it does not sanitize customer inputs. Is it safe enough to use on live?
« Reply
philipbeel Reply:
September 1st, 2009 at 10:12 am
@shin – The fields will be specific to the users machine, each comment will only be viewable by the user and yourself – It will not be public for others to see.
« Reply
September 1st, 2009
@philipsbeel – Test using DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”
« Reply
September 1st, 2009
CoolIt’s very cool, I like it..
« Reply
September 2nd, 2009
Thanks for the plugin… something I have been looking for.
« Reply
September 3rd, 2009
very cool, this would be great for my applications. thanks
« Reply
September 3rd, 2009
Like it, but it break my WP theme. So cannot use but very nice plugin..not sure if it is due to the jquery in my WP theme. Are you planning to convert this plugin into WP compatible?
« Reply
September 3rd, 2009
Cool!
« Reply
September 3rd, 2009
How can I make it slide closed after 5sec or after success?
« Reply
September 5th, 2009
Elegant, classy, thank you for a gem.
« Reply
September 7th, 2009
@philipsbeel @Bruno: Using that DOCTYPE seems to be a problem with ie6/ie7. Any idea how to fix it? Thanx for this nice plugins
« Reply
philipbeel Reply:
September 12th, 2009 at 6:55 pm
@port119
Thanks for the headsup I will look into fixing it as part of the next release. Cheers!
« Reply
September 7th, 2009
Hi There, I would like to have the form appear when clicking on an isolated link, eg contact in the navigation menu, what do I need to call for this to work? Thank you
« Reply
philipbeel Reply:
September 10th, 2009 at 8:54 pm
@Emile – Currently the contactable plugin does not facilitiate this feature, however it is a very good suggestion and I will consider including it in the next version – thanks!
« Reply
September 7th, 2009
it is a very good
« Reply
September 9th, 2009
Very nice work, i have one question, how can i change form´s language?
« Reply
September 11th, 2009
it looks fine now, BUT the “submit” button is not pressable.
when i click it to submit, it does nothing…what could this be?
thanks.
very cool script!
« Reply
September 14th, 2009
Really great work!!
How is it possible to realize an inline form validation with default values (e.g. default value is “First name”, but the value on this input field is blank when focussed)??
M.
« Reply
philipbeel Reply:
September 14th, 2009 at 10:39 am
@Michael – Thanks.
Im not entirely sure I understand what you mean, but if your suggesting the form is too rigid in its structure It should only serve a generalized scope, if your looking for something more bespoke I would highly recommend writing another solution, or even adapting what I have created so far!
« Reply
September 14th, 2009
Hi Philip,
thanks for reply and sorry for the confusion. I sent you some more information via contact form.
M.
« Reply
September 21st, 2009
Thanks for the plugin !
I’m setting it on my blog.
I just found 2 ‘minor’ bugs :
- the option ‘disclaimer’ is not defined in the packed version of the plugin. Instead there is this text : ‘This will be some contact information about opening hours etc’
- the animation has a weird behavior if you give the id ‘contactable’ to the empty
For everything else, it works !
« Reply
philipbeel Reply:
September 21st, 2009 at 11:52 am
Thanks for your feedback. I will be sure to get this fixed in the next release!
« Reply
September 23rd, 2009
This is such a cool script. I am having one problem though and it doesn’t seem to be affecting anyone else though. I have the problem narrowed down to the doc type at the beginning of the HTML is causing the script not to work. When I remove that and replace it with only the and tags it works fine but the rest of my page does not display properly. Any suggestions?
« Reply
philipbeel Reply:
September 24th, 2009 at 8:46 am
hi @midamericametals – I have had a few people mention this issue. I have only tried it out on a XHTML strict document and found that some of the CSS styling was at fault. I will be releasing version 1.2 of the plugin soon and I hope to have any of these issues resolved as part of the release! Cheers for the heads up thought!
« Reply
September 23rd, 2009
disregard my post. There is a problem in the contactable.css file where form should have a capital F, not lowercase. After this is fixed, the form works with the standard DOC type.
« Reply
October 22nd, 2009
hello i ws wondering , how to add the date functionality to this ? suppose i want my guests to insert date to the feed back?? is it possible ??
« Reply
philipbeel Reply:
October 22nd, 2009 at 1:08 pm
@maddy – Thanks for your question. At the moment there is no date setting on the form. This could be extended with the date picker plugin, although it would be too bulky for a general release.
« Reply
October 22nd, 2009
Good work! Thanks.
« Reply
October 22nd, 2009
Very bad idea, having recipients specified on the client side and then sending them through in the query string. You’ve essentially created a spam sender, any remote server can send countless emails through this… And what exactly is the appeal of this versus a pure server-side solution; one which would work for users with JavaScript disabled?
Also, since the email exists in the source code, it’s a very easy target for an everyday email-harvesting bot.
« Reply
philipbeel Reply:
October 23rd, 2009 at 9:10 am
@James – Thank you for your concern. If spamming is something you are worried about I highly recommend modifying the plug-in to set your email in the mail.php file, this way your email address will not need to be passed into the form. I realize Ideally the plugin would do this for you, but I wanted to create something which would be accessible to a wider audience. If you have a solution to this problem please feel free to share it . As I have stated I am still learning this wonderful language myself so any guidance is always appreciated!
« Reply
October 22nd, 2009
Excellent plugin but having some problem with the demo. Link is not working, Please check.
« Reply
October 22nd, 2009
Really cool! Congratulations Philip. One questions: it’s possible to use and to edit contactable? thanks! f
« Reply
October 29th, 2009
I had the same issue happen to me when I used the plug-in. Internet Explorer 7 and 8 were not behaving like FF. I’m using XHTML 1.1 in my website, and so I wrote a post about what I did to fix it. I hope this comes useful for others.
http://www.andphp.com/2009/10/29/jquery-contactable-plug-in-on-internet-explorer/
« Reply
November 7th, 2009
Can we make it slideout on page load. I need something like this when page is loaded. and once clicked it can behave like normal.
« Reply
November 11th, 2009
Is it possible to set the “from” address, so when you get the emailed form through its from xyz@example.com? At the moment its coming through from a root admin email address on our server hosts?
Also, has anyone successfuly made this a bit more secure, by setting recipient in mail.php? Have tried to edit file as Phil suggested, but I just broke it…!
« Reply
philipbeel Reply:
November 11th, 2009 at 1:06 pm
@Jimmy – I dont believe it is possible to switch the email that you receive the message from, However you could always pass the host email into a forwarder on a more preferable email address with your control panel.
You can hard code your email in the mail.php file like this:
$email = 'yourname@yoursite.com';I hope this helps you out!« Reply
November 12th, 2009
its not working properly in IE6
« Reply
November 18th, 2009
Looking for a code to do the same but with twitter Follow me button.
« Reply
philipbeel Reply:
November 20th, 2009 at 9:01 am
That sounds interesting, however Im pretty sure that wouldn’t involve a plug-in. You could achieve the same ends with some CSS and an
« Reply
November 30th, 2009
I almost used this, but then I looked at the mail.php script — unfortunately it is completely insecure. Spammers will love this and use your server to send their spam. I recommend not using this unless you secure the mail.php script by hardcoding the email, stripping any headers, etc.
« Reply
December 9th, 2009
useful and nice thanks
« Reply
December 11th, 2009
is there a way to make the contact form to slide back after a timeout when the message is sent?
« Reply
philipbeel Reply:
December 11th, 2009 at 1:22 pm
@Matt – No there is not, but it is a good suggestion and something I could integrate into the next release. cheers!
« Reply
December 11th, 2009
Great plug-in, just wondered if there was a way to have a 2 color state? One when it is hidden and one when it is out?
« Reply
December 22nd, 2009
I’ not sure whether you are aware of that nice spam relay you’re promoting here.
Please stop encouraging people to deploy the packaged mail.php on their servers until it contains at least a little bit of CSRF protection…
« Reply
philipbeel Reply:
December 22nd, 2009 at 11:44 am
@Robert, I will assume you did not bother to read any of the comments above, so I will reiterate. The security flaws have been recognized by a number of users, all of which have been kind enough to leave constructive feedback. Taking this on board I have been working on a new release, which I will making available soon.
« Reply
Robert Reply:
December 23rd, 2009 at 6:00 am
@philipbeel, looks like I missed these comments. Glad to hear that a more secure version is on the drafting table. Wouldn’t it be helpful for aspiring users to include a short heads-up into the article body?
« Reply
December 23rd, 2009
The design is great, but the lack of security is horrific! You should immediately secure your mail.php – otherwise, it’s an open gate to all spammers of the world!
Try to paste my suggestion to this post:
$c = array(
‘recipient’ => ‘/^ [\w.!#%&\*\/=\?\^\`\{\|\}\~+-]{1,64}\@[[:alnum:].-]{1,255}\.[a-z]{2,6} $/xi’,
‘name’ => ‘/^[[:print:][:space:]]{10,}$/’,
‘email’ => ‘/^ [\w.!#%&\*\/=\?\^\`\{\|\}\~+-]{1,64}\@[[:alnum:].-]{1,255}\.[a-z]{2,6} $/xi’,
‘comment’ => ‘/^[[:print:][:space:]]{10,}$/’,
’subject’ => ‘/^[[:print:]]{3,}$/’,
‘text’ => ‘/^[[:print:][:space:]]{10,}$/’,
);
foreach ($_GET as $k => $v) {
if (isset($c[$k])) {
if (!preg_match($c[$k], $v)) die(‘There is a problem with ‘.$k.’: ‘.$v);
}
}
$notes = stripcslashes($notes);
$message = “Message: “.$_GET["comment"].”\r\nFrom: “.$_GET["name"].”\r\nReply-to: “.$_GET["email"];
mail($_GET["recipient"], $_GET["subject"], $message);
Merry X-Mas and a Happy New Year,
Marco
« Reply
December 24th, 2009
Hi,
I have a problem when I try to integrate it into wordpress. Wordpress loads jquery with:
… script type=’text/javascript’ src=’http://…/wp-includes/js/jquery/jquery.js?ver=1.3.2′ …
But your script doesn’t work, nothing will be shown. When I add
…script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js …
it works, but not the rest of the scripts like superfish-menu. Can someone help me, where I made a mistake or so?
Thanx
Frank
« Reply
philipbeel Reply:
December 29th, 2009 at 10:41 am
@Frank-Andre Thies, Its not something I have seen before. Have you tried turning off the other plugins to make sure its not conflicting. I have had reports of issues in using contactable with lightbox. There will be a new release available soon.
« Reply
Frank-Andre Thies Reply:
December 31st, 2009 at 12:24 pm
@philipbeel, i set the other plugins off, but it still not works. I copied the jquery.js from wordpress to use it with your example and then i got this error:
Error: $ is not a function
Quelldatei: file … contactable/index.html
Line: 22: $(function(){
But when I change the first two lines from
jQuery(function(){
$(‘#contact’).contactable({
into
jQuery(function(){
jQuery(‘#contact’).contactable({
it works!
Maybe that is a help for other users.
Thanx
Frank
« Reply
Brandon Reply:
January 14th, 2010 at 5:04 pm
@Frank-Andre Thies, THANK U SO MUCH! I tried so long to debug, finally i did it with your comment. GREAT!
January 7th, 2010
Nice! I’ll try to create new version, connected with IzzyHelp.com, so visitor will have handy FAQ there or contact option. I’ll post it here when done!
Thanks!
« Reply
January 12th, 2010
nice feedback form, but is it possible to let it come out of the right side of the page..? sorry for my bad engles.
Thanks
« Reply
philipbeel Reply:
January 12th, 2010 at 9:08 am
@Abdullah, Currently the form does not give that option, You are more than welcome to manually modify the plugin to enable this to work, (you would need to adjust some js settings as well as CSS)
« Reply
Abdullah Reply:
January 12th, 2010 at 9:16 am
@philipbeel, Thanks for the quick response. Unfortunately I am not a programmer so I just have to find another solution.
Thanks..Greats from The Netherlands
« Reply
January 12th, 2010
There is no demo?
« Reply
philipbeel Reply:
January 12th, 2010 at 3:03 pm
@anna, Hi, if you go to http://www.theodin.co.uk/tools/tutorials/jqueryTutorial/plugins/contactable/? you should see a ‘feedback’ tab on the left, that is the plugin
« Reply
January 13th, 2010
I’ve just published an updated version, with IzzyHelp support in tabs, hover effect and as Philip suggested me, small update in mail.php file, view demo or download here
Enjoy! And Philip – thanks again for great script!
« Reply
January 19th, 2010
I am very beginner at code, i have a problem. I have copied all the contents of the folder into the root of my website, and i have a problem i dont know how to get it to appear on my index page of my website, on the index.php or my layout_main which is the set-up and layout of my website, what code should i put into those .php files to get this thing to appear on my homepage.
Thank
Petar
« Reply
January 20th, 2010
It seems that the demo you offer on this site is’nt working, just letting you know.
Look forward to putting your code it into practice, thanks
)
« Reply
philipbeel Reply:
January 20th, 2010 at 8:59 am
@Stephen Walder, Can you let me know what browser you are using?! I am not seeing any issues.
« Reply
Dani Reply:
January 20th, 2010 at 9:23 am
@philipbeel, I have the same problem. I use FF and tested with opera and chrome.
« Reply
January 25th, 2010
Currently trying to embed this into a Wordpress site however I get the following error…
Uncaught TypeError: Object # has no method ‘contactable’
All the JS files are called before
$(function(){
$(‘#contact’).contactable({
subject: ‘A Feeback Message’
});
});
The URL’s work and they’re correct so not sure why I’m getting this error?
Any help would be great
« Reply
Anthony B Reply:
January 25th, 2010 at 2:37 am
@Anthony B, scrap that, it seems to have been a conflict kicking up a fuss – many thanks
« Reply
January 26th, 2010
i tried everything and i keep having the error message, the message is not sent
« Reply
philipbeel Reply:
January 26th, 2010 at 8:56 am
@Charly, are you using the form on a linux server running PHP? You should be able to see the error message in firebug if there is an issue. Do you have a link to a test page so I may look?
« Reply
January 26th, 2010
great stuff, cool and nice article
« Reply
February 1st, 2010
The contact form does not work in IE6. The form is hidden but it affects the position of the surrounding html, this can be seen in the demo page. The words ” « Click the feedback link on the left ” appear at the top of the page in modern web browsers including IE7+ but in IE it appear further down the page, after the position of the form.
« Reply
February 1st, 2010
Thanks for the plugin.
« Reply
February 2nd, 2010
Great plugin, works nicely however I had a question, once the form has been submitted, how can we allow the form to be called again?
E.g. User clicks send, then the form closes, if the user clicks Feedback again, it loads again with all the form elements being displayed again and the success message gone.
It’s generally bad practice to only allow the user to leave feedback once and have to refresh the page to leave another piece of feedback.
Thanks in advance.
« Reply
philipbeel Reply:
February 2nd, 2010 at 8:54 am
@James, thanks for your suggestion. The plug-in does not allow people to send multiple feedback messages as to handle spammers. I see your point, but I do not feel the plug-in warrants this functionality on a general release. Please feel to recycle any of my code should you want to implement this feature on your own site.
« Reply
James Reply:
February 2nd, 2010 at 12:33 pm
@philipbeel, I understand, thanks for the reply. I don’t mean to sound cheeky but since I am fairly new to jQuery do you have any tips on how to implement this feature, I know how to do it from a CSS point of view (getting the feedback button back in view) but in terms of re-initialising the elements to be displayed and make them active again possibly on a “Send another message” click, how would I go about that. Are you aware of any jQuery functions which do this?
If I manage to get it working I’ll post the extra code here incase anyone else wanted to use it.
Thank you.
« Reply
philipbeel Reply:
February 2nd, 2010 at 12:40 pm
@James, Off the top of my head you would want to set hideOnSubmit: false, then set a timeout on the success callback, most of this can be done with with the .css() property. you would probably want to set the submit functions up as a .live() so you can use the function repeatedly. Good luck, let me know how you get on!
February 2nd, 2010
I recently made an open-source PHP contact form class which has a very similar name (and function) to this jQuery plugin. Take a look: http://contacular.co.uk/
« Reply