How to Open Redirect in a New Window

Introduction

Would you like to have your form redirect open in a new window or tab? With WPForms you can have your form redirect to a new page upon successful form submission. With a small JavaScript code snippet, you can set this redirect to open in a new window or tab. This tutorial will show you how to add this small snippet to your site to open that redirect in a new window.

Adding the snippet

Before we create the form, we’re going to begin by adding this snippet to our site.

If you’re not sure where or how to add snippets to your site, please check out this tutorial.

/**
 * Open. redirect in a new window
 *
 * @link https://wpforms.com/developers/how-to-open-redirect-in-a-new-window/
 */

function wpf_dev_open_redirect_new( ) {
?>
<script type="text/javascript">
    jQuery(function($){
        $( "form#wpforms-form-909" ).attr( "target", "_blank" );
		$( "#wpforms-form-909" ).on( 'submit', function(){
			location.reload(true);	
		});
    }); 
    </script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_open_redirect_new', 30 );

This snippet will only be applied to the form ID 909. You’ll need to update this part of the snippet to match your own form ID.

For any assistance needed in finding your form ID, please reivew this tutorial.

Creating the form

Next, you’ll need to create your form and add the fields you need.

Once you’ve set up the fields, click over to Settings » Confirmations and in the Confirmation Type dropdown, select Go to URL and enter the URL you want the user to be redirected to.

For more information on Confirmation Types, please review this tutorial.

set the confirmation type to redirect and enter your URL

Disabling AJAX form submissions

For redirecting into a new window, you’ll need to disable AJAX on the form. To do this, go to Settings » General and make sure the Enable AJAX form submission is disabled.

remember to disable ajax on the form submissions to open the redirect in a new window

And that’s it! You’ve successfully added the snippet that will open a redirect in a new window. Would you like to change the title that appears inside the tab of the browser window? Take a look at the tutorial on How to Change the Page Title on the Browser Tab.

Action Reference: wpforms_wp_footer_end