How do I show a 'loading' message when the form submits?

Add a Custom Element element to your form, open the configuration and check the 'Pure Code' box, then add code like this to it:

<div id="loading" style="display: none" >
  <div>Add message here</div>
  <div>
    <img src="url_of_image/loading.gif" alt="" />
  </div>
</div>

You can change the message, the image URL and add CSS to suit your form.

Add a Custom code action to your form OnLoad event and put this code into it*:

<?php
$form->form_params->set('jsvalidation_onValidateSuccess', 'showLoader');
?>

In a Load JS action add this code:

function showLoader(){
  $('loading').setStyle('display', 'block');
  $('submit_btn').disabled = true;
};

Note: the submit button id 'submit_btn' is different here. It needs to match the id in your form HTML.

---

To hide the form or part of the form on submission add two Custom Elements and drag them before and after the section you want to hide - the loading gif div should not be inside! 

Click the Pure code box in both Custom elements; in the first add

<div id='hide_me' >

and in the second add

</div>

In the more recent ChronoForms releases you could use a Container element to create this group.

Then add this line to the showLoader function to hide the form and close up the empty space:

$('hide_me').setStyle('display', 'none');

---

And if you want to change the text of the Submit button add this line:

$('submit_btn').value = 'Processing . . .';