Want to display a popup after a user submits a form on your WordPress site? This functionality comes in handy for a variety of uses, but it’s not a feature that’s built into most forms plugins by default.
In this huge tutorial, we’re going to show you how you can display a popup after a user submits a form using several popular WordPress form plugins.
By the end of this post, you’ll be able to combine your favorite contact form with the free Popups plugin to create something like this:
And because we want this post to be accessible, we’re going to provide instructions for 4 different popular contact form plugins (and we’ll also add more plugins as people request them!):
- Contact Form 7
- Ninja Forms
- Gravity Forms
- WPForms
Keep reading to learn how to combine the Popups plugin with one of those 4 form plugins to display a popup after a user submits a form on WordPress.
Part 1: Create Your Popup
To get started, you need to create the popup that you want to display after a user submits a form. You’ll use the free Popups plugin for this part.
If you want a detailed guide to every part of this interface, check out our full guide to creating a popup with the Popups plugin.
For this tutorial, though, we’re going to skip most of the styling options and just focus on the specific settings you need to configure to display a popup after a user submits a form.
After you’ve installed and activated the free Popups plugin, here’s what to do:
Step 1: Add Your Popup Content And Styling
To create your popup, go to Popups → Add New. You can enter your popup’s content in the live preview. In addition to using the normal editor functions, you can also use shortcodes in your popup’s content:
Further down the page, you have numerous options for styling your popup. Again, if you want help using all these styling options, check out our general guide to creating a popup.
Step 2: Use Display Rules To Choose Where Your Popup Displays
Once you’ve finished adding content and styling your popup, scroll down to the PopUp Display Rules section.
Use the drop-down to select Show this popup if…Page…is equal to…*the name of the page with your form*
For our example, our form is located on the Contact Me page. You can see how it should look below:
Step 3: Enable Manual Triggering
In the next section, you’re going to add some JavaScript to trigger the popup. But that JavaScript will only work if you configure your popup so that it triggers manually.
To do that, scroll to the Trigger section in the Display Options area and use the Trigger action dropdown to select Manual Triggering:
And that’s it for configuring your popup! Make sure to Publish it.
Step 4: Save Your Popup ID To Use In The Next Section
As part of the code snippets in the next section, you’ll need your popup’s ID. To find this ID, go to the Popups area in your WordPress dashboard and look at the ID column.
You need the number – you do not need the “#spu” part. For our example, that’s just “529”:
Keep this number handy, because you’ll need it in the next section.
Part 2: Add Code Snippet For Your Form Plugin
Above, you chose to manually trigger your popup. Now, you’re going to add the code snippet to make that happen. Before you do that, let me cover two quick housekeeping things to make the next sections easier.
First, no matter which form plugin you’re using, you need to add this code snippet to your child theme’s functions.php file. Or, you can use a plugin like Code Snippets.
Second, you’ll need to know how to find the Post ID for the page with your contact form. To find this, you can just edit the page with your form and look at the URL:
In the example screenshot above, the ID for the page is “520”.
With that knowledge, you should have everything you need to finish out this tutorial. Time to add the code snippet!
This code snippet is different for each contact form, so you can click below to jump straight to your preferred contact form:
Contact Form 7
Active on over 5 million sites, Contact Form 7 is the most popular free WordPress form plugin that you’ll find. While the core version of the form plugin is fairly basic, it’s easily extendable thanks to the huge library of third-party add-on plugins. To get started with Contact Form 7, you can download it from WordPress.org.
To display a popup after a user submits a Contact Form 7 form, you’ll need to find one more ID. Specifically, you need the ID of the Contact Form 7 form that you’re using. To find this, click on the Contact option and look for the id= in the Shortcode:
In the example screenshot above, the Form ID is 531.
Then, here’s the code snippet that you need. Make sure to replace:
- is_page(520) with the actual Page ID of the page with your contact form
- if ( ‘531’ == event.detail.contactFormId ) with the actual Form ID (you replace 531 in this example)
- SPU.show( 529 ); with the actual Popup ID
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| // Print javascript code in the footer of the site to trigger the popup upon form submission | |
| add_action('wp_footer', 'add_popups_trigger_code',150 ); | |
| function add_popups_trigger_code(){ | |
| // show code on certain page, comment out to print code on every page | |
| if( ! is_page('520') ) | |
| return; | |
| ?> | |
| <script> | |
| document.addEventListener( 'wpcf7mailsent', function( event ) { | |
| if ( '531' == event.detail.contactFormId ) { // Change 123 to the ID of the form | |
| SPU.show( 529 ); // change 143 to the ID of the popup | |
| SPU.hide( 120 ); // hide another popup | |
| SPU.track( 529, false );//track an impression , if you set to true you track a conversion | |
| } | |
| }, false ); | |
| </script> | |
| <?php | |
| } |
Once you do that, your form should work like this:
Ninja Forms
Ninja Forms is a free core plugin that you can extend with a variety of premium add-ons. For basic contact forms, the free version is totally fine. But if you want more advanced functionality – like the ability to use conditional logic, connect to email marketing services, accept payments, and more – you’ll need some of the premium add-ons.
To display a popup after a user submits a Ninja Forms form, here’s the code snippet that you need. Make sure to replace:
- is_page(520) with the actual Page ID of the page with your contact form
- SPU.show(‘529’); with the actual Popup ID
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php // don't add this tag | |
| // Print javascript code in the footer of the site to trigger the popup upon form submission | |
| add_action('wp_footer', 'add_popups_trigger_code',150 ); | |
| function add_popups_trigger_code(){ | |
| // show code on certain page, comment out to print code on every page | |
| if( ! is_page('520') ) | |
| return; | |
| ?> | |
| <script> | |
| // Create a new object for custom validation of a custom field. | |
| var myPopupsSubmitController = Marionette.Object.extend( { | |
| initialize: function() { | |
| this.listenTo( Backbone.Radio.channel( 'forms' ), 'submit:response', this.actionSubmit ); | |
| }, | |
| actionSubmit: function( response ) { | |
| //insert popup ID here | |
| SPU.show('529'); | |
| }, | |
| }); | |
| // On Document Ready… | |
| jQuery( document ).ready( function( $ ) { | |
| // Instantiate our custom field's controller, defined above. | |
| new myPopupsSubmitController(); | |
| }); | |
| </script> | |
| <?php | |
| } |
Once you do that, your form should work like this:
Gravity Forms
Gravity Forms is the Swiss Army Knife of WordPress form plugins. Though it only comes in a premium version, it’s massively flexible and you can use it to perform pretty much any action that requires a form, including surveys, payments, login/registration, and lots more. For those reasons, Gravity Forms is popular with developers. You can purchase Gravity Forms starting at $59.
To display a popup after a user submits a Gravity Forms form, you’ll need:
- To enable AJAX submit for your Gravity Forms form
- Your Gravity Forms form ID
To enable AJAX submit, check the box for Enable Ajax when you insert your form:
To find your form ID, click on the Forms option in your WordPress dashboard and look at the ID column:
Then, here’s the code snippet that you need. Make sure to replace:
- is_page(520) with the actual Page ID of the page with your contact form
- (formId == 1) with the actual ID of your form
- SPU.show( 529 ); with the actual Popup ID
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php // don't add this tag | |
| // Print javascript code in the footer of the site to trigger the popup upon form submission | |
| add_action('wp_footer', 'add_popups_trigger_code',150 ); | |
| function add_popups_trigger_code(){ | |
| // show code on certain page, comment out to print code on every page | |
| if( ! is_page(520) ) | |
| return; | |
| ?> | |
| <script> | |
| jQuery(document).ready(function(){ | |
| jQuery(document).bind('gform_confirmation_loaded', function(event, formId){ | |
| if(formId == 1) { | |
| // run code specific to form ID 1 and popup 123 | |
| SPU.show('529'); | |
| } else if(formId == 2) { | |
| // run code specific to form ID 2 | |
| SPU.show('529'); | |
| } | |
| }); | |
| }) | |
| </script> | |
| <?php | |
| } |
Once you do that, your form should work like this:
WPForms
WPForms is a popular freemium form plugin from, in part, Syed Balkhi of WPBeginner. It features a simple drag-and-drop editor to help you build your forms. The core free version is great for basic contact forms. But if you want more advanced functionality, like the option to register users, accept payments, connect to email marketing services, and more, you’ll need to purchase the premium version. The premium version starts at $49.
To display a popup after a user submits a WPForms form, you’ll need your WPForms form ID. To find it, go to the WPForms area in your WordPress dashboard and look at the number in the shortcode column (the Form ID is 534 in the example below):
Then, here’s the code snippet that you need. Make sure to replace:
- wpforms_process_complete_534 with the actual ID of your form (just replace the number)
- SPU.show( 529 ); with the actual Popup ID
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php // don' add this tag | |
| // Open popup after WpForms submission | |
| add_action( 'wpforms_process_complete_534', 'spu_popup_trigger' ); | |
| function spu_popup_trigger(){ | |
| add_action('wp_footer','spu_open_popup',99); | |
| } | |
| function spu_open_popup(){ | |
| echo '<script>setTimeout(function(){SPU.show(529)},1000);</script>'; | |
| } |
Once you do that, your form should work like this:
We hope you enjoyed this tutorial on how to display a popup after a user submits a form using 4 of the most popular WordPress form plugins.
Want us to cover a tutorial on another form plugin? Leave a comment and we’ll see about adding it to the list!
Leave a Reply