Run JavaScript after form submit, or while a form is loading, with the following examples. These examples use triggers included in Formidable Forms.

<script type="text/javascript">
document.addEventListener( 'DOMContentLoaded', function() {
    // Paste the example's code here, without its own script tags.
} );
</script>

Hide confirmation message after 5 seconds

Use the code below to show your form with your success message and hide it after x seconds. Add this code on the page where the form is published, such as in a Custom HTML block below the form, or in your theme's footer section. With the form shown again after submit, code in the form's Customize HTML runs again and adds the handler a second time.

<script type="text/javascript">
jQuery(document).ready(function($){
    $(document).on( 'frmFormComplete', function( event, form, response ) {
       $(".frm_message").delay(5000).fadeOut(1000); // change 5000 to number of seconds in milliseconds
    });
});
</script>

Perform action after form submit

To run a jQuery or JavaScript action while or after a form is submitted, use one of the events below. Which events fire depends on whether the form is submitted with AJAX and on the form's Confirmation action.

When loading starts

Use the frmStartFormLoading event to run custom code when a form shows its loading indicator. It fires on the form element when:

• The form is submitted, with or without AJAX.
• The user goes to the next or previous page of a multi-page form.
• A file starts uploading in a File Upload field.
• A Lookup field starts loading its values.

The File Upload and Lookup fields are part of Formidable Forms Pro.

When the form finds errors before it's sent, the event doesn't fire. A basic example is shown below.

<script>
jQuery(document).ready(function($){
$(document).on( 'frmStartFormLoading', function( event ) {
var formID = $(event.target).find('input[name="form_id"]').val();
});
});</script>

The form element that is loading is event.target. The event passes no other parameters.

Load this script on the page where the form is published, outside the form's Customize HTML. When a form loads a new page with AJAX, the code in its Customize HTML runs again. The event handler is then added a second time.

When loading ends

Use the frmEndFormLoading event to run custom code when the loading indicator is removed and the form can be used again. It fires on the form element when:

• A form submitted with AJAX gets its response: a success message, the next page, or errors. The event fires before the form is replaced with the new content.
• Every file in the form has finished uploading.
• A Lookup field has finished loading its values.

It doesn't fire when a form is submitted without AJAX or redirects to another page, because a new page loads instead. frmEndFormLoading doesn't fire when the user goes back to the previous page. Like frmStartFormLoading, it passes only the event, with the form element in event.target. Load it outside the form's Customize HTML too.

This example shows "Please wait..." next to the submit button while the form is loading, and removes it when loading ends.

<script>
jQuery(document).ready(function($){
$(document).on( 'frmStartFormLoading', function( event ) {
$(event.target).find('.frm_submit').append('<span class="my-wait-message">Please wait...</span>');
});
$(document).on( 'frmEndFormLoading', function( event ) {
$(event.target).find('.my-wait-message').remove();
});
});</script>

After success message

Use the frmFormComplete event for a JavaScript or jQuery form submit callback after a success message is displayed. A basic example is shown below.

<script>
jQuery(document).ready(function($){
$(document).on( 'frmFormComplete', function( event, form, response ) {
var formID = $(form).find('input[name="form_id"]').val();
});
});</script>

The form object includes the form element that was submitted. The response object includes the content that is displayed in the success message.

Load this script on the page where the form is published, such as in a Custom HTML block below the form. Don't put it in the form's success message: the listener isn't ready in time for that submit. It also works in the After Fields section of the form's Customize HTML. Sometimes the form is shown again after a submit: on a multi-page form with AJAX, or when Show the form with the confirmation message is checked in the Confirmation action. The Customize HTML code then runs again each time, and the handler is added again. In those cases, load the script on the page where the form is published, such as in a Custom HTML block below the form.

After AJAX error message

Use the frmFormErrors event for a JavaScript or jQuery form submit callback after an error message is displayed. It works when the form is set to submit with AJAX. An example is shown below.

<script type="text/javascript">
jQuery(document).ready(function ($) {

$(document).on('frmFormErrors', function( event, form, response ){
  alert("errors");
});

});
</script>

Before redirect

Use the frmBeforeFormRedirect event to run custom code before a form is redirected to a new page. It works only when Submit this form with AJAX is turned on in your form's settings. A basic example is shown below.

<script>
jQuery(document).ready(function($){
$(document).on( 'frmBeforeFormRedirect', function( event, form, response ) {
var formID = $(form).find('input[name="form_id"]').val();
});
});</script>

The form object includes the form element that was submitted. The response object includes the URL that the page will redirect to. You can place this script in a form's Customize HTML.

After another page's content is shown

Use the frmPageChanged event to run custom code after the form is replaced with content from another page. A basic example is shown below.

<script>
jQuery(document).ready(function($){
$(document).on( 'frmPageChanged', function( event, form, response ) {
var formID = $(form).find('input[name="form_id"]').val();
});
});</script>

The form object includes the form element that was submitted. The response object includes the content that is displayed from another page. Load this script outside the form's HTML.

Redirect to URL in new tab

Update: This can be done without any code. Learn how to redirect after form submit without any code.

If you still want to use code, add this redirect JavaScript to the Message on submit box of the form's Confirmation action.

<script>
window.open('http://www.yoururl.com', '_blank');
</script>

Redirect to URL in new tab Method 2

The downside of option 1 is that browser popup blockers can prevent your redirect window from opening. Option 2 provides another way to open a new page or tab on submit without triggering popup blockers.

To do this, go to your form's Settings → Customize HTML. In the submit button code, add the following just before the [button_action] shortcode.

onclick="window.open('http://yoururl.com', '_blank');"