Revised 3.10.0+
Alternate Success Markup from a Template or Existing Div after AJAX SubmitWhen 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
- 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.
- 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>
1
2
3
4
5
6
7 - Wrap your existing form render with a
div
to make it easier to swap out with the custom successdiv
, e.g.form-wrapper
:<div id="form-wrapper"> {{ craft.freeform.form('myContactForm').render }} </div>
1
2
3 - In the footer of the template that will contain the form, be sure to include something like this in the footer area:
- Freeform 3.10+:
<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>
1
2
3
4
5
6
7
8
9
10
11
12 - Freeform 3.9 and lower:
<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]'); // Listen for the "freeform-ready" event if the scripts are being loaded in the footer // !! Do not use this if scripts are loaded inside the form form.on('freeform-ready', function (event) { // Override the "renderSuccess" function of Freeform's JS plugin to // swap out the form with the contents of the 'custom-success' div event.target.freeform.setOption('renderSuccess', function () { // 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- Freeform 3.10+:
From a Template
- 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.
- 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>
1
2
3
4
5 - 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"> {{ craft.freeform.form('myContactForm').render }} </div>
1
2
3 - In the footer of the template that will contain the form, be sure to include something like this in the footer area:
- Freeform 3.10+:
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14 - Freeform 3.9 and lower:
<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]'); // Listen for the "freeform-ready" event if the scripts are being loaded in the footer // !! Do not use this if scripts are loaded inside the form form.on('freeform-ready', function (event) { // Override the "renderSuccess" function of Freeform's JS plugin to // swap out the form with the contents of the "/freeform-demo/ajax-success" template event.target.freeform.setOption('renderSuccess', function () { // 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
- Freeform 3.10+: