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

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

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 Composer 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 success div, 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.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 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

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 Composer 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

# Alternate Success Markup from a Template or Existing Div after AJAX Submit Revised 3.10.0+

# From Existing Div

# From a Template

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

From Existing Div

From a Template