Thickbox is a nice UI dialog widget written for the jQuery library which allows for the previewing of images and content via AJAX in a modal window.
In this tutorial we shall use the script to create a contact form for Textpattern that opens in a modal window.
- Download and install the zem_contact_reborn plugin and activate.
- Download and install Thickbox in your Textpattern site
Create two new pages
First we need to create two new pages. In this example we’ll use contact_form and ajax.
Create two sections
Next we need to create two new sections – use the same names as in the previous step, and assign the contact_form and ajax pages to the relevant sections.
Enter the code into your new pages
<html>
<head>
<script type="text/javascript">
// <![CDATA[
var zcr = {
ajax: {
options : function(form,url) {
return {
target: '#contactform',
url: url,
success: function(msg) {
var newForm = $("#" + form.attr("id"));
var options = zcr.ajax.options(newForm,url);
newForm.ajaxForm(options);
},
beforeSubmit: function() {
form.find('input#zemSubmit').toggle()
form.find('input#zemSubmit').parent().append('<img class="loadingImg" src="<txp:site_url />images/loadingAnimation.gif" alt="waiting" />');
} // end beforeSubmit
};
} //end options
} //end ajax
};
$(document).ready(function() {
$('form.zemContactForm').each(function() {
var options = zcr.ajax.options($(this), '/ajax');
$(this).ajaxForm(options);
}); //end each
}); //end document.ready
// ]]>
</script>
</head>
<body>
<div id="contactwrap">
<txp:zem_contact form="contact-form" to="enter-an-email-address-here" label="" copysender="0" subject='Message from the <txp:site_name /> website' show_error="1" thanks_form="contact-thanks" />
</div>
</body>
</html>
The above code should be placed in both of your new pages – contact_form and ajax.
Build the contact form
Now you need to create a contact form. Note from the code above that zem_contact is calling a form called contact-form. Use this name for your form and enter the zem_contact tags as required (see the zem_contact_reborn plugin help for more information on the tags you can use for your contact form).
Note: When building your contact form, be sure to wrap the form with the following: <div id="contact-form"></div>
Add a nice AJAX image loading animator
You will need a loading animation in your images folder – in the code above it’s called loadingAnimation.gif. You can make your own here.
Tom,
Great tip, very many thanks for putting it up.
Joe
This is a good tip and funnily enough something I looked into for using on our own site last week. Although this works well and provides some nice functionality for sighted, able-bodied users, there are some accessibility concerns regarding this type of implementation.
We’ve used thickbox to enlarge images on our site so I’m not anti-lightbox at all but would be wary using (particularly ajax-driven) a modal window for such critical feature as the contact form.
Perhaps providing a standard contact page in addition to the modal window is a solution?
Any chance of posting a demo up of how this all looks?