Question

I want to program a 3 second delay when the form is submitted. Right now, on submit the standard text fades out, and the notification text fades in, but the page reloads before you have a chance to read it.

<script type="text/javascript"> function changeText() { 
$('#free-planner').fadeOut('slow', function() {
       document.getElementById('free-planner').innerHTML = 'Check your email!';   }); {  $('#free-planner').fadeIn('slow', function() {  });    
 }   
} 
</script>

Answer 1

First, prevent the submit event, then fire it programatically when you are ready..

$('form').on('submit', function(ev) {
  ev.preventDefault();
  form = $(this);
  fp = $('#free-planner');
  fp.fadeOut('slow', function () {
    fp.text('Check your email!').fadeIn('slow', function() {
      form.submit();
    });
  });
});

All this stuff should probably happen after the form is submit. Maybe you want a hidden iframe which is the target of your form? Then you can submit the form without updating the current page in the browser. Something like:

form = $('form');
$('body').append($('<iframe>').attr({ name:"hiddenifr", id:"hiddenifr" }).css({ display: 'none' }));

form.attr('target', 'hiddenifr');
form.on('submit', function(ev) {
  fp = $('#free-planner')
  fp.fadeOut('slow', function() {
    fp.text('Check your email!').fadeIn('slow');
  });
});