Elementor Forms are providing Actions after submission where you can set up a redirection to a Thank you page, but it opens the page in the parent tab.
If you need to open the page in a new tab, you will notice that there is no option for that, and here is our quick solution for opening a thank you page in a new tab.
Elementor Form Submission Actions
Elementor forms are offering a neat way of adding specific actions after the form has been submitted. These actions can be used for a lot of things and there is one called Redirect action.
The Redirect action is used to create a redirection to a page after the form has been submitted successfully. It is usually used to make redirection to a thank you page.
Sometimes you might get a request from your customer asking you to make the thank you page open up in a new tab, rather than reloading over the page where forms reside.
Here is a way to solve it.
Make Elementor Forms open the page in a new tab using jQuery
We are going to use a jQuery snippet to make it work as we want it to. The idea is to use the script when the page is ready and catch the form submission state and once the form is successfully submitted, we open up a new tab with our desired Thank you page or any other URL of your choice.
To add this code, access Elementor > Custom code.
Now paste the code below into the field, set the location to <body> -Start and save this code as a Draft, don’t publish it yet.
// Lets catch form event here
<script>
jQuery( document ).ready(function( $ ){
$( '#Replace_with_form_ID' ).on('submit_success', function(){
// form has been submitted and we open it in a new tab
window.open('Replace_with_your_page_URL', '_blank');
});
});
</script>
After that, navigate to a page where your form is located or template. Open it up for editing and find the form, access the Additional settings and the bottom, and enter the Form ID.
You can set any unique names for your form to act as an ID, for example, frm2200abc
Head back to Elementor > Custom code and reaccess the code. Alter the text Replace_with_form_ID with your own form ID.
Scroll down and also replace the value with your page URL. In our example, it is https://mywebsite.com/thank-you/
// Lets catch form event here
<script>
jQuery( document ).ready(function( $ ){
$( '#frm2200abc' ).on('submit_success', function(){
// form has been submitted and we open it in a new tab
window.open('https://mywebsite.com/thank-you/', '_blank');
});
});
</script>
Now just publish your custom code and clear the cache if there is any.
Access the form from the front-end and test the redirection, you should see the new tab opening after the form submission.
Conclusion
I have to admit that this is a dirty JS solution for this and it might be triggering popup blockers for users that are protected with Chrome or Firefox popup blockers.
The reason why this option is not included in the Elementor is that almost all popup blockers are not allowing the trigger of a new tab in this way. Luckily this still works on my devices and browsers out of the box, so you might consider this as a temporary fix.
Let me know your option on this topic, doesn’t this helps are you able to quickly follow and implement? Any ideas or suggestions are most welcome.
How can I apply this solution if my url comes from a dynamic field and it is not a static url.