We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
  • 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
      Studying MODX in the desert - http://sottwell.com
      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
      Join the Slack Community - http://modx.org
      • 20413
      • 2,877 Posts
      THANK YOU 4 SHARING!! smiley
        @hawproductions | http://mrhaw.com/

        Infograph: MODX Advanced Install in 7 steps:
        http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

        Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
        http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower
        • 26931
        • 2,314 Posts
        oh, nice Susan - thanks for the tut! smiley

        i just integrated the eForm "tell a friend" solution on a site and the modal might be the better way of displaying it
        • As I said, it’s quite simple - once you know how. It took me four days of intensive research and trial-and-error to get it all working. I hate Javascript, but it does such neat stuff!
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 27361
            • 8 Posts
            I agree Susan, JS is great. But so is optimizing your time with well-used readily-available code. I’ve been using jqModal in most of my last several projects and have been very happy with it. It allows a huge amount of flexibility all for under 3.5k with the CSS. It does regular overlays, true modals (blocked background), AJAX of course, nested modals, etc. Definitely worth checking out for stuff like this.

            I appreciate you taking your time to show us all how to integrate such things easily with MODx. Thanks!!!
              • 26931
              • 2,314 Posts
              :) works great!!

              doesn’t center the div#form_window at the moment & to get a black overlay change:
              /* styling below transparent */
              background-color: #transparent;
              }

              to
              /* styling below transparent */
              background-color: #000;
              }


              btw. you need the "Anchors Away" plugin to get it working -> http://modxcms.com/forums/index.php?topic=15753.0

              *edit: it centers when
              <div id="form_window" class="modal_window"></div>
              got a width & height e.g.
              width:300px;min-height: 200px;height:auto !important;height: 200px;
              • Odd, mine works fine without the plugin (except for the minor css and positioning issues, which actually are just how I want the form to be displayed, since the button for activating it is in the lower right of the page).
                  Studying MODX in the desert - http://sottwell.com
                  Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                  Join the Slack Community - http://modx.org
                • GREAT!!!!!!!!!!!!!!!!!!!!!
                  Susan, thanks!
                    palma non sine pulvere
                    • 17921
                    • 101 Posts
                    Hallo! How to make some inputs optional (not essential)?
                      samurai smiley
                      • 20413
                      • 2,877 Posts
                      instead of
                      <td><input type="text" id="fmail" name="fmail" value="[+fmail+]" eform="Friend's Email::1" /></td>

                      you’d do
                      <td><input type="text" id="fmail" name="fmail" value="[+fmail+]" eform="::0::" /></td>


                      http://wiki.modxcms.com/index.php/EForm#Datatypes_and_formatting
                        @hawproductions | http://mrhaw.com/

                        Infograph: MODX Advanced Install in 7 steps:
                        http://forums.modx.com/thread/96954/infograph-modx-advanced-install-in-7-steps

                        Recap: Portland, OR (PDX) MODX CMS Meetup, Oct 6, 2015. US Bancorp Tower
                        http://mrhaw.com/modx_portland_oregon_pdx_modx_cms_meetup_oct_2015_us_bancorp_tower