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.
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).
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:
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 = 'firstname.lastname@example.org';
And that’s it, you’re all set to go!
Unobtrusiveness and Best Practices with Contact-Pop
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.
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
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
Additionally, the text and color of the popup header can be modified using the
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.
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.
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.