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.

comments powered by Disqus