Skip to content

Instantly share code, notes, and snippets.

@kevincolten

kevincolten/form.html

Created February 23, 2017 02:01
Show Gist options
  • Save kevincolten/cee04553bca8af860ae1bad01f85943d to your computer and use it in GitHub Desktop.
Save kevincolten/cee04553bca8af860ae1bad01f85943d to your computer and use it in GitHub Desktop.
Download ZIP
Iframe Post Message
Raw
form.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<form action="https://docs.google.com/forms/d/e/1FAIpQLScmQ6gDPn7zzVbICbNU4YVoFYf-bl0jS4dHVx0jX4kR7pTuTA/formResponse" method="POST" target="_self" onsubmit="">
<div class="form-group">
<label for="email">
<h4 class="card-title">Enter your email</h4>
</label>
<input class="form-control" type="text" id="email" name="entry.1205050431" value="">
</div>
<input type="hidden" name="draftResponse" value="[,,&quot;-869073862613074252&quot;]
">
<input type="hidden" name="pageHistory" value="0">
<input type="hidden" name="fbzx" value="-869073862613074252">
<label for="emailReceipt" style="display:inline;"></label>
<input class="btn btn-primary btn-block" type="submit" name="submit" value="Submit">
</form>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
$('form').submit(function() {
window.parent.postMessage("submitted", "*");
});
</script>
</body>
</html>
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<main class="container">
<div class="row justify-content-center">
<div class="card">
<div class="card-header">
Subscribe to our newsletter!
</div>
<div class="card-block">
<iframe src="form.html" style="border: none; height: 300px; width: 300px"></iframe>
<h2 style="display:none">Thanks!</h2>
</div>
</div>
</div>
</main>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<script type="text/javascript">
window.addEventListener("message", function(event) {
console.log(event);
if (event.data === 'submitted') {
$('iframe').remove();
$('h2').show();
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment