Ok, so you’re displaying your form in an iframe using colorbox.
Say a user fills out the form with their details: wouldn’t it be best to let the form submit, then show some kind of “Submission successful” message, then let the user close the window (rather than closing it straight away)?
This way the user has some feedback, as to what is going on.
If you really, really want to close it automatically, you could do it like this:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Main Page</title>
<link rel='stylesheet' href='http://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/example1/colorbox.css'>
</head>
<body>
<h1>Main Page!</h1>
<p>Popup opens after 1 second</p>
<script src="http://fredgolfrange.com/colorbox/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox.js"></script>
<script>
function openColorBox() {
$.colorbox({
innerWidth:500,
innerHeight:300,
iframe:true,
href: "subscribe.html",
overlayClose:false,
onLoad: function() {
$('#cboxClose').remove();
}
});
}
setTimeout(openColorBox, 1000);
</script>
</body>
</html>
subscribe.html (the form):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Subscribe</title>
<link href="http://fredgolfrange.com/newsletterhome/mailinglist.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColFixCtr">
<div id="container">
<h1>My Signup Form</h1>
<form name="Mail_list" action="save.php" method="post">
<p>
<label for="first_name">First Name: </label>
<input type="text" name="first_name" id="first_name" size="25" autofocus required />
</p>
<p>
<label for="last_name">Last Name: </label>
<input type="text" name="last_name" id="last_name" size="25" required />
</p>
<input type="submit" value="Submit Form">
<input type="reset" value="Reset Form">
</form>
</div>
</body>
</html>
save.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Success</title>
</head>
<body>
<p>You submitted: </p>
<?php
echo '<pre>';
print_r($_POST);
echo '</pre>';
// Do your database stuff here
?>
<script>setTimeout(function(){ window.parent.jQuery.colorbox.close(); }, 1000);</script>
</body>
</html>
Here’s a demo.
In this example the colorbox window closes 1s after the form has been submitted, but in real life, you’ll want to check that the form values have been saved to the database before allowing it to shut.
You might also find this page useful: http://www.jacklmoore.com/colorbox/faq/#faq-parent
