Answered FormIt :how to display successmessage in modal window

I'm working on my first Revo site. And for the first time using FormIt.
The form is working correct, but I would love to have the successmessage in a modal window (bootstrap 3 is used)
I found a tutorial (http://www.cmstricks.com/blog/2013/03/21/modx-form-submission-with-formit/) about FormIt and in the comments there is mentioned the use of a modal window for the successmessage, but it is not clear enough for a beginner like me.
There is even a demo page of what I want, but can't figure it out. (http://www.cmstricks.com/demos/formit-modal-demo)

Anyone can help me (as a beginner) with this and can explain this step by step ?

It looks like what is happening is that you specify the modal pop-up HTML in the &successMessage property of the FormIt snippet call.

Then, at the bottom of the page, you have the code to trigger the modal pop-up.

This javascript code will run on every page load, but unless FormIt has inserted the successMessage HTML, it won't find the div to pop up.

Once you have successfully submitted the form, FormIt inserts the successMessage HTML, and the javascript does find the modal div and operates on it.

The above method (as used in the CMSTricks demo and tutorial) only works when your FormIt reloads the page on form submission.

I have used a different method for an AJAX-based form that does not reload the page. In that case, the FormIt snippet was on a separate resource, with no template, nothing but the FormIt snippet. That resource served as the AJAX remote processor. The browser's Javascript parsed the return from the FormIt call, and displayed the parts of the return that I wanted, depending on whether or not those parts existed and had content in the FormIt return.

It used a lot of DOM manipulation to remove the form itself and display the success message if there was a success message returned, and to insert the error messages and classnames if there were errors returned.

A german howto could be found here: http://de.modx.com/forum/thread/7156/modx-formit-onepager-validierung-und-success-meldung-in-lightbox#dis-post-38343

It uses the HTML first approach and works well without the javascript.

With the current javascript in part 3 the form is hidden and a dismissable Bootstrap alert is shown at the place of the form. If you want a modal box, you have to change the success function in that script.

Quote from: sottwell at May 13, 2015, 09:31 PM

It looks like what is happening is that you specify the modal pop-up HTML in the &successMessage property of the FormIt snippet call.

Then, at the bottom of the page, you have the code to trigger the modal pop-up.

This javascript code will run on every page load, but unless FormIt has inserted the successMessage HTML, it won't find the div to pop up.

Once you have successfully submitted the form, FormIt inserts the successMessage HTML, and the javascript does find the modal div and operates on it.

Sottwell,
Sounds logical to me, but what is the exact code to put in the &successMessage property ?
Is it possible to give an example of the code ?
Thanks in advance !

You can see the exact HTML to put in the successMessage property if you view the source of the page that loads after you submit the form in his demo.

Quote from: sottwell at May 14, 2015, 08:08 AM

You can see the exact HTML to put in the successMessage property if you view the source of the page that loads after you submit the form in his demo.

<div id="modal" class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <div class="alert alert-success marginTop25">
      <button type="button" class="close" data-dismiss="alert">×</button>
      <h3>Your comment has been submitted successfully, please check your email.</h3>
    </div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
  </div>
</div>

Thanks, but I was asking for the code to launch the modal mindow in the FormIt instruction. I'm not so strong in JS or Jquery.
Do you mind to mention the FormIt part to launch the modal window on success ?

Again, if you look at the source of the modal demo page, you'll see the activation javascript at the bottom of the source, after the jquery and bootstrap libraries are loaded:

Quote from: sottwell at May 14, 2015, 10:10 AM

Again, if you look at the source of the modal demo page, you'll see the activation javascript at the bottom of the source, after the jquery and bootstrap libraries are loaded:

<script>

$(document).ready(function(){
$('#modal').modal('show');
})
</script>

I'm sorry Sottwell, but I have this on my page where the FormIt command is.
The problem is that if you go to that page the modal window is already displayed (acivated), before you can fill in the form !
I would like to have the modal window only to show up if the form was successfully filled in en submited.
I'm a beginner in Modx Revo, so sorry for my bad knowledge. Hope my problem is clearer now.

How can it be displayed on the page before you submit the form? It doesn't exist, until FormIt inserts it as the successMessage, and that can only happen after a successful submission.

Do you have that div in the template or resource code? It doesn't go there, it's only in the FormIt successMessage property.