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).
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.
Download Contact-Pop jQuery Plugin
Jon Raasch is a UX nerd and free-lance web designer / developer who loves jQuery, Javascript & CSS.
I have done everything to the T but i still get this error, can you please assist?
Contact Us
getFormHtml(); ?>
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
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!!!
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
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
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.
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/
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
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
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
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,
Works perfectly, had it working in minutes. Thanks!!!
nice. been looking for a contact form plugin tutorial for quiet a while
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!
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.
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.
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!
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?
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
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?
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!
@Jesse C – You can add a BCC by modifying the call to PHP’s
mail()withinfunction 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
replaceHrefoption with your the href to your contact page, or put a jQuery selector inopenButtonSelector.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.
Thanks for putting this out for us to use! Very clean and easy to customize.
@BJ – Thanks for catching that, it’s fixed now.
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?
Never Mind! Got it working..Awesome! I just added the header to that specific page, and it looks good now! Thanks!
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'] . ‘ ‘);
}
}
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']);
Just wanted to say thanks for this. It works great and was very easy to implement.
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!