Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2009-04-24 11:07:23
- mrjysta
- Member
- Registered: 2008-09-22
- Posts: 89
Integrate thickbox with Zem Contact Form using Ajax
Hi guys, I want to launch a simple contact form as a popup using thickbox.
On the thickbox site they say you can request using Ajax http request, GREAT!!!
Im not sure if this will work as my contact form is a static page and so doesn’‘t have a full url. (www.mydomain.com/contact/)
Has anyone done this on their own textpattern sites ???
thanks/
Offline
Re: Integrate thickbox with Zem Contact Form using Ajax
This is a bit complicated – but here it is:
Inside TXP create a page called contact_form and one called ajax
Place the code below in both of them.
<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>So you now have 2 new pages in TXP – one called contact_form and another called ajax
To call the contact form in a thickbox
<a href=”<txp:site_url />contact-form?height=450&width=600” class=“thickbox” title=”“>Contact Us</a>
Now you will have a thickbox contact form that will return any errors or success messages inside the thickbox window.
Update- You also need to create 2 sections for the pages to use. (ie: contact-form and ajax)
- make sure you wrap your form elements with @<div id=“contact-form”></div>
—
Tom
P.S. 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
Last edited by renobird (2009-04-24 16:06:23)
Offline
#3 2009-04-24 14:55:37
- mrjysta
- Member
- Registered: 2008-09-22
- Posts: 89
Re: Integrate thickbox with Zem Contact Form using Ajax
Nice one Tom, error handling aswell !!! Thank you !!!
Offline
Re: Integrate thickbox with Zem Contact Form using Ajax
Let me know if you have any probs getting it to work.
Some of that was off the top of my head – and some was from a script that Matthew Smith and Hakjoon posted a few years back.
I’ll assist if needed.
Good Luck.
—
Tom
Offline
Re: Integrate thickbox with Zem Contact Form using Ajax
Schnazz, Reno, Schnazzz!
Offline
Re: Integrate thickbox with Zem Contact Form using Ajax
Thanks. I’ve got a few other tricks around here as well – I need to get my arse over to TXP tips and get all this stuff up there.
:)
—
T
Last edited by renobird (2009-04-24 15:37:42)
Offline
Re: Integrate thickbox with Zem Contact Form using Ajax
Do you need to create sections that use these new pages?
Piwik Dashboard, Google Analytics Dashboard, Minibar, Article Image Colorpicker, Admin Datepicker, Admin Google Map, Admin Colorpicker
Offline
Re: Integrate thickbox with Zem Contact Form using Ajax
Yep. Forgot to mention that.
:)
—
T
Offline
Re: Integrate thickbox with Zem Contact Form using Ajax
Also – make sure in the form “contact-form” you wrap the entire thing in <div id=“contactform”></div>
You can build the rest of the form any way you like.
—
Tom
Offline
#10 2009-04-24 16:38:20
- mrjysta
- Member
- Registered: 2008-09-22
- Posts: 89
Re: Integrate thickbox with Zem Contact Form using Ajax
Yeah this would make a great TXP Tips tut !!!
Offline
Re: Integrate thickbox with Zem Contact Form using Ajax
Trying to use the method. After submitting the form the page reloads like usually.
Offline
#12 2015-07-19 19:45:31
- gfdesign
- Member
- From: Argentina
- Registered: 2009-04-20
- Posts: 401
Re: Integrate thickbox with Zem Contact Form using Ajax
I also tried to follow these steps but no luck. I’d like see it in a step by step tutorial because I get lost in the middle of the explanation.
I know it is an old post, but anybody was able to achieve it?
Best regards
Fernando
Offline