How to hide a iframe form when users click on submit button

Question

I have a google form iframe. I want to hide the iframe when users click on submit button. So the main content behind it can reveal. Thanks.

<h1>this is hidden content</h1>
<p>What is Lorem Ipsum?
Lorem Ipsum is simply dummy</p>
<div class="login">
<iframe name="target-iframe" src="https://docs.google.com/forms/d/e/1FAIpQLSc6XXOdWSJoHbfdUMRyOsVhap5r7-nR5nhdyWgZyOavYFz9bw/viewform?embedded=true" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>

/* Add display:none to login class to hide the form */

.login {
    position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
    background-color: white;
}

iframe {
  display: block;
  max-width: 100%;
  margin: auto;
  height: 100vh;
  z-index: 2;
}

https://codepen.io/TianxuanL/pen/mdWmbBK

It might help you: [https://stackoverflow.com/questions/13439303/detect-click-event-inside-iframe](https://stackoverflow.com/questions/13439303/detect-click-event-inside-iframe) — m24197, May 24 '21 at 09:24

score 1 · Answer 1 · answered May 23 '21 at 18:14

Short story: you cannot.

Iframes do not allow interaction to and from the parent page, unless they are in the same domain.

This is done by the browser for security reasons, so sadly you will have to figure a way around that, like maybe implementing a close button outside the iframe that hides it.

How to hide a iframe form when users click on submit button

1 Answers1