Blog

How to open form in another window

In this tutorial on html forms I am going to show you, in a practical way, how you can configure the destination window of a form.

You can find below several code examples and a brief explanation of the key points to configure the destination of your forms.

Let’s go there!

Content

  • Attributes of the form to open a new window
  • Destination of the form in a new window
  • Form with destination new tab

Attributes of the form to open a new window

To configure our HTML form we will use an attribute.

Of the attributes that we can use in a form labelwe will only need 1 to control the target window of the form: the attribute target.

He html target attribute It will allow us to configure the destination of the form in 5 different ways:

  • _blank: With this parameter we will configure the form to open in another tab from the browser.
  • _self: This is the default setting for every form. Opens the destination of the form in the same window (frame) in which the form is located.
  • _parent: will open the target page of the form in the “parent” window. This means that if the form is inside an iframe or in a “popup” window, it will send the information and open the “action” page in the window that opened the popup, or that contains the iframe.
  • _top: similar to parent.
  • framename: this configuration will actually be the name of the “frame” to which we want to send the form. For example, when opening a window we can give it a name. This name will allow us to identify this window and we can indicate it as a target.

Destination of the form in a new window

I’m going to start by teaching you how open the form target in a new window. You should keep in mind that I mean opening another “popup” browser window and not a new tab.

First the example:

<form method="post" 
      target="print_popup" 
      action="/destino-fin.php"
      onsubmit="window.open('about:blank','print_popup','width=1000,height=800');">

</form>

This example has 2 key parameters:

  1. The onsubmit attribute with a short javascript script.
  2. The target attribute.

With javascript, when the onsubmit event is executed, I will open a new window with the command window.open. In addition, I specify that the name for this new “frame” is print_popup and I specify, also, a width and height.

You must stay with the name of the new window, since this name or identifier is the one that I have indicated in the attribute target of the HTML form.

Form with destination new tab

<form target="_blank" action="http://example.com"
      method="post" id="mc-embedded-subscribe-form"
      name="mc-embedded-subscribe-form" class="validate"
>

Leave a Reply