Keeping eForm AJAX Results Inside a Modal Window

When eForm is rendered inside a Bootstrap modal, the default form flow often feels clumsy because validation and thank-you output refresh the whole page. A cleaner approach is to post the form through AJAX and inject the returned HTML back into the modal body.

The core pattern

1. render the normal eForm form in the modal
2. bind the submit event with JavaScript
3. send the form to the same action URL
4. replace the modal content with the returned HTML fragment

$('#TopForm').on('submit', function (e) {
  e.preventDefault();
  const $form = $(this);
  $.post($form.attr('action'), $form.serialize(), function (html) {
    $('#modal-body').html(html);
  });
});

This keeps validation messages and thank-you templates in the same visual context, which is exactly what users expect from a modal workflow.