Skip to main content

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!