Textpattern tips, tutorials and code snippets

Integrate Thickbox with a contact form

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.

  1. Download and install the zem_contact_reborn plugin and activate.
  2. 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.

3 Comments Comment feed

  • Joe Hastings
  • 14 June 2009

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?

Add a comment

Use Textile help to style your comments