Formidable Forms

Formidable Forms

  • Features
  • Templates
  • Pricing
  • Resources
    • Docs & Support
    • Blog
    • Community
  • Solutions
    • Web Applications
    • Calculators
    • Surveys
    • Directories
    • Payments
    • Contact forms
  • Login
  • Get Formidable Forms

Run JavaScript After Form Submit

Knowledge Base → Extend Formidable Forms → JavaScript Examples → Run JavaScript After Form Submit

Run javascript on form submit with the following examples. These examples use triggers included in Formidable Forms.

Get Better Forms FREE!
 

Hide confirmation message after 5 seconds

If you are showing your form with your success message and would like to hide it after x seconds you can use this code in your success message:

Your submission was successfully saved.

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

Perform action after form submit

If you would like to perform a jQuery or JavaScript action after a form is submitted, there are three different events you may use, depending on the "On Submit" action you have selected in your form's Settings.

After success message

You may 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. This script may be placed within a form's success message or it may be loaded on the page where the form is published. It cannot go in a form's Customize HTML.

Note: To use this function, Submit this form with AJAX must be enabled in the form settings.

After AJAX error message

You may use the frmFormErrors event for a javascript or jQuery form submit callback after an error message is displayed, 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

You may use the frmBeforeFormRedirect event to run custom code before a form is redirected to a new page. Please note that this may only be used if 'Submit with AJAX' is selected 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. This script may be placed in a form's Customize HTML.

After another page's content is shown

You may 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. This script must be included outside of the form's HTML in order to be used.

Redirect to URL in new tab

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

If you still want to use code, you can add a redirect Javascript in the "update confirmation message".

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

Redirect to URL in new tab Method 2

The down side of option 1 is that browser pop-up blockers can prevent your redirect window from opening. Option 2 provides another way to open new page/tab on submit without triggering pop-up blockers. To do this, you'll need to go to your form settings -> Customize HTML and add the following to the submit button code just before the [button_action] shortcode.

onclick="window.open('http://yoururl.com', '_blank');"
  • Hide confirmation message after 5 seconds
  • Perform action after form submit
    • After success message
    • After AJAX error message
    • Before redirect
    • After another page's content is shown
  • Redirect to URL in new tab
  • Redirect to URL in new tab Method 2
Categories
×

Categories

  • Installation & Getting Started
  • Account Management
  • Forms
  • Entries
  • Views
  • Styles
  • Importing & Exporting
  • Add-Ons
  • Extend Formidable Forms

Using WordPress and want to get Formidable Forms for free?

Get Formidable Forms Lite Now

Submit doc feedback
Was this article helpful? *
What did you find most unhelpful? *
If you need help from our support team, please create a ticket at our helpdesk.

This article may contain affiliate links. Once in a while, we earn commissions from those links. But we only recommend products we like, with or without commissions.

Take on bigger projects Right Now

Get the tools you need to revolutionize your workflow and architect a masterpiece. Build the most advanced WordPress forms and actually use the data you collect in meaningful ways.

Get the most advanced WordPress form plugin and the only form builder with integrated Views.

Get Formidable Forms Now

Resources

  • Community
  • Affiliates
  • Contact
  • Free Online Form Builder

Top Features

  • Application Builder
  • Calculator Plugin
  • Surveys & Polls
  • Quiz Maker
  • Form Templates
  • Application Templates
  • Directory Plugin
  • Donation Plugin

Company

  • About Us
  • Giving Back
  • Careers
  • Newsletter
  • WP Tasty
  • Nutrifox

Copyright © 2023 Strategy11, LLC. Formidable Forms® is a registered trademark Strategy11, LLC.
Privacy Policy | Terms of Service | Sitemap

Join 300,000+ using Formidable Forms to create form-focused solutions fast. Get Started See User Reviews