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
dash Reply:
February 23rd, 2010 at 3:54 pm
@philipbeel, will this only work on a linux server ?
« Reply
philipbeel Reply:
February 23rd, 2010 at 4:51 pm
yes, it’s PHP based.
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
February 9th, 2010
Great plugin! Thanks for making this available and for making it so easy to use!
« Reply
February 9th, 2010
Hi, I just tried to install this on a WP 2.9.1 and it said “No Valid Header.” Is this usable with 2.9.1, or if not, are you planning to update? It looks great and I’d love to try it.
Thanks!
« Reply
philipbeel Reply:
February 9th, 2010 at 2:33 pm
@Valerie, The plugin is not tied to the wordpress CMS, but if you have having issues I would try looking at the headers. the plugin supports XHTML 1.0 strict. Thanks!
« Reply
Valerie Reply:
February 9th, 2010 at 3:24 pm
@philipbeel, D’oh! Silly me. I heard plugin and just assumed. Well, I just proved what happens when I do that, huh?
Thanks, I’ll take a look and see if I can figure out how to make it work.
« Reply
February 19th, 2010
Great work.But i do have a question.how could i make a contact form for my wordpress site without using plugins.ie i need one like in this site http://www.site5.com/wordpress-themes/ they use ajax based contact form.how could i add them to my site.
« Reply
philipbeel Reply:
February 19th, 2010 at 8:50 am
@TheShadow, It looks like the guys over at WP engineer have already come up with a solution:
http://wpengineer.com/contactable-contaktform-easy-with-wordpress/ hope this helps you out
« Reply
February 22nd, 2010
the code already inserted but pc prompt there is a virus??
any solution for that?i am using microsoft security essentials.
thank you for helping
« Reply
March 2nd, 2010
Can I use this for iweb? Like an html code, or is this completely different?
Thanks!
« Reply
March 3rd, 2010
This really tempting, tried a lot to integrate in my blog.
If you can provide a little steps, how to integrate with WordPress that would be great.
« Reply
philipbeel Reply:
March 4th, 2010 at 8:53 am
@imtiyaz, why not check out http://wpengineer.com/contactable-contaktform-easy-with-wordpress/ for a comprehensive guide on integrating contactable into a wordpress blog.
« Reply
imtiyaz Reply:
March 5th, 2010 at 4:25 pm
@philipbeel, thanks, I have just seen your reply, its a bit late I almost integrated the plugin with theme, I have certain issues, I placed mail.php in root of subdomain, If I use this path from demo programing running on local machine its working perfectly, but not from the integrated one, I almost blocked in thoughts. please throw me some insight, I just know a,b,c,d in php.
« Reply
philipbeel Reply:
March 5th, 2010 at 8:03 pm
@imtiyaz, why not check out http://wordpress.org/extend/plugins/rejected-magic-contact-rejected/ should all be done for you
March 4th, 2010
Very cool. Thanx for sharing.
« Reply
March 9th, 2010
Hey Philip
I am using your awesome plugin on my homepage and wanted to change the position
in height (so that the feedback logo is a bit lower) Could you tell me in wich line I can find the code? sorry if my english sounds strange… german
greetings
« Reply
philipbeel Reply:
March 9th, 2010 at 4:25 pm
@Julian, Hi, assuming you have not changed the naming convention you would want to change the #contactable in the css. the ‘top’ property is what defines the distance. Hope this helps
« Reply
March 11th, 2010
Hey Philip, thanks for making this great plugin. I modified it a bit to make it appear on the right side of the page, I have posted it on my blog. If you don’t mind, I would like to share it here too: http://www.sunarlim.com/2010/03/contactable-jquery-plugin-on-the-right-side-of-page/
« Reply
philipbeel Reply:
March 12th, 2010 at 9:01 am
@Michael Sunarlim, Brilliant, anything that aids to community is fine by me!
« Reply
March 12th, 2010
Hi,
Thanks for the excellent plug-in for WordPress. Can you let me know how to add this to HTML pages (instead of using the index.html in the download)? Is this (not plug-in, just code) works with Joomla CMS?. Any further details would be appreciated.
Have a wonderful weekend!
« Reply
philipbeel Reply:
March 12th, 2010 at 9:03 am
@Srinath Sadda, hey, the plugin will work with any PHP driven pages. I have no experience with Joomla so I could not say. There is a wordpress plugin if that helps http://wordpress.org/extend/plugins/rejected-magic-contact-rejected/
« Reply
Srinath Sadda Reply:
March 13th, 2010 at 8:25 pm
@philipbeel, Thanks for your quick reply. The plug-in works like a charm! I’ll try to integrate the code into Joomla CMS in coming days.
« Reply
March 13th, 2010
Thanks for the plugin – it’s fantastic!
« Reply
March 14th, 2010
im using it for my friend website. thank you.
« Reply
March 17th, 2010
how can i put the feed back button on the top of the page ?!
« Reply
philipbeel Reply:
March 18th, 2010 at 8:56 am
@bLu, Feel free to modify the plugin and CSS. You will need to tweak the animate function and the CSS. Good luck!
« Reply
March 31st, 2010
If I want to call the function two times on one page – one on the standard button that comes with the script, and another if a certain div is clicked (the second div has a different style), how do i go about doing this? thanks!
« Reply
philipbeel Reply:
March 31st, 2010 at 2:22 pm
@shira, with great difficulty. That goes a bit beyond the remit of the plugin. It should be do-able, but it would require quite a bit of re-writing.
« Reply
April 10th, 2010
cool! very easy to use THANKS A LOT!!
« Reply
April 11th, 2010
Thanks for this plugin.
« Reply
April 15th, 2010
Hi,
I am using this in my asp.net website & it is working fine, but I need to know that on click on SEND button, how can I execute my server side code.
Please help.
Thanks.
« Reply
philipbeel Reply:
April 16th, 2010 at 11:42 am
@Rahul, Hi you would need to remove the mail.php file and change the ajax call to point to your new file. doing a search for mail.php in the uncompressed version of the plugin will reveal it. Afraid I don’t use ASP.net so you are on your own from there.
« Reply
April 19th, 2010
Great plugin. Works perfect on Firefox/Vista. Thanks
« Reply
April 20th, 2010
Hi,
just thought to mention that for those who think your plugin demo site is not working, maybe they are blocking Google (i hear of more and more people who do so for a good reason (many good reasons). Personally i don’t think it’s a good idea to include the jquery from there, speed , ok, but Google should be left outside whenever possible, just my opinion
« Reply
April 24th, 2010
Hi, great plugin!
The following line is missing on my downloaded mail.php:
“mail(‘/*RECIPIENTS EMAIL ADDRESS HERE*/’, $subject, $contactMessage);”
How can I do to configure the recipient’s email address?
« Reply
April 27th, 2010
espectacular sos un genio de genios. Gracias mil
« Reply
April 27th, 2010
Very nice, thank you.
« Reply
April 29th, 2010
Hi, and thank you for sharing this nice work. I’m trying to add a autorespond.php but with no luck. This file is just supposed to send a html mail with $name and $emailAddr parsed.
If i add include ‘autorespond.php’ to the mail.php after the mail function i get the error “Sorry but your message….”, but it is working and both mails are sent correctly.
To correct this error message i have tried to insert include autorespond.php in jquery.contactable.js but i really don’t know how.
Do you have any guidence to solve my problem? Thank you.
« Reply
April 30th, 2010
hello,
i tried to install it, but allways coming up “ERROR”…
Not valid header…!!!!!! what i can i do now?
thanks
« Reply
May 2nd, 2010
I tried to use the plugin in an UTF-8-encoded page and got several issues with the mail-function in mail.php: international characters are not supported, by default the sender address it taken from the server php.ini-file instead of using the user’s email-address, the required email-header informations are missing so the email will by chance classified as spam by the email-provider.
I am not a programmer, but I got it working by changing in mail.php the line
mail(‘/*RECIPIENTS EMAIL ADDRESS HERE*/’, $subject, $contactMessage);
to
$headers = “From: $emailAddr\n”;
$headers .= “X-Mailer: PHP/ContactableContactForm\n”;
$headers .= “MIME-Version: 1.0\n”;
$headers .= “Content-type: text/plain; charset=utf-8\n”;
$headers .= “Content-Transfer-Encoding: quoted-printable\n”;
mail(‘/*RECIPIENTS EMAIL ADDRESS HERE*/’, $subject, $contactMessage, $headers);
It adds a basic “$headers”-array and uses the given user’s email-address.
It works fine for me, but I don’t know whether is makes the function insecure.
Thanks
Juergen
« Reply
May 5th, 2010
Hello,
I think there is a bug in the “jquery.contactable.js” line 34, it is where Form is constructed. Note that labels for elements are hard-coded there and therefore “defaults” array doesn’t apply.
Best
« Reply
May 12th, 2010
muchas gracias por el fomulario…
« Reply
May 14th, 2010
hello i did everything but it’s still not working i customized that a little bit look more like mine site you can see it at: http://www.crearedevelopment.co.cc
and tell me what is wrong!
« Reply
philipbeel Reply:
May 14th, 2010 at 11:39 am
@Khuram Malik, Hello, Contactable looks great there. if you open firebug and view the repsonse tab you will see it has an error: Email entered is not valid. Did you change the mail.php file much?
Also can you tell me what version you are running on the site?
« Reply
May 26th, 2010
Thats one fine example of what CSS can do ! I am so impressed, I am adding this tutorial to my CSS aggregator site. Hope you dont mind.
« Reply
May 29th, 2010
hey there… this plugin works like a charm.. i’d like to thank you first
but in ie6.. this is how it looks for me..
pls help !!
http://tweetphoto.com/24506877
http://tweetphoto.com/24506913
this is how it looks
« Reply
June 3rd, 2010
nice work! thx!
« Reply
Mak Reply:
June 6th, 2010 at 3:55 pm
How i can change encoding (to utf-8 or windows-1251). On my email i have this: п║п©п╬я─я┌
« Reply
June 7th, 2010
Hey there,
How do i set up an auto responce with this form?
Cheers,
Ross
« Reply
June 20th, 2010
Hello
I have some javascript code in my page and when I moves one, the other does not work, then I think we should put them in some way but I do not know how.
can someone help me put them in order for it to work all.
thank you
Studio RD
$.noConflict();
// Code that uses other library’s $ can follow here.
$(function() {
$(‘#gal1 a’).lightBox();
$(‘#gal2 a’).lightBox();
$(‘#gal3 a’).lightBox();
});
/**/
$(‘div#footerBt’).click(
function() {
$(‘#footerContent’).animate({“marginBottom”: “-=45px”}, “slow”);
$(this).animate({“marginBottom”: “-=45px”}, “slow”).animate({“marginBottom”: “+=5px”}, “fast”);
$(‘#fotplug’).hide(‘slow’);
});
#content {
background-color:#FDFDFD;
border-left:2px solid #333333;
border-right:2px solid #333333;
margin:0 auto 0;
padding:10px;
position:relative;
width:930px;
height:100%;
}
$(function(){
$(‘#contact’).contactable({
subject: ‘A Feeback Message’
});
});
« Reply
June 20th, 2010
here the complete code
Studio RD
$.noConflict();
// Code that uses other library’s $ can follow here.
$(function() {
$(‘#gal1 a’).lightBox();
$(‘#gal2 a’).lightBox();
$(‘#gal3 a’).lightBox();
});
/**/
$(‘div#footerBt’).click(
function() {
$(‘#footerContent’).animate({“marginBottom”: “-=45px”}, “slow”);
$(this).animate({“marginBottom”: “-=45px”}, “slow”).animate({“marginBottom”: “+=5px”}, “fast”);
$(‘#fotplug’).hide(‘slow’);
});
#content {
background-color:#FDFDFD;
border-left:2px solid #333333;
border-right:2px solid #333333;
margin:0 auto 0;
padding:10px;
position:relative;
width:930px;
height:100%;
}
$(function(){
$(‘#contact’).contactable({
subject: ‘A Feeback Message’
});
});
« Reply
June 20th, 2010
Studio RD
$.noConflict();
// Code that uses other library’s $ can follow here.
$(function() {
$(‘#gal1 a’).lightBox();
$(‘#gal2 a’).lightBox();
$(‘#gal3 a’).lightBox();
});
« Reply
June 20th, 2010
/**/
$(‘div#footerBt’).click(
function() {
$(‘#footerContent’).animate({“marginBottom”: “-=45px”}, “slow”);
$(this).animate({“marginBottom”: “-=45px”}, “slow”).animate({“marginBottom”: “+=5px”}, “fast”);
$(‘#fotplug’).hide(‘slow’);
});
#content {
background-color:#FDFDFD;
border-left:2px solid #333333;
border-right:2px solid #333333;
margin:0 auto 0;
padding:10px;
position:relative;
width:930px;
height:100%;
}
$(function(){
$(‘#contact’).contactable({
subject: ‘A Feeback Message’
});
});
« Reply
June 22nd, 2010
Hey,
I’m trying to the form to work on my site, I changed it to sit on the page and not slide in, but when I try to submit a message online, it will not send, it just keeps spinning the loader image around and around. I have looked under firebug, and it says it’s OK, please have a look and see. I’m sure it’s something simple I have wrong I just can’t find it. Any ideas from anybody?
« Reply
philipbeel Reply:
June 22nd, 2010 at 2:49 pm
@Frank, The plugin is wrapped into the slider, so thats probably where its falling over. You might be better starting over using something like http://bassistance.de/jquery-plugins/jquery-plugin-validation/ with an ajax tie in, like I have done on my contact page http://theodin.co.uk/contact (check the code in firebug)
« Reply
Frank Reply:
June 23rd, 2010 at 2:50 am
@philipbeel, Thanks, I’ll give it a try. Bye.
« Reply
July 9th, 2010
I need one more field (phone), is there possible?
Thanks anyway for this plugin, very useful!
« Reply
philipbeel Reply:
July 9th, 2010 at 2:20 pm
@Edmundo Junior, yes this should be possible, you will need to change a couple of parts of the plugin to do this:
- add the extra input field where the form in drawnin the plugin
- add an extra validation rule to the ID of the form field (if this field is mandatory)
- add the $(‘#ID’).val() into the ajax request in in the submithandler function to pass it into the mail.php page
- finally ammend the mail.php file to pull out your new $_REQUEST[] data and put this into the mail function.
I hope this helps you out!
« Reply
Edmundo Junior Reply:
July 12th, 2010 at 6:45 pm
@philipbeel, Thanks man! Help me a lot, lucky I was doing exactly that!
« Reply
July 9th, 2010
Great tutorial, but ‘ I’m pulling my hair out, i keep getting error message: Sorry but your message could not be sent, try again later..I know I am doing something stupid but can’t figure out what, help!
« Reply
John Reply:
July 9th, 2010 at 4:39 pm
@John, it’s okay, i was having a brain dead moment, sorted now. Thanks for this lovely piece of work, kudos!
« Reply
philipbeel Reply:
July 9th, 2010 at 4:41 pm
@John, Hi John, do you have a link to the page you are trying to get the plugin to work on? If are using firefox, try using firebug to check what the ajax request is sending. Are you using a Linux server? Are you sure the mail.php is on the right level of the directory? Let me know how you get on.
« Reply
John Reply:
July 10th, 2010 at 11:10 am
@philipbeel, thanks philip, as i said, i was just having a blonde moment, i think i have it sorted now. Just looking now at making it more secure. I wanted to say thanks a million, i’m new to this type of work and i found your tutorial very useful so thanks for taking the time to helps us beginners out
« Reply
July 11th, 2010
Hi, can i use this in my commercial projects & can i distribute this (credit is already there’s in your source) so plz tell me, thanks
« Reply
philipbeel Reply:
July 12th, 2010 at 8:54 am
@prathap, Yes, as long as the commercial project has no miscellaneous purposes thats fine!
« Reply
July 12th, 2010
Don’t work anymore, you know why?
The message apears to be send, I receive the sucess callback but don’t go to my e-mail, and I tried different accounts :/
Help me please!
« Reply
July 12th, 2010
http://www.andersonprockt.com.br/faleconosco.html
Here is the form that don’t send the e-mails, please help me if you can :/
« Reply
philipbeel Reply:
July 13th, 2010 at 9:46 am
@Edmundo Junior, Ok I checked out the site (which looks great) and the request is all firing off correctly, so iy might be your PHP install on the server. Something to try is the in the mail() funciton is add an argument on the end like mail(‘your@address.co.uk’, $subject, $contactMessage, ‘From: your@address.co.uk‘); to see if this fixes it!
« Reply
Edmundo Junior Reply:
July 14th, 2010 at 3:01 pm
@philipbeel, MAN! IT WORKS! THANK YOU!
I’m pounding headache since yesterday all day and had failed to resolve.
I just add the ‘From’ in the end and works perfectly
Great plugin! I use this in various websites
« Reply
Edmundo Junior Reply:
July 14th, 2010 at 3:24 pm
@philipbeel, Sorry bother you again man, but I have a doubt:
There’s someway to add in the From the $emailAddr? I try but nothing work, and I don’t know almost nothing PHP.
My tries:
mail(‘your@address.co.uk’, $subject, $contactMessage, ‘From: $emailAddr’);
mail(‘your@address.co.uk’, $subject, $contactMessage, ‘From: email’);
Suggestions?
Ps.: sorry for my bad english
« Reply
philipbeel Reply:
July 14th, 2010 at 4:45 pm
@Edmundo Junior, To my knowledge this is not possible as the server is actually sending the email, so the from sender will be the server address. If you want to bypass this you might be able to do so with a mailer SMTP class or something like that.
July 15th, 2010
i have these: Uncaught TypeError: Object # has no method ‘contactable’
can anybody help me?
« Reply
July 15th, 2010
Very weird thing on my site.
The message gets sent, but still I get a “Sorry but your message could not be sent, try again later” ….
this line looks good nonetheless :
if( data == ‘success’) {
$(‘#callback’).show().append(defaults.recievedMsg);
« Reply
July 16th, 2010
The plugin is really amazing, but I still have one problem. The plugin has styles applied to all elements like:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
I have my own styles on pages which I don’t want to be overwritten. Is there any way to workaround this problem?
Thanks in advance.
« Reply
July 19th, 2010
I have this form in my site but when I try to send the message it came up with ‘Sorry but your message could not be sent, try again later’ then I went to open jquery.contactable.js file then changed $.post(‘mail.php’ to$.post(‘../mail.php’ as I had the mail.php file on the root and javascript file in js folder. But now I have an issue where the loading image shows up but it stops from here and nothing gets sent. I am pulling my hair out now. Somebody please help!!!
« Reply
philipbeel Reply:
July 19th, 2010 at 12:23 pm
@Jae Choi, You should ideally put the mail.php in the top level of your directory structure. The plugin assumes you are running PHP on your server. Do you have firebug on? if so open up the console, when you hit send check that the ajax call executes successfully, this will also give you the path that the mail.php file is being called from. It may be that you are calling the path incorrectly and that is why you are getting the message back.
« Reply
July 20th, 2010
@philipbeel, loading image shows up and it just remains there. It does not send any emails… Any ideas?
« Reply
philipbeel Reply:
July 20th, 2010 at 5:10 pm
@Jae Choi, try changing the mail() call with an extra param on the end like so mail(‘your@address.co.uk’, $subject, $contactMessage, ‘From: email’);
« Reply
Jae Choi Reply:
July 21st, 2010 at 3:56 am
@philipbeel, it’s strangly not working still. Please have a look at my site http://www.favstay.com/Joomla/
Please let me know if you can find any issues.
Thank you!
« Reply
philipbeel Reply:
July 21st, 2010 at 8:56 am
@Jae Choi, It’s as I thought your mail.php is not being sourced correctly: http://www.favstay.com/Joomla/mail.php returns a 404 errror. you can change where the $.post() submits to in the plugin itself.
Jae Choi Reply:
July 22nd, 2010 at 2:44 am
@philipbeel, I have hardcoded the mail address to check if mail() function is working but now I am getting this error. What can I do to resolve this issue? Warning: mail() [function.mail]: Failed to connect to mailserver at “localhost” port 25, verify your “SMTP” and “smtp_port” setting in php.ini or use ini_set() in…
Thank you very much for your help!
philipbeel Reply:
July 22nd, 2010 at 9:09 am
@Jae Choi, You will need to check your php.ini file to make sure it is configured for you to use mail() You will need to speak to your host about this.
July 30th, 2010
Nice, but not everyone uses PHP, so the target URL should be an option (defaulted to mail.php) instead of hardcoded, so that people can build another mail script in whatever serverside language…
« Reply
philipbeel Reply:
July 30th, 2010 at 11:58 am
@Marcus Tucker, Good suggestion. I am going to move the code over to GitHub soon so if people have suggestions etc for improving the code they can get involved with it.
« Reply