How can I show a popup, then save the values the user enters to a database?

I am trying to change the dimensions, (width:“80%”, height:"80%) to relatively smaller popup. But when I try to change the width and height %, the popup never shows up. What am I missing? I am using text edit on mac (not yet received client’s details to test live), please help.

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>ColorBox demo</title>
    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
  </head>
  <body>
    <h1>Hello, there!</h1>
    <h2>This is some content</h2>
    <p>The popup will open in five seconds</p>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
    <script>
      function openColorBox(){
        $.colorbox({iframe:true, [B]width:"80%", height:"80%[/B]", href: "http://www.sitepoint.com"});
      }
      
      setTimeout(openColorBox, 5000);
    </script>
  </body>
</html>

[ATTACH=CONFIG]65602[/ATTACH]
I created a popup using pop architect. I would like to have the code for this.

  1. This need to popup on the homepage when page loads and the background dims 80%
  2. After someone register, the form values need to be saved in the existing database.
  3. I need another popup, thanking them for signing up.
  4. I need to send a confirmation email to their registered mail address.
    Please help.

Not sure.
This works for me:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>ColorBox demo</title>
    <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
  </head>
  <body>
    <h1>Hello, there!</h1>
    <h2>This is some content</h2>
    <p>The popup will open in five seconds</p>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
    <script>
      function openColorBox(){
        $.colorbox({iframe:true, width:"[B]60[/B]%", height:"[B]60[/B]%", href: "http://www.sitepoint.com"});
      }

      setTimeout(openColorBox, 1000);
    </script>
  </body>
</html>

This is a wish list.
I would suggest breaking this down into a set of smaller problems, doing some research and then coming back and asking concrete questions that can be answered.

Please excuse my coding. I am novice, trying to understand and trying to put things together. Please correct me where ever I am wrong.

  1. I need a popup window that pops when home page loads.

code - need to insert at home page

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Main page</title>
<link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example1/colorbox.css" />
</head>
<body>

<script src="http://mysite.html/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({iframe:true, width:”40%", height:”40%", href: "http://www.newsletter signup.html”,
overlayClose:false,
onLoad: function() {
$('#cboxClose').remove();});
}

setTimeout(openColorBox, 5000);
</script>
</body>
</html>

newsletter signup.html (the form):

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Newsletter Signup</title>
<link href="http://mysite.com/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<h1>Newsletter Signup</h1>

<form name="Mail_list" action="save.php" method="post">
<input type="submit" value="Submit Form">
</form>
</div>
</body>
</html>

save.php:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Thank you for Signing up!</title>
</head>
<body>
<p>Thank You! </p>
<?php
echo '<pre>';
print_r($_POST);
echo '</pre>';
?>

<script>setTimeout(function(){ window.parent.jQuery.colorbox.close(); }, 2000);</script>
</body>
</html>
  1. Another popup, thanking them for signing up:
    when I hit submit button how to store information to database and how to link it to Thankyou.html popup?

  2. Sending confirmation email to registered email address? not sure how.

Thank You!

You have your popup, so that’s step 1.

What about step 2. Do you have access to a database and can you write to it?

I don’t have access to the database yet.

Doesn’t that kind of make point 2 impossible?

Hi Pullo, thanks for your quick reply. I will soon get access to the database, once I have it, I will write here. Thanks.

Hi Pullo,

I have series of doubts, excuse me, I am trying to understand and thanks for helping me out.

  1. As I mentioned earlier, I am trying to design Popup newsletter subscription form when home page loads. You suggested Colorbox. To my understanding, I need to install / copy color box files to my hosting server and need to write above mentioned code in the home page. My question is, I need the popup to show in every page (About Us, home, contact us, Products and services, etc…) Is it possible, if yes, do I need to write the same code in every page (at header as well in the body)?

I will write about database soon. That is whole different issue. Thanks for your time.