Alternate Success Markup from a Template or Existing Div after AJAX Submit

When using the Freeform built-in AJAX feature, if you wish to override the default AJAX success message and instead load alternate success markup from a template or existing div, follow the instructions below:

From Existing Div

1

Create a new form or edit an existing one as usual. Be sure to check off the Enable AJAX checkbox inside the form settings area in the form builder.

2

Add a div to hold the success contents inside your existing template that contains the form, e.g. custom-content:

<div id="custom-content">
    <h3>Thank you!</h3>
    <p>
        We have received your submission. You may now
        <a href="{{ siteUrl('path-to/file.pdf') }}">download the PDF guide</a>.
    </p>
</div>

3

Wrap your existing form render with a div to make it easier to swap out with the custom success div, e.g. form-wrapper:

<div id="form-wrapper">
    {{ freeform.form('myContactForm').render }}
</div>

4

In the footer of the template that will contain the form, be sure to include something like this in the footer area:

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
    document.addEventListener('freeform-render-success', function (event) {
        // Disable the default success rendering
        event.preventDefault();

        // We locate the 'form-wrapper' DIV element which contains our form
        // and we swap its contents (the whole form) with the HTML that we
        // fetch from any other element already present on the page
        $('#form-wrapper').html($('#custom-content').html());
    });
</script>

Finished!

From a Template

1

Create a new form or edit an existing one as usual. Be sure to check off the Enable AJAX checkbox inside the form settings area in the form builder.

2

Create a new template to hold the success contents, e.g. named ajax-success.html with content of:

<h3>Thank you!</h3>
<p>
    We have received your submission. You may now
    <a href="{{ siteUrl('path-to/file.pdf') }}">download the PDF guide</a>.
</p>

3

Wrap your existing form render with a div to make it easier to swap out with the success template, e.g. form-wrapper:

<div id="form-wrapper">
    {{ freeform.form('myContactForm').render }}
</div>

4

In the footer of the template that will contain the form, be sure to include something like this in the footer area:

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript">
    // Find the form element, can be a specific ID or just look for any forms
    var form = $('form[data-id]');
    form.on('freeform-render-success', function (event) {
        // Disable the default success rendering
        event.preventDefault();

        // We locate the 'form-wrapper' DIV element which contains our form
        // and we swap its contents (the whole form) with the HTML that we
        // fetch from the "/freeform-demo/ajax-success" template
        $('#form-wrapper').load('/freeform-demo/ajax-success');
    });
</script>

Finished!