Custom Form Handling

This how-to provides an overview of various ways to customize the handling of form submisions.

Inline Replace

In this example, rather than redirecting the visitor to a thank you page, you'll simply replace the form with a thank you message. To do this, you'll need to override the form's success handler function in Javascript.

All forms loaded on a page are stored in the MPForms Javascript array. Each form is identified with a unique form id, a randomly generated id that may change with every page load. NOTE: this id may appear to stay the same when a page is cached but you must assume it will change.

In the following example, the form is shown by default and the thank you content is hidden. On submit, we override the successHandler to hide the form and show the thank you message. A good user experience would be to animate the change to highlight the action.

<div id="my_form">
  {{ entity }} <!-- or whatever refers to the form object -->
</div>
<div id="form_thank_you" class="hidden">
  {{ entity.thank_you_html }}
</div>

{%- add_javascript inline = position:'body' -%}
       window.addEventListener('DOMContentLoaded', function() {
            MPForms('{{ form_id }}').config('successHandler', function(httpResponse, formElement){
            
            // hide form and show thank you
            var thankYouEl = document.getElementById('form_thank_you');
            var formEl = document.getElementById('my_form');
            if (thankYouEl)
                thankYouEl.classList.remove('hidden');
            if (formEl)
                formEl.classList.add('hidden');
        });
    });
{%- end_javascript %-}

Redirect to Self

In this example, the page the form is on will redirect to itself and pass the query parameter mp_fsg with the id of the new form submission. With this id, you can actually load the form submission and display a personalized thank you.

<!-- if this is a form submission -->
{% if request.query_params['mp_fsg'] is_valid %}
  <div>
    {% form_submit var fs = request.query_params['mp_fsg'] %} 
    <h1>Thanks, {{ fs.first_name }}!</h1>
    <p>
      {{ entity.success_content }}
    </p>
  </div>

<!-- otherwise, show the form -->
{% else %}
  <div>
    {{ entity.instructions }}
  </div>
  <div>
    {{ entity }} <!-- render the form -->
  </div>
{% endif %}