The eForm call:
<div id="tafArea">
[!eForm? &formid=`tafForm` &tpl=`tafFormTpl` &report=`tafReportTpl` &to=`[+tafmailto+]` &from=`[+tafEmail+]` &fromname=`[+tafname+]` &replyto=`[+tafEmail+]` &subject=`[+tafsubject+]` &thankyou=`tafThankyou`!]
</div>
the tafFormTpl:
[+validationmessage+]
<form id="tafForm" action="[~[*id*]~]" method="post">
<fieldset id="info">
<label for="tafname">Your Name</label>
<input type="text" name="tafname" id="tafname" value="" size="22" tabindex="100" eform="Your Name::1">
<label for="tafEmail">Your Email Address</label>
<input type="text" name="tafEmail" id="tafEmail" value="" size="22" tabindex="101" eform="Your Email:email:1">
<label for="tafmailto">Your Friend's Email Address</label>
<input type="text" name="tafmailto" id="tafmailto" value="" size="22" tabindex="102" eform="Your Friend's Email::1">
</fieldset>
<fieldset id="message">
<label for="tafsubject">Subject</label>
<input type="text" name="tafsubject" id="tafsubject" value="" size="22" tabindex="103" eform="Subject::1">
<label for="tafmessage">Your Message</label>
<textarea name="tafmessage" id="tafmessage" cols="2" rows="2" tabindex="104" eform="Message::1"></textarea><br>
<input name="submit" type="reset" id="cancel" class="rounded" tabindex="105" value="Close" />
<input name="submit" type="submit" id="submit" class="rounded" tabindex="106" value="Submit" />
</fieldset>
</form>
The tafThankyou chunk:
<div id="tafThankyou">
<p><span id="tafThankyouMessage">Your message has been sent.</span><br>
<button id="cancel" type="button" name="closebutton" id="closebutton" value="close">Close</button>
</p>
</div>
The tafReport chunk:
<h2>[+tafsubject+]</h2>
<p>[+tafmessage+]</p>
<p>[+tafname+]</p>
The activation link:
<a class="taf" href="[~[*id*]~]"><img src="assets/images/logos/email.png" title="Tell A Friend About ..." alt="Tell-a-Friend"></a>
And the javascript (using jQuery and the
jQueryEasing plugin) to make it work:
$(document).ready(function(){
$("#tafArea").css('height', '0px');
$("#cancel").click(
function() {
$("#tafArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
}
);
$("#tafArea p").click(
function() {
$("#tafArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
}
);
$("a.taf").toggle(
function () {
$("#tafArea").animate({height: "224px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
},
function () {
$("#tafArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'})
}
);
if($("div.errors").text() != '') {
alert($("div.errors").text());
$("a.taf").focus();
$("#tafArea").animate({height: "274px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'});
}
if($("div.errors").text() == '') {
$("#tafArea").animate({height: "0px"}, {queue:false, duration: 1700, easing: 'easeOutBounce'});
}
if($("#tafThankyouMessage").text() != '') {
alert($("#tafThankyouMessage").text());
}
if($("#multiplesubmit").text() != '') {
alert($("#multiplesubmit").text());
}
});
You can see the same basic form and jQuery action in the contact form on my site. It can also work well as an AJAX loaded form if you put the eForm snippet in a resource with no template, and use the URL of the resource in the AJAX loading javascript.