How To Open a New Link on Form Submission

Introduction

Would you like to open a new link on form submissions? Using a small code snippet, we’re going to show you how you can display your confirmation message but also open a new link when the form is submitted.

By default, WPForms gives you the option of displaying a confirmation message, redirecting to a page on your site, or providing a custom URL when the form is submitted. But what if you wanted to do a combination of these options? For this tutorial, we’re going to create a form that will display a confirmation message when the form is submitted but also open a new tab and load a page that displays a PDF download as well.

Creating the form

First, we’ll need to create our form. Our form is a simple newsletter sign-up form but we’re also going to allow them to provide any feedback comments as well so we’ll have the Name, Email, and Paragraph Text form fields in our form.

If you need help in creating your form, please see this documentation.

create your form and add your fields

Before exiting the form builder, be sure to select the Enable AJAX form submission on the General tab.

This particular snippet will only work if AJAX is enabled on the form submission.

Now it’s time to add the snippet that will open a new link on form submissions.

If you need any help in adding snippets to your site, please review this tutorial.

/**
 * Open new link on form submission
 *
 * @link https://wpforms.com/developers/how-to-open-a-new-link-on-form-submission
 */

function wpf_dev_event_after_submit() {
   ?>
   <script type="text/javascript">
      jQuery( function( $ ) {
		  
	 //This snippet will only run for the form ID 521
         $( '#wpforms-form-521' ).on( 'wpformsAjaxSubmitSuccess', function( e ) {
			 
	     //Change the URL to match the URL you want to open in a new tab
             window.open( 'http://myexamplesite.com/how-to-set-up-access-controls-in-wpforms.pdf', '_blank' );
         
         } );
      } );
   </script>
   <?php
}
add_action( 'wpforms_wp_footer', 'wpf_dev_event_after_submit', 100 );

Remember to change the form ID and the URL you want to open in your code snippet.

Now when your form is submitted a new tab will open with your link while your confirmation message will still display in a separate window.

and that is how you open a new link on form submission

And that’s it! Would you like to block users from entering links into your form fields? Take a look at our tutorial on How to Block URLs Inside the Form Fields.

Action Reference: wpforms_wp_footer