<h2>Contact Us</h2>
				<p><b>This demonstrates Form Submission and Server side Validation.</b><br/>Feel free to input anything and submit the form for testing.</p>
<script type="text/javascript">
function validateContact(form) {	
	// make ajax call to validate() function in the Controller	
	var isOK = false;
	var formId = '#' + form.id;
	$.ajax({
		async	: false,
		type	: 'post',
		url		: '/contact-us/validate',
		dataType: 'json', data: $(formId).serialize(),
		success: function (rets) {
			var countRets = TPF.countJSON(rets);
			if (countRets > 0) {
				TPF.setFormError(formId, '', ''); // clear errors
				for (var i = 0; i < countRets; i++) {
					var err = rets[i];
					if (err['field'] == 'recaptcha') {
						$('#recaptchaErr').html(err['msg']);
						Recaptcha.reload();
						continue;
					}
					TPF.setFormError(formId, err['field'], err['msg']);
					if (i == 0) TPF.focusField(formId, err['field']); // focus the first error field
				}
			}
			else {
				isOK = true;
			}
		}
	});
	return isOK;
}
</script>
<form id="cform" name="cform" action="/contact-us" method="post" onsubmit="return validateContact(this)">
	<input name="ftoken" type="hidden" value="{$ftoken}">

<div class="dataForm">
	<span>Name</span>
	<input name="name" type="text" /><span class="fmsg"></span>
	<span>Email</span>
	<input name="email" type="text" /><span class="fmsg"></span>
	<span>Opt-in Mailing list <input name="optin" class="fcheckbox" type="checkbox"></span>
	
	<span>Message</span>
	<textarea name="msg"></textarea><span class="fmsg"></span>

		<span>reCAPTCHA extension:</span>
		{get_url url="/recaptcha"}<span class="fmsg" id="recaptchaErr"></span>

	<input id="contactSubmit" name="contactSubmit" type="submit" value="Submit"><span></span>
</div>
</form>
<script type="text/javascript">
	TPF.focusField('#cform', 'name');
</script>