Amphtml: Submit form with target="_blank" inside amp-iframe not working

Created on 13 Nov 2018 · 4Comments · Source: ampproject/amphtml

 +----------------------+         +----------------------+
 |        HOST A        |         |         HOST B       |
 |                      |         |                      |
 |                      |         | form target=_blank   |
 |   +---------------+  |         | +----------------+   |
 |   |               |  |         | |                |   |
 |   |               |  |         | +----------------+   |
 |   |    amp-iframe +----------->+ +----------------+   |
 |   |               |  |         | |                |   |
 |   |      ^        |  |         | +----------------+   |
 |   |      |        |  |         |          +-------+   |
 |   +---------------+  |         |          |       |   |
 |          |           |         |          +-------+   |
 |          |           |         |                      |
 +----------------------+         +----------------------+
            |
            |
            |
            +
   submit = nothing happens

I have a form on B.
I have an amp-iframe on A that loads the form on B.

What's the issue?

If the target is "_blank" on the form, clicking the submit button inside the iframe does nothing.

I started out with target="_parent" and every sandbox option allowed on the amp-iframe and it all seemed to work, until I tried it on the AMP CDN, I then realised Google won't allow me to use _parent from the iframe with a different host.

So I thought about maybe opening a new tab on the submit, but as you can see that is not possible also. I don't know if it is a bug or an intended feature. If it is intended could anyone please give me the slightest of tips on how to achieve what I want to do please ? I've been scratching my head for over a week on this one...

I also tried to set formtarget="_blank" on the submit button iself, which is a poorly documented alternative to target="_blank" on the form itself, but that also did not work.

How do we reproduce the issue?

I have hosted a demo on Now.sh
Form : https://form-szzqvlntbu.now.sh (you can see it opens a new tab on submit)
Amp-Iframe: https://iframe-zjdtgquduz.now.sh (not working with target=blank, does work when target=parent, but disallowed on Google amp CDN, so useless.)

form.html

  <body>
    <form name="plswork" id="plswork" target="_blank" action="https://google.com">
      First name:<br>
      <input type="text" name="firstname" value="Mickey"><br>
      Last name:<br>
      <input type="text" name="lastname" value="Mouse"><br><br>
      <input type="submit" value="Submit" formtarget="_blank">
    </form>
  </body>

iframe.html

<body>
    <amp-iframe
      sandbox="allow-scripts allow-same-origin allow-forms allow-modals allow-pointer-lock allow-orientation-lock allow-popups-to-escape-sandbox allow-presentation allow-top-navigation"
      layout="fixed-height"
      height="356"
      frameborder="0"
      src="https://form-szzqvlntbu.now.sh">
    </amp-iframe>
  </body>

Source

jukefr

Most helpful comment

@jukefr You would also need to add allow-popups to the sandbox for _blank to work.

aghassemi on 14 Nov 2018

👍3 🎉1 😄1

All 4 comments

cc @aghassemi Could you look at this? Not sure what this would triage under.

torch2424 on 13 Nov 2018

@jukefr You would also need to add allow-popups to the sandbox for _blank to work.

aghassemi on 14 Nov 2018

👍3 🎉1 😄1

Closing per comment above, please feel free to reopen if that does not solve your issue. Thanks.

aghassemi on 14 Nov 2018

Hello Everyone, i am having the same problem. My form submits but it do not show the errors in the form first if show the header error and then for the second time when i click submit then it shows the errors in the relevant field. It first show "There was a problem with your submission".