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

  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>
    
    1
    2
    3
    4
    5
    6
    7
  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">
        {{ craft.freeform.form('myContactForm').render }}
    </div>
    
    1
    2
    3
  4. 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

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>
    
    1
    2
    3
    4
    5
  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">
        {{ craft.freeform.form('myContactForm').render }}
    </div>
    
    1
    2
    3
  4. 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
Last Updated: 1/21/2021, 5:46:57 PM