Using eForm to create AJAX-based modal overlay forms with JQuery is quite simple.
Step one:
1. Create the document that will have the form (in my case, this was actually part of the template footer in a "social networking" block with links to Twitter, etc; this was a "Share with a Friend" button).
2. On this document put a link, or a button, or whatever you want, with a classname of "activate_modal".
3. Also on this document put two divs, one for the modal overlay and one for the actual form.
<p><a class="activate_modal" name="form_window" href="#">First modal window.</a></p>
<div id="mask"></div>
<div id="form_window" class="modal_window"></div>
A bit of CSS to set this up:
#mask{
position:absolute; /* important */
top:0px; /* start from top */
left:0px; /* start from left */
height:100%; /* cover the whole page */
width:100%; /* cover the whole page */
display:none; /* don't show it '*/
/* styling below */
background-color: transparent;
}
.modal_window{
position:absolute; /* important so we can position it on center later */
display:none; /* don't show it */
/* styling below */
color:white;
}
/* style a specific modal window */
#form_window{
border:1px solid gray;
background: #246493;
color:black;
padding: 0 20px 20px;
}
Step Two:
1. Create a document with no template (none). Give it an appropriate alias; this will be used later in the AJAX request. Something like ’shareform’ maybe. To avoid problems, I cleared all the Settings checkboxes except Published. I also cleared the Show in Menu checkbox.
2. In the content, put a normal eForm snippet call:
[[eForm? &formid=`ShareForm` &to=`[+fmail+]` &from=`[+email+]` &replyto=`[+email+]` &fromname=`[+name+]` &subject=`[+name+] Recommends This site` &tpl=`ShareFormTpl` &report=`ShareReportTpl` &thankyou=`ShareThankyouTpl`]]
Step Three:
Create the chunks.
1. ShareFormTpl
<p id="validationmessage">[+validationmessage+]</p>
<form id="ShareForm" action="#" method="post">
<table><tr>
<th>Your Name:</th><th>Your Email</th>
</tr><tr>
<td><input type="text" id="name" name="name" value="[+name+]" eform="Your Name::1" /></td>
<td><input type="text" id="email" name="email" value="[+email+]" eform="Your Email::1" /></td>
</tr><tr>
<th>Friend's Name</th><th>Friend's Email</th>
</tr><tr>
<td><input type="text" id="fname" name="fname"value="[+fname+]" eform="Friend's Name::1" /></td>
<td><input type="text" id="fmail" name="fmail" value="[+fmail+]" eform="Friend's Email::1" /></td>
</tr><tr>
<th colspan="2">Message</th>
</tr><tr>
<td colspan="2"><textarea id="message">[+message+]</textarea></td>
<tr><tr>
<td colspan="2">
<input type="button" id="closebutton" class="close_modal" value="Cancel" onclick="close_modal()" />
<input type="button" id="submitbutton" value="Send Mail" onclick="submit_form()" />
</td></tr></table></form>
The only thing that’s really important here is that you use input type="button", since you don’t want the form to submit as normal. Make sure to give all of the form’s input elements an ID, including the buttons, as these will be used in the javascript later.
2. ShareReportTpl
<h2>[+subject+]</h2>
<p>[+message+]</p>
3. ShareThankyouTpl
<p>Your email has been sent.</p>
<p><input type="button" id="close" name="close" value="Close" onclick="close_modal()" /></p>
Yes, this wouldn’t validate, but since it’s loaded via javascript and AJAX a validator will never see it. The button (or link or image or whatever you prefer) is necessary, as this modal window won’t go away unless something triggers the close_modal() function.
And finally, the JQuery javascript, which can be loaded as usual with javascript tags in your template head. I have it in a file named "custom.js" in the assets/js directory.
$(document).ready(function(){
//get the height and width of the page
var window_width = $(window).width();
var window_height = $(window).height();
//vertical and horizontal centering of modal window(s)
/*we will use each function so if we have more then 1
modal window we center them all*/
$('.modal_window').each(function(){
//get the height and width of the modal
var modal_height = $(this).outerHeight();
var modal_width = $(this).outerWidth();
//calculate top and left offset needed for centering
var top = (window_height-modal_height)/2;
var left = (window_width-modal_width)/2;
//apply new top and left css values
$(this).css({'top' : top , 'left' : left});
});
$('.activate_modal').click(function(e){
//get the id of the modal window stored in the name of the activating element
var modal_id = $(this).attr('name');
// load eform
$('#'+modal_id).load('shareform.html');
//use the function to show it
show_modal(modal_id);
e.preventDefault;
});
// $('.close_modal').click(function(e){
//use the function to close it
// close_modal();
// e.preventDefault();
// });
});
//THE FUNCTIONS
function close_modal(){
//hide the mask
$('#mask').fadeOut(600);
//hide modal window(s)
$('.modal_window').fadeOut(500);
}
function show_modal(modal_id){
//set display to block and opacity to 0 so we can use fadeTo
$('#mask').css({ 'display' : 'block', opacity : 0});
//fade in the mask to opacity 0.8
$('#mask').fadeTo(800,0.8);
//show the modal window
$('#'+modal_id).fadeIn(800);
}
function submit_form(){
// disable the submit button
$('#submitbutton').attr("disabled", true);
// get the field values
var name = $("input#name").val();
var email = $("input#email").val();
var fname = $("input#fname").val();
var fmail = $("input#fmail").val();
var message = $("textarea#message").val();
// load the eform results
$('#form_window').load('shareform.html', {'name':name, 'email':email, 'fname':fname, 'fmail':fmail, 'message':message, 'formid':'ShareForm'});
}
One thing to pay attention to here is the last parameter in the load function; in this case ’formid’:’ShareForm’. eForm requires this to be in the POST in order to process the rest of the POST values. You can see in the list of values to send via AJAX in the final submit_form() function that it uses the ID of each input field to get its value.
All the eForm features work; if one of the fields is left empty or is invalid, the error messages along with the form will be loaded, just as it is in normal page-refresh eForm usage. You’ll want to experiment with the placement of the form and the css to get it just right for your site’s needs.
http://tutsvalley.com/tutorials/how-to-make-a-completely-reusable-jquery-modal-window/
http://docs.jquery.com/Ajax/load