Contact-Pop: Contact Form Overlays with a Simple jQuery Plugin

Contact Pop jQuery Plugin Note: This website does not use Contact-Pop, please don’t test its contact form, Contact-Pop Demo

Contact-Pop is a jQuery plugin that makes contact forms with grayed out overlays incredibly easy. The basic script grabs any links that point to your contact page and flags them for the Contact-Pop popup. When these links are clicked, Contact-Pop grays out the page and pulls in the contact form using AJAX. That means that with just a few lines of code, you can convert your site to use Contact-Pop’s form and overlay rather than your current contact page.

While there are a lot of options for producing grayed out overlays in jQuery, Contact-Pop provides a more robust and specialized solution for in-page contact forms. The main advantage is ease of use: simply flag any links to your current contact page by href or jQuery selector, and Contact-Pop does the rest. Combining this simplicity with a plethora of customizable options, Contact-Pop is a useful plugin for newbies and seasoned developers alike.

Additionally, Contact-Pop has the benefit of being totally unobtrusive. Since the plugin replaces the normal contact links on your page, even if a user doesn’t have Javascript enabled they will at least be routed to the normal contact page.

Finally, although Contact-Pop leverages a PHP file, this is just to make it easy to plug into your website. If you want, you can easily write a custom PHP, ASP or any other backend page to display and process the form as leveraged by Contact-Pop’s AJAX (see below).

Contact-Pop Demo

Download Contact-Pop jQuery Plugin

How to use the Contact-Pop Plugin

Basic use of Contact-Pop couldn’t be easier. First upload the Contact-Pop directory to your web server, preferably at the root of your site. Next, make sure to include the contact-pop.js and contact-pop.css files, as well as the jQuery library:

<script type="text/javascript" src="/Contact-Pop/js/jquery-1.3.2.min.js">
</script>
<script type="text/javascript" 
src="/Contact-Pop/js/contact-pop.js"></script>

<link rel="stylesheet" type="text/css" 
href="/Contact-Pop/css/contact-pop.css" />

The paths above should work if you’ve uploaded Contact-Pop to your site’s root, otherwise be sure to modify them as needed.

Next we will need to flag our contact links. Open up contact-pop.js and look for the config section. When modifying this section be careful to keep any trailing commas after the variable definitions, or the script will throw JS errors.

First change the replaceHref variable to the path to your contact page. Please note that this pulls in the href attribute from your various <a> tags, so ‘contact.php’, ‘/contact.php’ and ‘../contact.php’ are all different even if they point to the same page.

Next open up contact-pop.php and head to the config section. Make sure to change the $siteEmail variable, since this is where the results of the form will get sent (when a message is posted, it will be emailed to you).

var $siteEmail = 'email@youremail.com';

And that’s it, you’re all set to go!

Download Contact-Pop jQuery Plugin

Unobtrusiveness and Best Practices with Contact-Pop

By replacing links to your static contact page, Contact-Pop ensures that even users without Javascript enabled can access the form. But we can take this a step further—let’s use the same backend script for the AJAX Contact-Pop form as well as the static contact page. That way the same process runs with the popup and the normal links.

First replace your current contact page with contact-pop.php by renaming and moving contact-pop.php accordingly. (If you don’t have a contact page, name it whatever you want).

Next open up contact-pop.js and find this part of the config section:

formPhpLocation : '/Contact-Pop/contact-pop.php', 
// relative path to the backend contact form

Modify this according to the location of your contact page, which should be a relative path from the browser’s perspective. Just to double-check, the formPhpLocation should match the replaceHref in most cases (remember that our goal is to use the same page for the AJAX and static form).

Finally, you should use your site’s frame on the static contact page. Open up the newly renamed contact-pop.php file, and look to the bottom for a large block of HTML. Modifying this should be pretty straightforward.

Now regardless of how users reach your contact form, the same backend script will be used to both serve and process the form.

Download Contact-Pop jQuery Plugin

Customizing Contact-Pop

Although its basic setup is simple, Contact-Pop is also extremely customizable. Mainly, the easy-to-modify config section of contact-pop.js controls many of the plugins options.

First you can adjust the fade speed using overlayFadeIn and overlayFadeOut. If these fade speed controls aren’t enough, you can even incorporate the jQuery easing plugin by simply passing whichever easing string you want to use in overlayEasing (and including the plugin Javascript).

Additionally, the text and color of the popup header can be modified using the contactHeadline and headerBgColor variables.

Contact-Pop’s config section also provides a number of options for the selectors it uses. First, if you want to use the popup for more than one href, you can pass an array of hrefs in replaceHref, for instance:

replaceHref : array('/contact.php', '/Contact'),

Alternately, you can flag links for the Contact-Pop overlay using a jQuery selector; simply pass whichever selector string you want to use into openButtonSelector. If you want to only use the jQuery selector and not replace any links based on their href value, just set replaceHref to null or an empty string.

Additionally you can flag a custom close button using closeButtonSelector. By default Contact-Pop appends its own close button so in most cases you can leave this alone.

Finally the Javascript file allows you to control a few other options. For instance, by default Contact-Pop preserves any changes made to the contact form when it is closed and reopened. To cause it to reset the form each time, set resetFormEachTime to 1.

Additionally, Contact-Pop doesn’t fade the overlay in IE7 because of a bug with IE7′s implementation of png-24s. This bug causes the overlay’s translucent gray png-24 to flash black before fading out. However, if you want to use a totally opaque image for your overlay image, set fadeOverlayIE to 1.

Besides the contact-pop.js config section, you can modify any other styling options through contact-pop.css, which should be fairly straightforward if you know CSS.

Finally, there are a few options provided in the contact-pop.php file. You can change the title of the emails that the form sends, as well as the text of the server response when the form is processed.

Download Contact-Pop jQuery Plugin

Writing a Custom Backend Script for the Contact-Pop Form

Although Contact-Pop comes with a pre-built PHP script for displaying and processing the form, it can work with just about any backend script (PHP, ASP, Java, etc). Furthermore, it doesn’t even have to use a contact form: Contact-Pop can use any script with a form and a response.

To make writing a custom script easier, let’s learn a bit about how Contact-Pop works. First the plugin’s AJAX hits the page flagged in formPhpLocation, and passes a GET variable of ‘ajaxForm’ so as to differentiate itself from a normal page visit. Then it pulls the outputted HTML into the overlay form. When this is processed, it hits the same page using the POST method, again flagging the ‘ajaxForm’ variable (this time with the POST method). The result of this request is then inserted into the overlay form area.

So in your custom script, the first step should look for the ‘ajaxForm’ GET variable. Then in the second step, flag one of the POST values from the form output in step one. If the form is processed successfully, output a ‘thank you’ message, otherwise output the form again (and error message).

And that’s all there is to it.

Contact-Pop Demo

Download Contact-Pop jQuery Plugin



Jon Raasch

Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.




You Might Also Like:


98 Comments to “Contact-Pop: Contact Form Overlays with a Simple jQuery Plugin” RSS 2.0

  1. Christo says:

    I have done everything to the T but i still get this error, can you please assist?

    Contact Us
    getFormHtml(); ?>

  2. Also having problems getting this to work. Any suggestions?

    Here is the page I’m attempting to link off of
    http://getrelationshiphelp.com/resources_links.html

  3. I have tried everything and it still takes me to the submit form in a different page instead of overlaying.. I am more of a designer so instructions that would help someone who doesn’t know php very well would be AWESOME.. please help tho!!!

  4. jay says:

    Hey jon,

    i ‘ve tried the overly form for the above url, but the contact form opens in its on page, no overlay, the overlay would be a good ideal for this site which i’m finishing up, pls get to me..

    thank you

  5. Jon Raasch says:

    Hi all,

    I noticed a couple people had problems with the links routing to a new page rather than overlaying the contact form. In all likelihood the problem lies in the replaceHref variable in contact-pop.js. Make sure you are setting this to the same href as your contact link (as described in more detail above). Other than than that make sure you are including the jQuery library and contact-pop.js files correctly.

    Good luck,
    jr

  6. Hakimo says:

    Hi,

    I have been trying this tutorial but it still doesn’t work for me. I’ve made sure the paths are set properly but I’m still not getting the overlay over the page. In the tutorial zip file, is it possible if you were to include an “index.php” file to test it locally?

    Thank you.

  7. Hi. Great work here.

    With IE6 (yeah..)it hangs a little ’till shows up and is VERY slow validating. Any way to work around?

    Thanks

    http://www.cccasa.net/

  8. Ollie Roberts says:

    Also in crappy old IE6 when you open the contact form and scroll down the overlay only covers the screen area that was visible when you opened the pop-up. Does anyone know a fix for this? I have worked with Lightboxes before and have had this problem. Clients often like to scroll down and play around with the screen and are upset if it is not perfect in every browser :(

  9. Jon Raasch says:

    Hi Everyone,

    By popular demand, I included an example file in the contact-pop package, as well as the jQuery library to make it that much easier for everyone.

    New download location is:
    http://dev.jonraasch.com/contact-pop/download

    Best,
    Jon

  10. Jesse C. says:

    Jon:

    What a fabulous script — thanks for posting it. Any chance that you could point me in the direction of how to add a BCC to the email that gets sent?

    Cheers

  11. Babar says:

    Hi Guys,

    I have just downloaded this plug-in and its just too good.
    Actually i want to to put pop-layer ” OnLoad ” event im very new newbi with jquery i don’t know how to do this. If someone can help me out on this it will really appreciated

    A Million of thanks in advance
    Babar,

  12. Crystal says:

    Works perfectly, had it working in minutes. Thanks!!!

  13. leo says:

    nice. been looking for a contact form plugin tutorial for quiet a while :)

  14. Daniel says:

    Thanks for your fantastic script. I was able to adapt your form to my site, even styling it to my liking. Do you have a way of adding a checkbox (like an opt-in box) and getting the input written on to the email as well? I’ve tried various ways of doing it but I come out blank. Thanks!

  15. jim says:

    Is there a method to pass variables? For example, the form might go to 1 of 3 people. So I would pass jon when the form submission goes to jon and gregg when it the submission should go to gregg.

  16. andu says:

    I got this contact-pop working nicely. Is there a way to pass to the script which link triggered the pop-up in order to customize the form for 2 different links?
    Thanks.

  17. DavidM says:

    This is a beautiful which works like a dream. Thank you for sharing it!

    The one problem I had was down to the fact that the article carries an out-of-date path, belonging to an older version:

    Should be:

    Thanks again!

  18. DavidM says:

    Don’t forget that the library in the latest download has a different name from the one in the article. It is now jquery-1.3.2.min.js

    Unfortunately for me, it seems to have stopped working. The box pops up, but just sits there spinning ad infinitum. What could be wrong?

  19. Ben says:

    Nice one great plugin thanks.

    One thing, do you know if it’s possible to have different links to show a different pop up or maybe even set a different value for say a subject field.

    For example I want a link for a normal contact but also on the same page there is a quote link which will either show the same pop up but with a subject filed with the value quote automatically set or just pulling in a different contact form where i can manually set the quote value.

    Many thanks again for this great article and plugin.

    Ben

  20. Giorgos says:

    Hello,

    I’m having trouble with using language other than English.
    I’d like to use Greek encoding “ISO-8859-7″.
    I have added the encoding in the style sheets and both pages, html and php, but still doesn’t recognize the characters.

    Any ideas?

  21. Brandon says:

    I am having a problem with this script when you visit the page. If you click anywhere on the page, the script is called and the box comes up as it should. How to I make this stop and only have the contact box appear after a link has been clicked? I imagine I need to put something in the openButtonSelector (which is currently empty) in the contact-pop.js file. What would I put there? I also have nothing for the replaceHref value but I believe that is alright.
    Thanks in advance!

  22. Jon Raasch says:

    @Jesse C – You can add a BCC by modifying the call to PHP’s mail() within function sendMail() in contact-pop.php. See here for syntax info

    @Daniel & @Jim – You can edit the form for whatever you need within contact-pop.php. Either use your own custom contact form PHP, or modify what’s in the example file.

    @DavidM – Make sure that wherever you’re running it can run PHP. If the spinner stalls out, it means it is unable to draw the contact form with AJAX.

    @Brandon – You either need to fill the replaceHref option with your the href to your contact page, or put a jQuery selector in openButtonSelector.

  23. BJ says:

    Ok, me again..

    No i’m not stalking your site,
    But there is a mistake in this website by the copy-past part.

    On top, you say to copy past those lines:

    But there is NO file called jquery.js

    And that file is called jquery-1.3.2.min.js

    Correct me if i’m wrong.

  24. Byron N says:

    Thanks for putting this out for us to use! Very clean and easy to customize.

  25. Jon Raasch says:

    @BJ – Thanks for catching that, it’s fixed now.

  26. chris says:

    Actually looks like I’m having a conflict maybe with the other jquery i’m using on the front page in the form of a jquery featured slider. Anyone know how to use the jquery in this fashion?

  27. chris says:

    Never Mind! Got it working..Awesome! I just added the header to that specific page, and it looks good now! Thanks!

  28. chris says:

    Sorry for all the posts: I’m trying to add one more field to the form, and it’s not capturing for some reason. Maybe you can help?

    What i changed i listed here: (added $postedMba)
    function getFormHtml($ajax = 0) {

    $postedMba = $_POST['mba'];

    Added this to the form:

    MBA Program/School of Interest?

    But how do i send this (i know it’s in this function but i can’t figure it out)

    function sendFormEmail() {
    $message = “Name: ” . stripslashes($_POST['name']) .
    “\nEmail: ” . $_POST['email'] .
    “\n\nMessage: ” . stripslashes($_POST['message']) .
    “n\n\nMba: ” . stripslashes($_POST['mba']);

    if ( $_POST['ajaxForm'] ) $message .= “\n\nFrom a Contact-Pop Form on page: ” . $_SERVER["HTTP_REFERER"];
    else $message .= “\n\nReferrer: ” . $_POST['httpReferer'];

    $message .= “\n\nBrowser Info: ” . $_SERVER["HTTP_USER_AGENT"] .
    “\nIP: ” . $_SERVER["REMOTE_ADDR"] .
    “\n\nDate: ” . date(“Y-m-d h:i:s”);

    mail($this->siteEmail, $this->emailTitle, $message, ‘From: ‘ . $_POST['name'] . ‘ ‘);
    }
    }

  29. chris says:

    Got it to work..forget it again..lol…changed this here for anyone that needs help: ( i added the last line)

    $message = “Name: ” . stripslashes($_POST['name']) .
    “\nEmail: ” . $_POST['email'] .
    “\n\nMessage: ” . stripslashes($_POST['message']) .
    “\n\n\nMba: ” . stripslashes($_POST['mba']);

  30. Laura says:

    Just wanted to say thanks for this. It works great and was very easy to implement.

  31. chris says:

    Still really loving this. Yet, i am still having major issues in IE6, with the form really dragging. See it in action here at the bottom of the page:

    http://mba365.com/mba365-admissions-consulting/

    Any help would be greatly appreciated. Thanks!

  32. Corinne says:

    Hey! You did a really great job with this. I’ve been looking for something to use on my schools website for months, but conflicts kept arising, until I found this. Thanks!

    I do have one question though. I have limited php knowledge and although I was able to work the php to my own purposes, I can’t seem to get the radio buttons on my contact form to work; the email just keeps supplying th value of the last radio button no matter which one I click. Do you know how I could get it to work? I thought it was a php issue, but it could be java script for all I know. I know the js isn’t set up to get the radio values.

    Anyway, if you could help that would be great, if not no worries. I have a few other people I can ask.

    You did a great job, and thanks again!

  33. jimijon says:

    Is it possible for you to eliminate $ in the javascript files? I need this to work with prototype and I can’t seem to get jquery and prototype working together.

    thanks you

  34. jimijon says:

    Ok I fixed the above by replacing the $ myself.

  35. Corinne says:

    Nevermind :) I figured out how to do what I wanted using a dropbox. Thanks for the great script

  36. Niitn says:

    Hi Jon Raasch,

    Thank you so much for your guidence and support. It really helped me a lot. You are best !!

    Nitin

  37. Emmelie says:

    Hi,

    I’m new to jquery, and I can’t seem to get this contact form working. The problem lies in replaceHref. I want the contact form to be opened when pressing “contact me”

    Contact me

    What shall I write instead of “#”. And how do I link the jquery contact form to “contact me”. Also, I see no file called jquery-1.3.2.min.js

    thank you

  38. SergioR says:

    Hi,

    Im trying to use this overlay dialog to load a form, but the content of the form depends on which link was clicked.
    I have tried to use get parameters on the “href” attribute, of “opener” links ,that have to open the contact-pop, but it doesnt work. There is a way to pass parameters to the contact-form from the open page?

    Thanks in advance, you are dong a great job!!! ;D

  39. SergioR says:

    Hi again! ;D

    I just achieve a solution, using a global javascript variable! its not the best solution but it works hehehe).

    1.- I create a global var on javascript:
    var parameter;

    2.- then I use jquery to update the value of this variable with the specific parameters I want to use in the contact-pop:
    $(“.my_class”).click(function() {
    parameter = $(this).attr(‘href’);
    });

    3.- finally, I have update the “contact-pop.js” to use this global js var in the object construction:
    – line 73:

    jQuery.get( ContactPop.formPhpLocation, { ‘ajaxForm’ : 1, ‘params’: href_clickada }, function

    If there is another way to do this, closer to the jquery and contact-pop implementations, please I want to know it, send me and email ;D

    But, if there is no other way to do it, I hope this solution could help other people with similar problems! :D DDD

    See you soon!!!

  40. BladedThoth says:

    Hey, quick Q: I’d like to use this, but is it possible to have the form information based on the link clicked, or content of the link? It would be great if I could have it email the page they were on, on the site, as well as what specific link brought up the contact form as well.

    Thanks!

  41. Morgan says:

    Hello Jon,

    I sent you an email about this, but just to maximize the chance that you’ll see this, I’m reposting here.

    I would like to modify the functionality of the contact form so that when I:

    1. pop up the form
    2. fill in the forms
    3. press send
    4. get the thank you message
    5. close the pop-up
    then
    6. reopen the popup

    I get the original forms and I can send a new message. The default behavior is that when I pop the form up a second time, I still get the “thank you” message.

    I’ve been messing around trying to unset(httpRefferer). It appears that unsetting this variable after the “thank you” message is returned should give me the desired behavior, but it has no effect. Could it be that the PHP function getFormHTML is called only once?

  42. Morgan says:

    Hah! Of course after four hours of tracing the code I come across resetFormEachTime in the contact-pop.js config!

  43. Karan says:

    Worked perfect. Thanks mate….. love your website and great stuff here.

  44. I got the form to pop-up with the input boxes but it displays alot of the php code.. How can i fix this?

    I have tried to start with a fresh copy of the file but it continues to do it

  45. excelent

  46. Jot The Brave says:

    Hi J,

    Here’s my humble 2 cents worth:

    1. With the With IE6 hang thing: I just renamed the IE6 overlay file in the CSS so it just ignores the file, thus the page loads faster. But you knew that anyway.

    2. Couldn’t get it to work in Opera 8.54 so I off to get the latest version and test it in that. If that doesn’t work, I’ll leave it up to the disconcerted.

  47. Rob says:

    I just bought you a yogurt! No more beer for you! No more coffee either! You have had enough!

  48. Beth says:

    I want this to “POP” onload, how can I accomplish that? I really do not want people to LOOK for the link, but get the box served, for in house contact info or new current events on the site!.

  49. Dencio says:

    hi Jon,

    How can I put value into textbox inside overlay when via $_GET statement?..

    thanks

  50. drozdak says:

    Anybody know how to make it send the form encoded as UTF-8?

  51. Niels says:

    Hi, Nice plugin!
    On my homepage i use a flash file (directly through html object) wich doesn’t get darkend by the overlay. is there a workaround? Would be nice to have this on my pages!

  52. Davey says:

    Awesome, this baby is sleeeeeeeeeek! Great tutorial.

  53. Sonia says:

    Hello developer + all,

    Maybe the following it’s a silly question, but I have spent so many hours and I cannot find a solution.

    I want to use this pop-up form, to a self-hosted wordpress website BUT not in a page, but at the sidebar. Is it possible? And if yes, can please someone tell me the way?

    Wishing you all, a very Happy Fresh new year 2011.

  54. Matko says:

    Hello,

    I’m having trouble with using language other than English.
    The script does not work with encoding “UTF-8″.
    Can you help me

  55. kin says:

    hi,
    I used this contact form already for two different web pages and everything went OK. But now…I got the message:

    Fatal error: Call to undefined function checkdnsrr() in D:\Hosting\4397768\html\amest\contact-pop.php on line 88

    I have no idea? everything are same and work with another pages.

    Can you help me , please?

  56. mike says:

    hey i love the script it works great! does anybody have a suggestion on how to add a captcha field?

  57. Stacy says:

    Is there a plug-in on wordpress that can be easily installed without going through all of these steps? Did a search for the contact-pop and couldn’t find it in the library. Would LOVE to use!!

  58. hey its awesome work.
    Thanks for you support

  59. Suzy says:

    Hi Jon,

    Thank you for sharing this great script. I have got the overlay form working without a problem. I would like to use the unobtrusive function to load the contact-pop.php as a separate Contact page if javascript is disabled. Although the separate page loads fine, the form fields are not displayed. The only content written to the page is:

    getFormHtml(); ?>

    Could you please explain in more detail how to implement this function or tell me if there may be an error in the php code line:
    getFormHtml(); ?>

    Thanks for your help.

  60. uday says:

    IS there a way out where we can call this on window.onload() ??

    Many thanks

  61. Scott says:

    Hey, I’m having a slight but of trouble with the script, its displaying everything as it should, but when i select submit the email isn’t getting sent, has anyone else had this problem?

  62. noi says:

    Hey. . Thank you for this great work, it all works perfect..

    But i want to add a check box to the form and i have problems that the email text shows if the checkbox was checked or not.
    Can you help??
    I dont know what to wirte in the contact-pop.php
    What i have now:

    function sendFormEmail() {
    $message = “Name: ” . stripslashes($_POST['name']) .
    “\nEmail: ” . $_POST['email'] .
    “\nPhone: ” . $_POST['phone'] .
    “\nNewsletter: ”
    . if(isset($_POST['newsletter'])) $email .= $_POST['newsletter'].

    “\n\nMessage: ” . stripslashes($_POST['message']);

    I have problems with the . if(isset($_POST['newsletter'])) $email .= $_POST['newsletter'].
    how can i make it, that the email shows if the newsletter checkbox was checked or not??

    Thank you a lot!!!

    noi

  63. Mike says:

    Hi,

    I’ve just tested the contact form and it displays fine on both IE and Firefox.
    The problem now is that it doesn’t send the email when I submit the form in IE (I tried to send the form in Firefox and I received the email, so Firefox works fine).
    Any ideas why this could happen?
    Do I need to change something in the contact-pop.js?

    Thanks

  64. Mike says:

    Nevermind, I’ve just found out what was the problem.
    I was already including jquery-1.4.4.min.js where I noticed that i=/(msie).
    So I just replaced “msie” with “i” in contact-pop.js and it’s working perfectly now!
    The form is brilliant, good job!

  65. Matt says:

    This appears to be a great little overlay contact form. Being solely a PHP developer however I’ve been wrestling with this in order to get it to accept a $_GET variable in order to populate a field in the form.
    Now I notice that the REQUEST_URI is being “hijacked”, for lack of a better term on my part, and just redirected off to wherever formPhpLocation points to whilst adding “ajaxForm=1″ to the QUERY_STRING.
    Not having much of a clue as to how jQuery works at the moment, is it at all an easy alteration to get your Contact-Pop to accept and retain the value of, in my case, a single $_GET variable?
    My thanks for any and all assistance.

  66. Martin says:

    Hi,

    How can I pass a variable to change the destination email? Exemple, /contact/22324

    I would grab the id in the contact.php

  67. Berni says:

    Hey there Jon.

    I’m currently using your plugin on a site which is already using jquery to do some other stuff, thing is, the “other stuff” is using jquery 1.5.1, and i can´t seem to get the plugin to work with that version of jquery. I’m kinda new using jquery so any word of advise would be appreciated.

  68. john sheahan says:

    Hi Jon, lovely form. Good work! However when i click the contact button Im getting a white box popping up with nothing in it. I then ned to refresh the page to get rid of it. Any ideas?

    thanks

  69. Almedia says:

    Where is the demo for this effect ?

  70. Bill says:

    Does not work with jquery-1.6.2. You get

    Error: uncaught exception: Syntax error, unrecognized expression: [href=/contact.php]

    Apparently this happens at:

    ContactPop.obj.ctas = jQuery(anchorSelector);

    If you enclose the url in double quotes this error does not occur.

  71. Frank says:

    Pardon my ignorance, but you don’t really say how to link to it once you’ve installed the back end. I’ve got it working, but it does not popup. Only goes to another page. Whats the method for getting it to popup when clicking on a link?

  72. steph says:

    hi, exacly what a contact form should be. very nice, unfortunatly i cannot make it work:

    unclear 2 me is:

    1>where do i “cut’ and “paste” 2 ?
    1.1> and if it doesn’t work you say “modify them as needed”; “how?what is them?
    (it is 1 link-or you mean something else?)

    i’ve placed the folder in my site root, and left everything else in place, so it should work,really :-)
    thanks

  73. martijn says:

    hi there,

    i want to use the form in combination with an image map, but that does not work . When i place a normal link to /contact.php, everything works fine, when place the url in an imagemap, there will appear a message “The requested document was not found on this server. ”

    This is the code i use :

    Test

    Has anyone an idea ?

    Regards,

    Martijn

  74. TIm H says:

    Popup comes up with the form but shows alot code along with it?….does anyone have any idea why it does this?

  75. Rick says:

    Anyone know how to change the “Contact Us’ to something different in the header on the pop up? Everywhere I can find what I think it is and change it, it still says “Contact Us”

  76. Brandon says:

    Hi Jon,

    Just playing around with the plugin. I am having issue with the plugin not sending mail. Everything works correctly as far as, page loading, overlay with the form, and submitting. It even gives the thank you message.

    What would you suggest to get the email to send?

    Thanks!!

  77. Christy says:

    I edited the php script to allow for multiple pop-ups each going to a separate email address. Contact me if you want it.

  78. Robert says:

    Does anyone else get an errour about File does not exist /undefined even when running the demo as-is ? (its only in the apache logs, nowhere else).

    Also is it possible to get this to work with latest jsquery.min.js ? like the one google hosts:
    ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js

  79. Niels says:

    Hi Jon,

    like Brandon, it all works but it sends no email…

    What would you suggest to get the email to send?

    Thanks!!

  80. Mujeeb says:

    Hi

    It working jqury 1.3.xxx

    http://www.arabweebly.com/namak/ this work

    And Do not work using jqury 1.6 and 1.7
    http://www.arabweebly.com/namak/index1.html
    http://www.arabweebly.com/namak/index3.html

    Thank you,
    Mujeeb.

  81. pascal says:

    I have done everything like it is explained here, and its great in firefox and chrome.
    but it doesnt work in all versions of IE at all. I have tested 6 7 and 8 and it doesnt even submit the form, it is simply doing nothing at all.

  82. Web Pro Rank says:

    I am looking for some pop up form so i can generate some data from it and get the details from it so use it in real time.

  83. Ole says:

    I read all this blog posts regarding this contact pop-up, however, in my case nothing really worked as it stated. The form pops up as a bank with no fields, no-button object and overlay. It has a header “Contact Us” and close [X] mark, which does not respond to mouse over (so impossible to close).
    First I uploaded (with Dreamveawer) my version (modified) of this Contact-Pop – this did not work. Then, I tried an original “Contact-Pop” folder (from zipped file) with example.html in. Example.html also does not produce any expected form fields. Check this out:
    http://www.eyeqphoto.net/Contact-Pop2/example.html
    or
    http://www.eyeqphoto.net/test/Contact-Pop/
    (example.html renamed index.html)

    Does anyone have any idea what’s wrong?

  84. joe says:

    Hi Jon, Great script! I have been trying to get this to work for multiple links on the same page that will send to different emails.

    Ex. link 1. – xxxx@yahoo.com
    link 2. – xxxxx@gmail.com

    Is this possible with this script? Thanks in advance!

  85. Jen says:

    Hi Jon,

    I’ve got the script working and it’s beautiful, however, I am having trouble with one thing and I’m hoping you can help me out with it. My current form submits the data to a secondary execute page because I also use CURL to submit the form data into SalesForce. It appears I am not able to add those commands to the class, it just causes it to time out. My SalesForce CURL request also specifies a redirect to a thank you page once the data is submitted, I can live without that piece but how can I include my CURL request in this process? I’m working to implement your script because my current JS popup results in a NULL Object not found error in IE7 and IE8.

    Thanks in advance,
    Jen

  86. Jasmondo says:

    Great piece of code, I styled it just how I wanted it ;) ) However, it doesn’t work with the latest release of jquery 1.7.1

    Is there a simple alteration in the js code to get this working in jQuery 1.7.1?

    Many thanks for all your hard work!

  87. Les says:

    Hi Jon, please forgive but complete newbie however managed to get this working ok. The problem is that I need to have more than one form on the same page. I can see how you do this as per your instructions by using an array for replaceHref. However I need to modify my email subject based on which form was used and I’m stuck not knowing how to test this in contact-pop.php to update the email subject.

    Any help would be appreciated
    Thanks

  88. alam says:

    i have made insert record pop-up using jquery ajax,
    in simple php i was using mysql_escape_string(insert query)
    any equalent here?

  89. Dustin says:

    Is there a way to change the look of the “send message” button? Is it in the php or css?

  90. jean4designs says:

    Jon,

    Do not know if you are still answering questions for this pop up emailer? I am having some trouble using this. I get the pop up but its just a white box with the header green which I changed. Is there something I am missing…..I have gone over all the codes.

    Also I would like this for three email address but I do not want it to send the email to all the address at the same time. They are separate email links.

    If you are still out there any suggestions?

    Jeanne

  91. SF says:

    Hey there.. thanks for the nice resource.

    I got mine to work fine, the path thing is a little quirky when you want to move things around but by trial and error I got it happening.

    Like others in this discussion I noticed that the form only works with the older version of jQuery included in the download. Any plans to upgrade for use with later jQuery releases? (I’m using 1.7.1).

    Thanks again,
    SF

  92. Iñaki says:

    Hi everybody:

    First of all, thank you for this jQuery. It works perfectly.
    I need the pop-up to open automatic when we enter in a section of the web. Does anybody knows how I can make this possible? May I use the event “onLoad” to do this?

    Thank you

  93. Paul says:

    Is this compatible with newer version of jquery?

  94. Sekar says:

    I want to use the same ContactPop to show different html forms (such as forgot password, contact us, upload file etc) depending on the link clicked in a page. That is, I want to change the ‘formPhpLocation’ and ‘replaceHref’ depending on the link clicked. How do I do that?
    Thanks
    Sekar

  95. Drew Wilkens says:

    I received the following error when attempting to execute this pop-up.

    Fatal error: Call to undefined function checkdnsrr() in \Contact-Pop\contact-pop.php on line 88

    Any thoughts are appreciated.

  96. jean4designs says:

    I love the pop up and have worked on this for a long time trying to get it to work. My only problem now is if I click the link to send a message it sends but when click the link again the thank you message appears and I have to refresh the page. I have changed the resetFormEachTime : 1, and function getFormHtml($ajax = 0)…Did I miss something?

  97. Creig says:

    I have been trying to get this script working for 3 days and finally have it working, Although the only problem i have now is that it doesn’t send the info to email? It go to the thank you statement as if it sent, but do not receive any email. Any help with this would be greatly appreciated. Thank who and all for any time and help.

  98. sodhisaab says:

    I work very well for me

    I want to ask: is anyone know how to pass value to contact page.

    Example I am on page http://www.example.com/index?id=10

    I want to pass this value (10) to contact page so that I can show the name of student who has id 10.

    Many thnx…



Leave a Reply



  • HTML permitted
  • Wrap code in <pre><code></code></pre>
  • Escape HTML to display as text