In Webflow, how can I make a form submit redirect URL open in a new tab?
Published on
September 22, 2023
To make a form submit redirect URL open in a new tab in Webflow, you can use a custom code solution. Here's how you can do it:
- Select the form element in the Designer panel.
- Click on the Settings tab in the right-hand panel.
- In the Form Settings section, find the Redirect URL field and enter the URL to which you want to redirect users after submitting the form.
- Open the page settings for the page where the form is located.
- Click on the Custom Code tab.
- In the Head Code section, add the following code:
<script> document.addEventListener('DOMContentLoaded', function() { var form = document.getElementById('your-form-id'); if (form) { form.addEventListener('submit', function(event) { window.open(form.getAttribute('action'), '_blank'); event.preventDefault(); }); } });</script>
- Replace
'your-form-id'
with the ID of your form. To find the form ID, select the form element and look for the ID attribute in the Settings tab. - Save and publish your changes.
This code will add an event listener to the form element, which will intercept the form submission. When the form is submitted, it will open the specified redirect URL in a new browser tab or window using the window.open()
method.
Note: Remember to replace 'your-form-id'
with the actual ID of your form and ensure that the form element has an explicit action
attribute set with the redirect URL.
By following these steps, you can make the form submit redirect URL open in a new tab in Webflow.
Additional Questions:
- How do I add a form in Webflow?
- Can I customize the look and feel of form elements in Webflow?
- Is it possible to integrate third-party form submission services with Webflow?