PDA

View Full Version : Three little pigs and Buttons Conflict



Webiter
06-29-2012, 02:56 PM
I have three buttons on a Contact Form which is presented in a popup window.

This button <a href onclick="history.go()" class="link" alt="Refresh Code" /> is used to refresh a captcha code.

This button <input type="submit" name="submit" class="button" value="Submit Message" /> is form submit.

and this button <a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a> is used to close the popup or hide the form.

The form works fine when not in a popup. When in the popup all three buttons are hiding the form!

Why are all buttons doing the same thing?

The following presents part of the code and this link (http://www.validation.webitry.net/contact.php) shows the problem.



<form>
<fieldset>
<legend>Validate Form <span class="errors"><?php echo $codeErr ?></span></legend>
<span class="required">Required</span>
<center>
<img src="randomImage.php" alt="Captcha Image"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="code" class="data"/>
<!--Refresh Validate Code Button Facility-->
<div id="flip"><a href onclick="history.go()" class="link" alt="Refresh Code" /></a></div>
</center>
</fieldset>

<p><input type="submit" name="submit" class="button" value="Submit Message" /><a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a></p>
</form>

jscheuer1
06-29-2012, 03:36 PM
There may be some other way(s) of dealing with this but I think you either need a cookie or a different way of handling the CAPTCHA refresh and submit events.

What's happening is the natural state of the page is popup closed onload. If you submit, since nothing is listed as the action of the form, it submits to the page itself, reloading the page, hiding the popup, if you click to refresh the CAPTCHA, the page reloads, hiding the popup. And of course hitting the close button acts as expected, hiding the popup.

So, if you were to set a cookie when the Contact Form button is clicked, and use it to determine whether or not to hide the popup onload, you would be in business. Oh, and you would want to also delete said cookie when the popup was closed using the close button.

A better solution would probably be to use AJAX to fetch the updated CAPTCHA image, thus avoiding a page reload for that, and submitting the form to some other page, like a thank you/acknowledgement page, where you could optionally show what was submitted and/or tell the person how long they can expect to wait for a reply, etc.

However, using AJAX to update tha CAPTCHA might require updating other things as well in order for the CAPTCHA to continue working properly.

Here's the cookie method:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head><title>:: Contact Us with Popup ::</title>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type' />
<script type='text/javascript'>
var cook = {
set: function(n, v, d){ // cook.set takes (name, value, optional_persist_days) - defaults to session if no days specified
if(d){var dt = new Date();
dt.setDate(dt.getDate() + d);
d = '; expires=' + dt.toGMTString();}
document.cookie = n + '=' + escape(v) + (d || '') + '; path=/';
},
get: function(n){ // cook.get takes (name)
var c = document.cookie.match('(^|;)\x20*' + n + '=([^;]*)');
return c? unescape(c[2]) : null;
}
};
function show_popup(id) {
if (document.getElementById){
cook.set('popupopen', 1); //set session cookie
obj = document.getElementById(id);
if (obj.style.display == "none") {
obj.style.display = "";
}}}
function hide_popup(id){
if (document.getElementById){
cook.set('popupopen', '', -1); //delete cookie
obj = document.getElementById(id);
if (obj.style.display == ""){
obj.style.display = "none";
}}}
</script>
</head>

<body onload="if(cook.get('popupopen')){show_popup('my_popup');}">

<div id="my_popup" style="display:none; border:0px dotted gray; background-color:transparent; position:absolute; width:100%; height:100%; margin-left:auto; margin-right:auto;">
<!--Contents start here-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow"/>
<title>| :: New - PopUP - Form :: | </title>
<style type="text/css">
body{ margin:auto; padding:0px; font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#fff; background-color:#fff}#wrapper{ background-color:transparent; border:solid 0px #000; margin:auto;padding:1px; width:100%; height:100%}#contact_form_wrap{ background-color:#101a25; border:2px solid red; margin:0 auto; margin-top:30px; margin-bottom:30px; padding:10px; width:340px}#box_title{ float:left; width:180px; color:#fff; font-family:Verdana,Arial,Helvetica,sans-serif; font-size:12pt; font-weight:bold}h2{ color:#af1010;text-shadow:#000 1px 1px 1px; padding:5px 0 0 3px; background-color:yellow}.message{ font-weight:normal}.errors{ font-family:Arial,Helvetica,sans-serif; font-weight:normal; color:#af1010;font-size:85%; background-color:yellow}label{ font-size:12px; font-weight:bold}.required{ color:red; font-size:9px;float:right}input:hover{ background-color:#900; border:1px solid blue}textarea:hover{ background-color:#900; border:1px solid blue}input:focus{ background-color:#900; border:1px solid blue}textarea:focus{ background-color:#900; border:1px solid blue}.data{ padding:0px 0px 0px 12px; width:60px; height:20px; border:1px solid #e9e9e9; background-color:#303942; color:#fff}legend{ -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px}.textfield{ padding:5px 0 0 3px; width:330px; height:20px; border:1px solid #e9e9e9; background-color:#303942; color:#fff}.textarea{ padding:3px; width:330px; height:144px; border:1px solid #e9e9e9; background-color:#303942; font-family:Arial,Helvetica,sans-serif; font-size:12px; color:#fff}.button{ padding:3px 0 5px 0; width:175px; height:25px; border:none; background-color:#303942; font-weight:bold; cursor:pointer; color:#f1f1f1; font-family:Arial,Helvetica,sans-serif}.button:hover{ background-color:#f1f1f1; color:#333}fieldset{ width:317px; height:55px;background-color:#777; border:1px solid green}legend{ padding:0.2em 0.5em; border:2px solid green;background-color:#fff; color:green; font-size:90%; text-align:right}#flip{width:35px;height:35px;float:right;margin-right:40px}#flip a{background:url(./refreshSprite.jpg);display:block;width:35px;height:35px}#flip a.link{background-position:0px 0px}#flip a.link:hover{background-position:0 bottom}.X { float:right; font-size:16px; font-weight:bold; color:#fff}p.clear{ clear:both; height:0; padding:0; margin:0}
</style>
</head>
<body><!----------------------------------PAGE STARTS HERE---------------------------------------->
<div id="wrapper">
<div id="contact_form_wrap">
<div id="box_title">Contact Us Form</div><br /><br />
<!--<span class="message"></span>
-->
<form id="contact-form" method="post" action="/contact.php"/>

<p><label>Name: <span class="errors"></span><span class="required">Required</span>
<input type="text" name="name" autofocus="autofocus" class="textfield" value="" />
</label></p>

<p><label>Email: <span class="errors"></span> <span class="required">Required</span>
<input type="text" name="email" class="textfield" value="" />
</label></p>

<p><label>Phone: <span class="errors"></span> <span class="required">Required</span>
<input type="text" name="phone" class="textfield" value="" />
</label></p>

<p><label>Message: <span class="errors"></span> <span class="required">Required</span>
<textarea name="message" class="textarea" cols="45" rows="5"></textarea>
</label></p>

<fieldset>
<legend>Validate Form <span class="errors"></span></legend>
<span class="required">Required</span>
<center>
<img src="randomImage.php" alt="Captcha Image"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="code" class="data"/>
<!--Refresh Validate Code Button Facility-->
<div id="flip"><a href onclick="history.go()" class="link" alt="Refresh Code" /></a></div>
</center>
</fieldset>

<p><input type="submit" name="submit" class="button" value="Submit Message" /><a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a></p>
</form>
</div>
</div>
</body>
</html> <!--Contents end here-->
</div>
<h2>Click image to present Popup</h2>
<br />
<a href="javascript:show_popup('my_popup')"><img border='1' height='39' width='213' src='contact-us-button.png' alt="Contact Us"/></a>
</body>
</html>

Notes: Since the popup by default is hidden (display: none;), I changed the body onload to show it if the cookie is detected. Also, the coding style is a bit sloppy, prone to conflicts, I've made no attempt to clean that up.

Webiter
06-29-2012, 07:12 PM
Thanks for your detailed response and the cookie detail.
I think it makes sense to work without the captcha, so I have removed it.

The thank you message/page -Your message has been sent- is by way of a note that appears at the top of the form on completion of
the processing. It is coded into place like so in the html:
<div id="box_title">Contact Us Form</div><br /><br />
<?php if(isset($_GET['sent'])): ?><h2>Your message has been sent</h2><?php endif; ?>
<form id="contact-form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"/>

and managed like so by the php processor:
//use php's mail function to send the email
mail($email_to, $subject ,$emailMessage ,$header );
header('Location: '."http://www.validation.xxxxxxxx.net/contactform.php/?sent=yes");

When the processing presents the thank you page message the Close(X) hide form button is now disabled! It is also probable
that the page is no longer in the popup.
Would you have any thoughts on what is causing things to function in this way?

jscheuer1
06-30-2012, 03:57 AM
I didn't mean to say the CAPTCHA was a bad idea. It's just that if we were to refresh it via AJAX to avoid reloading the page for that, then there might be a need to do other things to make sure it still works as intended.


The close button doesn't work because:

http://www.validation.webitry.net/contactform.php/?sent=yes

has no javascript on it. That's controlled/determined by what contactform.php does/includes when it's loaded with a GET value of sent=yes.

Here:


It is also probable that the page is no longer in the popup.

you've kind of lost me. The page was never in the popup. The popup is on the page. The problem is that other things that were on the page before the message was sent are no longer there once it is.

If I could see the full PHP code of contactform.php, I can probably get the close button working again. But then what? At that point, if you do close it, there's nothing visible left. What else would you like to be there?

Webiter
06-30-2012, 10:13 AM
Thanks again.

Huh, contact forms are not easy. Adding a popup to the mix brings a new set of challenges. Yes, I removed the
captcha for the moment to simplify things a bit. Could go back there later.

I tried adding the javascript to the /contactform.php/?sent=yes page but to no effect!

When the popup presents with the form the background-color being transparent allows the webpage to be seen
in the background. ie when the Contact Us button is clicked on a webpage the Contact Form pops up. The webpage in the background is visible.

What I am trying to get to is.... when the Close(X) hides the form that the viewer just then sees the
webpage that the popup was called from.

The Contactform.php is as follows:



<?php

session_start(); // we must never forget to start the session
define("EMAIL", "xxxxxxxx@gmail.com");

$name="";
$email="";
$phone="";
$message="";
//$code="";
$nameErr="";
$emailErr="";
$phoneErr="";
$messageErr="";
//$codeErr="";
$messageErr="";
$message_text="";
$errors="";

if(isset($_POST['submit'])) {

include('validateClass.php');

//assign post data to variables
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$phone = trim($_POST['phone']);
$message = trim($_POST['message']);
//$code = trim($_POST['code']);

//start validating our form
$v = new validate();
$v->validateStr($name, "name", 3, 75);
$v->validateEmail($email, "email");
$v->validatePhone($phone, "phone");
$v->validateStr($message, "message", 10, 500);
// $v->validateCode($code, "code");

if(!$v->hasErrors()) {

$header = "From: $email\n" . "Reply-To: $email\n";
$subject = "A message from the Contact Form";
$email_to = EMAIL;
$todayis = date("l, F j, Y, g:i a") ;

$emailMessage = "Name: " . $name . "\n";
$emailMessage .= "Email: " . $email . "\n";
$emailMessage .= "Phone: " . $phone . "\n";
$emailMessage .= "Date: " . $todayis . "\n\n";
$emailMessage .= "Message: " . $message;

//use php's mail function to send the email
mail($email_to, $subject ,$emailMessage ,$header );
header('Location: '."http://www.validation.webitry.net/contactform.php/?sent=yes");

} else {
//set the number of errors message
$message_text = $v->errorNumMessage();

//store the errors list in a variable
$errors = $v->displayErrors();

//get the individual error messages
$nameErr = $v->getError("name");
$emailErr = $v->getError("email");
$phoneErr = $v->getError("phone");
$messageErr = $v->getError("message");
// $codeErr = $v->getError("code");
} //end of the error check
}
// end isset
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow"/>
<title>| :: New - PopUP - Form :: | </title>

<style type="text/css">
body {
margin:auto;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#ffffff;
background-color:#ffffff;
}
#wrapper{
background-color:transparent;
border:solid 0px #000000;
margin:auto;
padding:1px;
width:100%;
height:100%;
}
/*#content{
border:solid 3px #000000;
margin:20px;
padding:20px;
width:360px;
height:680px;
float:left;
}
#sidebar{
border:solid 3px #000000;
margin:20px;
padding:20px;
width:360px;
height:680px;
float:right;
}*/
#contact_form_wrap {
background-color:#101a25;
border:2px solid red;
margin:0 auto;
margin-top:30px;
margin-bottom:30px;
padding:10px;
width:340px;
}
#box_title
{
float:left;
width:180px;
color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12pt;
font-weight:bold;
}
/*style the sent response*/
h2{
color:#af1010;
text-shadow:#000000 1px 1px 1px;
padding:5px 0 0 3px;
background-color:yellow;
}
.message {
font-weight:normal;
}
/*style the error messages*/
.errors {
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
color:#af1010;
font-size:85%;
background-color:yellow;
}
label {
font-size: 12px;
font-weight:bold;
}
/*style the fields required*/
.required {
color: red;
font-size: 9px;
float:right;
}
/*style the input fields on hover*/
input:hover{
background-color: #900;
border: 1px solid blue;
}
textarea:hover{
background-color: #900;
border: 1px solid blue;
}
/*style the input fields on focus*/
input:focus {
background-color: #900;
border: 1px solid blue;
}
textarea:focus{
background-color: #900;
border: 1px solid blue;
}
/*style the input field for Validate Code*/
.data{
padding:0px 0px 0px 12px;
width:60px;
height:20px;
border: 1px solid #e9e9e9;
background-color:#303942;
color:#fff;
}
/*Special styles to corners*/
legend{
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px; /* future proofing */
}
.textfield {
padding:5px 0 0 3px;
width:330px;
height:20px;
border: 1px solid #e9e9e9;
background-color:#303942;
color:#fff;
}
.textarea {
padding:3px;
width:330px;
height:144px;
border: 1px solid #e9e9e9;
background-color:#303942;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#fff;
}
.button {
padding:3px 0 5px 0;
width:175px;
height:25px;
border: none;
background-color:#303942;
font-weight:bold;
cursor:pointer;
color: #f1f1f1;
font-family:Arial, Helvetica, sans-serif;
}
.button:hover {
background-color:#f1f1f1;
color: #333;
}
/*style the captcha panel*/
fieldset {
width:317px;
height:55px;
background-color: #777777;
border: 1px solid green;
}
legend {
padding: 0.2em 0.5em;
border:2px solid green;
background-color: #ffffff;
color:green;
font-size:90%;
text-align:right;
}
/*Refresh Validate Code Rollover*/
#flip {width: 35px; height: 35px; float:right; margin-right:40px;}
#flip a {background: url(./refreshSprite.jpg); display: block; width: 35px;height: 35px;}
#flip a.link {background-position: 0px 0px;}
#flip a.link:hover {background-position: 0 bottom;}
/* End of Rollover Control */

.X /*Close(X) to hide form popup*/
{
float:right;
font-size:16px;
font-weight:bold;
color:#fff;
}

p.clear
{
clear:both;
height:0;
padding:0;
margin:0;
}
</style>

</head>
<body>
<div id="wrapper">
<div id="contact_form_wrap">
<div id="box_title">Contact Us Form</div><br /><br />
<?php if(isset($_GET['sent'])): ?><h2>Your message has been sent</h2><?php endif; ?>

<form id="contact-form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"/>

<p><label>Name: <span class="errors"><?php echo $nameErr; ?></span><span class="required">Required</span>
<input type="text" name="name" autofocus="autofocus" class="textfield" value="<?php echo htmlentities($name); ?>" />
</label></p>

<p><label>Email: <span class="errors"><?php echo $emailErr ?></span> <span class="required">Required</span>
<input type="text" name="email" class="textfield" value="<?php echo htmlentities($email); ?>" />
</label></p>

<p><label>Phone: <span class="errors"><?php echo $phoneErr ?></span> <span class="required">Required</span>
<input type="text" name="phone" class="textfield" value="<?php echo htmlentities($phone); ?>" />
</label></p>

<p><label>Message: <span class="errors"><?php echo $messageErr ?></span> <span class="required">Required</span>
<textarea name="message" class="textarea" cols="45" rows="5"><?php echo htmlentities($message); ?></textarea>
</label></p>

<!--<fieldset>
<legend>Validate Form <span class="errors"><?//php echo $codeErr ?></span></legend>
<span class="required">Required</span>
<center>
<img src="randomImage.php" alt="Captcha Image"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="text" name="code" class="data"/>
<!--Refresh Validate Code Button Facility-->
<!--<div id="flip"><a href onclick="history.go()" class="link" alt="Refresh Code" /></a></div>
</center>
</fieldset>-->

<p><input type="submit" name="submit" class="button" value="Submit Message" /><a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a></p>
</form>
</div>
</div>
</body>
</html>

jscheuer1
06-30-2012, 03:28 PM
Unless it's on validateClass.php, there's still no javascript on that page. So, near the end:



<a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a>

throws an error and otherwise does nothing.

You say:


What I am trying to get to is.... when the Close(X) hides the form that the viewer just then sees the
webpage that the popup was called from.

But there is no popup called. The popup is hard coded on both the contact.php and Contactform.php pages. In the first case it's display none and reveled when the user hits the 'Contact Us' button or onload if the cookie is set. In the second it's just there right away, not hidden at all.

If you want the popup's close button on Contactform.php to return to contact.php, then change the above to:


<a href="contact.php"><span class="X">Close(X)</span></a>

GET data for whatever purpose(s) could be included if desired, and/or a cookie could first be set or deleted to determine whether or not the contact.php would then show the popup onload.

It should actually be possible though to combine contact.php and Contactform.php so that when contact.php successfully submits to itself, closing (hiding) the popup will leave the rest of the page there.

Either way (combined or separate contact pages), after a successful submission, the submit button should be disabled or removed from the form until it's closed and reopened, and if and when reopened, at least the message field should be empty.

Webiter
06-30-2012, 07:47 PM
Sorry to be running around the place on this. I have changed the contactform.php so that the validation
is done on the same page.

I found the concise php validation code in one of the other Dynamic Drive forum rooms. I was
hoping that it would afford the opportunity to get rid of the sent=yes arrangement on the previous form.
I think it has so it was worth changing.

I introduced a bit of the hide-popup javascript to the contactform page and I think that has resolved the Close(X) button issue.

When click send I get a mail in my inbox but none of the form input info...!

What I mean is, the following info arrived in the mailbox without any detail...!
Name:
Email:
Phone:
Date: Saturday, June 30, 2012, 8:36 pm

Message:

Is there anything obvious that is causing this?


so far the new contactform.php is as follows:


<?php
ini_set('display_errors', 1);
ini_set('log_errors', 1);
ini_set('error_log', dirname(__FILE__) . '/error_log.txt');
ERROR_REPORTING(E_ALL);
?>
<?php
// start the session
session_start();

//define variables and receiving email
$name=""; $email=""; $phone=""; $message="";

//validate form inputs
function check_posts() {
$found = array();
foreach ($_POST as $x => $y) {
if ($x == "check") break;
$conditions = array(
"name" => (strlen($y) < 5),
"phone" => (strlen($y) < 6),
"email" => (!filter_var($y, FILTER_VALIDATE_EMAIL)),
"message" => (strlen($y) < 10));
$errors = array(
"name" => "Valid Name ",
"phone" => "Valid phone only",
"email" => "Valid email only",
"message" => "Valid message only" );
if ($conditions[$x]) $found[] = $errors[$x];
}
$i = 1; if (count($found) > 0) {
foreach ($found as $z) { echo "<p>$i. $z</p>"; $i++; }
} else {
echo " Your message has been sent. ";
//end validation code
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow"/>

<title>| :: New - PopUP - Form :: | </title>

<style type="text/css">
body {
margin:auto;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#ffffff;
background-color:#ffffff;
}
#wrapper{
background-color:transparent;
border:solid 0px #000000;
margin:auto;
padding:1px;
width:100%;
height:100%;
}
#contact_form_wrap {
background-color:#101a25;
border:2px solid red;
margin:0 auto;
margin-top:30px;
margin-bottom:30px;
padding:10px;
width:340px;
}
#form_title
{
float:left;
width:180px;
color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12pt;
font-weight:bold;
}
/*style the sent response*/
h2{
color:#af1010;
text-shadow:#000000 1px 1px 1px;
padding:5px 0 0 3px;
background-color:yellow;
}
label {
font-size: 12px;
font-weight:bold;
}
/*style the fields required*/
.required {
color: red;
font-size: 9px;
float:right;
}
/*style the input fields on hover*/
input:hover{
background-color: #900;
border: 1px solid blue;
}
textarea:hover{
background-color: #900;
border: 1px solid blue;
}
/*style the input fields on focus*/
input:focus {
background-color: #900;
border: 1px solid blue;
}
textarea:focus{
background-color: #900;
border: 1px solid blue;
}
.textfield {
padding:5px 0 0 3px;
width:330px;
height:20px;
border: 1px solid #e9e9e9;
background-color:#303942;
color:#fff;
}
.textarea {
padding:3px;
width:330px;
height:144px;
border: 1px solid #e9e9e9;
background-color:#303942;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#fff;
}
.button {
padding:3px 0 5px 0;
width:175px;
height:25px;
border: none;
background-color:#303942;
font-weight:bold;
cursor:pointer;
color: #f1f1f1;
font-family:Arial, Helvetica, sans-serif;
}
.button:hover {
background-color:#f1f1f1;
color: #333;
}
.X /*Close(X) to hide form popup*/
{
float:right;
font-size:16px;
font-weight:bold;
color:#fff;
}
p.clear
{
clear:both;
height:0;
padding:0;
margin:0;
}

<script type='text/javascript'>
function hide_popup(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == ""){
obj.style.display = "none";
}}}
</script>
</style>

</head>
<body>
<div id="wrapper">
<div id="contact_form_wrap">
<div id="form_title">Contact Us Form</div><br />
<form id="contact-form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"/>
<p><label>Name: <span class="required">Required</span>
<input type="text" name="name" autofocus="autofocus" class="textfield" value="<?php echo htmlentities($name); ?>" />
</label></p>
<p><label>Email: <span class="required">Required</span>
<input type="text" name="email" class="textfield" value="<?php echo htmlentities($email); ?>" />
</label></p>
<p><label>Phone: <span class="required">Required</span>
<input type="text" name="phone" class="textfield" value="<?php echo htmlentities($phone); ?>" />
</label></p>
<p><label>Message: <span class="required">Required</span>
<textarea name="message" class="textarea" cols="45" rows="5"><?php echo htmlentities($message); ?></textarea>
</label></p>
<p><input type="hidden" name="check" value="c"><input type="submit" class="button" value="Send Message"><a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a></p>

<?php
if (isset($_POST["check"])) {
check_posts();
define("EMAIL", "mmmmmmm@gmail.com");
$header = "From: $email\n" . "Reply-To: $email\n";
$subject = "A message from the Contact Form";
$email_to = EMAIL;
$todayis = date("l, F j, Y, g:i a") ;
$emailMessage = "Name: " . $name . "\n";
$emailMessage .= "Email: " . $email . "\n";
$emailMessage .= "Phone: " . $phone . "\n";
$emailMessage .= "Date: " . $todayis . "\n\n";
$emailMessage .= "Message: " . $message;
mail($email_to, $subject, $emailMessage, $header );
}
?>
</form>
</div>
</div>
</body>
</html>

jscheuer1
07-01-2012, 08:17 AM
There's still no javascript on that page.

There is invalid HTML in at least one place:



<form id="contact-form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"/>

The form tag is not a self closing tag, but might be being partially closed by having that slash there. In any case, it can't do anything good, get rid of it.

As to the form being empty when submitted, that might have something to do with it.

But this is much more likely - Near the beginning there's:



//define variables and receiving email
$name=""; $email=""; $phone=""; $message="";

After that, no attempt is made to assign any values to those, yet they are used here:



<?php
if (isset($_POST["check"])) {
check_posts();
define("EMAIL", "mmmmmmm@gmail.com");
$header = "From: $email\n" . "Reply-To: $email\n";
$subject = "A message from the Contact Form";
$email_to = EMAIL;
$todayis = date("l, F j, Y, g:i a") ;
$emailMessage = "Name: " . $name . "\n";
$emailMessage .= "Email: " . $email . "\n";
$emailMessage .= "Phone: " . $phone . "\n";
$emailMessage .= "Date: " . $todayis . "\n\n";
$emailMessage .= "Message: " . $message;
mail($email_to, $subject, $emailMessage, $header );
}
?>

to send the message, so of course they're empty.

Missing is this (from a previous version I think):


//assign post data to variables
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$phone = trim($_POST['phone']);
$message = trim($_POST['message']);

It might be good to check if they're set before making those assignments, but I think you did that by checking if the form had been submitted or not, and it looks like you are doing that before validation. So that could go here:


<?php
if (isset($_POST["check"])) {
check_posts();
//assign post data to variables
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$phone = trim($_POST['phone']);
$message = trim($_POST['message']);
define("EMAIL", "mmmmmmm@gmail.com");
$header = "From: $email\n" . "Reply-To: $email\n";
$subject = "A message from the Contact Form";
$email_to = EMAIL;
$todayis = date("l, F j, Y, g:i a") ;
$emailMessage = "Name: " . $name . "\n";
$emailMessage .= "Email: " . $email . "\n";
$emailMessage .= "Phone: " . $phone . "\n";
$emailMessage .= "Date: " . $todayis . "\n\n";
$emailMessage .= "Message: " . $message;
mail($email_to, $subject, $emailMessage, $header );
}
?>

With or without that though, it looks like the mail, such as it is, gets sent regardless of whether or not it passes the check_posts function.

You could have check_posts return true or false:


//validate form inputs
function check_posts() {
$found = array();
foreach ($_POST as $x => $y) {
if ($x == "check") break;
$conditions = array(
"name" => (strlen($y) < 5),
"phone" => (strlen($y) < 6),
"email" => (!filter_var($y, FILTER_VALIDATE_EMAIL)),
"message" => (strlen($y) < 10));
$errors = array(
"name" => "Valid Name ",
"phone" => "Valid phone only",
"email" => "Valid email only",
"message" => "Valid message only" );
if ($conditions[$x]) $found[] = $errors[$x];
}
$i = 1; if (count($found) > 0) {
foreach ($found as $z) { echo "<p>$i. $z</p>"; $i++; }
return false;
} else {
echo " Your message has been sent. ";
return true;
//end validation code
}
}

Then down here tie continued processing of the mail to that value:


<?php
if (isset($_POST["check"])) {
$mailApproved = check_posts();
if($mailApproved){
//assign post data to variables
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$phone = trim($_POST['phone']);
$message = trim($_POST['message']);
define("EMAIL", "mmmmmmm@gmail.com");
$header = "From: $email\n" . "Reply-To: $email\n";
$subject = "A message from the Contact Form";
$email_to = EMAIL;
$todayis = date("l, F j, Y, g:i a") ;
$emailMessage = "Name: " . $name . "\n";
$emailMessage .= "Email: " . $email . "\n";
$emailMessage .= "Phone: " . $phone . "\n";
$emailMessage .= "Date: " . $todayis . "\n\n";
$emailMessage .= "Message: " . $message;
mail($email_to, $subject, $emailMessage, $header );
}
}
?>

Webiter
07-01-2012, 02:42 PM
Thanks John for the detailed reply. You are good to explain with appropriate detail.

It all seems to work now. Just a few questions to finish this aspect. (may go back to re-introducing the captcha
later in the week)

The following is the only javascript on page contactform.php


<script type='text/javascript'>
function hide_popup(id){
if (document.getElementById){
obj = document.getElementById(id);
if (obj.style.display == ""){
obj.style.display = "none";
}}}
</script>

Q1. I do not think that this needs to be working with the cookies....is this correct?

Q2. If input fields need correction on validation all input info is currently lost requiring complete fill
in of form. How is correct information retained in properly completed fields..?

Q3. How best might I go about styling the error output in this line echo "<p>$i. $z</p>"; $i++; within the php..?

Q4. When I try introducing a heading to the errors list it gets repeated over each of the errors notifications.!
Like when introducing something like { echo "<h2>Please address:</h2><p>$i. $z</p>"; $i++; } Is there a workaround.?

jscheuer1
07-01-2012, 04:18 PM
To fully work out both #1 and #2 below would take a bit of time. When I have a good block of time for it I will give it a shot and/or you can play around with the concepts. The other items can be done right away.

Always backup what you have before making a new page. Like backup what you have, add the items 3 and 4, test it, if it's working, back that up, play with items 1 and/or 2 backing up between significant working changes in that process.


That javascript will do nothing in response to the Close(X) link:



<a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a>

because there's no element by that id on the page. I think you want:


<a href="javascript:hide_popup('contact_form_wrap')"><span class="X">Close(X)</span></a>

But it seems pointless to hide the popup on an otherwise blank page where there's no way to bring it back if the user wants/needs to. This relates to my earlier idea of combining the two pages. And by that I didn't mean include one page in the other, as they are now that would result in invalid HTML and possibly conflicting javascript and/or PHP code. If the pages are combined, the code to open and close the popup would be on the page along with the button to open it and anything else (links, images, information) you want. At that point you might want/need the cookie, or it's functionality could possibly be handled via POST or GET data.


You would need to save valid data and insert it into the form. This was what I was talking about before, because I assumed you were already doing this, when I said that after successful submission, the submit button should be disabled. It would require additional code and/or changes in the PHP sections and a reordering of the second PHP section. It would have to come before the form or be split into two sections, one of which would come before the form, and the form would need to be populated from values (if any) determined valid from the PHP code.


A class name might be easiest:


foreach ($found as $z) { echo "<p class='invalidmessage'>$i. $z</p>"; $i++; }

Then you could style them from the stylesheet.


Instead of putting the heading in the foreach loop, place it before, yet still inside the conditional that determines if there are any errors. You should probably give it a class too for styling in the stylesheet:


$i = 1; if (count($found) > 0) {
echo "<h2 class='invalidheading'>Please address:</h2>";
foreach ($found as $z) { echo "<p class='invalidmessage'>$i. $z</p>"; $i++; }
return false;
} else {
echo " Your mess . . .

Webiter
07-01-2012, 10:22 PM
Thanks for the pointers. I have now grasped that the javascript does nothing as you say and I have removed it.

I notice that the <a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a> is working. This I cannot explain as you say
there's no element by that id on the page.

However when applied within the div like so at the top of the form:

<div id="form_title">Contact Us Form<a href="javascript:hide_popup('my_popup')"><span class="X">Close(X)</span></a></div> it is responding by hiding the popup.

Whereas when applied within the form like so at the bottom:

<p><input type="hidden" name="check" value="c"><input type="submit" class="button" value="Send Message"><a href="javascript:hide_popup('my-popup')"><span class="X">Close(X)</span></a></p> it does not responds but remains inactive!

Why so...?

jscheuer1
07-01-2012, 11:26 PM
Probably just a typo -

The one at the top (with an underscore) has the correct id:



javascript:hide_popup('my_popup')

The one at the bottom (with a dash) does not:



javascript:hide_popup('my-popup')

Anyways, give this version (probably still needs tweaking) a try:


<?php
// start the session
session_start();

ini_set('display_errors', 1);
ini_set('log_errors', 1);
ini_set('error_log', dirname(__FILE__) . '/error_log.txt');
ERROR_REPORTING(E_ALL);

//define variables and receiving email
$name=""; $email=""; $phone=""; $message="";

//for now assume the form has yet to be submitted and so of course has not yet been approved
$submitted = false;
$mailApproved = false;

//validate form inputs
function check_posts() {
$found = array();
foreach ($_POST as $x => $y) {
if ($x == "check") break;
$conditions = array(
"name" => (strlen($y) < 5),
"phone" => (strlen($y) < 6),
"email" => (!filter_var($y, FILTER_VALIDATE_EMAIL)),
"message" => (strlen($y) < 10));
$errors = array(
"name" => "Valid Name ",
"phone" => "Valid phone only",
"email" => "Valid email only",
"message" => "Valid message only" );
if ($conditions[$x]) $found[] = $errors[$x];
}
echo "<div id='checkPostsMsg'>";
$i = 1; if (count($found) > 0) {
echo "<h2 class='invalidheading'>Please address:</h2>";
foreach ($found as $z) { echo "<p class='invalidmessage'>$i. $z</p>"; $i++; }
echo "</div>";
return false;
} else {
echo " Your message has been sent. ";
echo "</div>";
return true;
}
}
//end validation code

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow"/>

<title>| :: New - PopUP - Form :: | </title>

<style type="text/css">
body {
margin:auto;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 12px;
color:#ffffff;
background-color:#ffffff;
}
#wrapper{
background-color:transparent;
border:solid 0px #000000;
margin:auto;
padding:1px;
width:100%;
height:100%;
}
#contact_form_wrap {
background-color:#101a25;
border:2px solid red;
margin:0 auto;
margin-top:30px;
margin-bottom:30px;
padding:10px;
width:340px;
}
#form_title
{
float:left;
width:180px;
color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12pt;
font-weight:bold;
}
/*style the sent response*/
h2{
color:#af1010;
text-shadow:#000000 1px 1px 1px;
padding:5px 0 0 3px;
background-color:yellow;
}
label {
font-size: 12px;
font-weight:bold;
}
/*style the fields required*/
.required {
color: red;
font-size: 9px;
float:right;
}
/*style the input fields on hover*/
input:hover{
background-color: #900;
border: 1px solid blue;
}
textarea:hover{
background-color: #900;
border: 1px solid blue;
}
/*style the input fields on focus*/
input:focus {
background-color: #900;
border: 1px solid blue;
}
textarea:focus{
background-color: #900;
border: 1px solid blue;
}
.textfield {
padding:5px 0 0 3px;
width:330px;
height:20px;
border: 1px solid #e9e9e9;
background-color:#303942;
color:#fff;
}
.textarea {
padding:3px;
width:330px;
height:144px;
border: 1px solid #e9e9e9;
background-color:#303942;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#fff;
}
.button, .dbutton {
padding:3px 0 5px 0;
width:175px;
height:25px;
border: none;
background-color:#303942;
font-weight:bold;
cursor:pointer;
color: #f1f1f1;
font-family:Arial, Helvetica, sans-serif;
}
.dbutton {
cursor: text;
cursor: not-allowed;
}
.button:hover {
background-color:#f1f1f1;
color: #333;
}
.dbutton:hover {
background-color:#303942;
border: none;
color: #f1f1f1;
}
.X /*Close(X) to hide form popup*/
{
float:right;
font-size:16px;
font-weight:bold;
color:#fff;
}
p.clear
{
clear:both;
height:0;
padding:0;
margin:0;
}
</style>

<script type='text/javascript'>
var cook = {
set: function(n, v, d){ // cook.set takes (name, value, optional_persist_days) - defaults to session if no days specified
if(d){var dt = new Date();
dt.setDate(dt.getDate() + d);
d = '; expires=' + dt.toGMTString();}
document.cookie = n + '=' + escape(v) + (d || '') + '; path=/';
},
get: function(n){ // cook.get takes (name)
var c = document.cookie.match('(^|;)\x20*' + n + '=([^;]*)');
return c? unescape(c[2]) : null;
}
};
function show_popup(id) {
cook.set('popupopen', 1); //set session cookie
var obj = document.getElementById(id);
if (obj.style.display == "none") {
obj.style.display = "";
}
}
function hide_popup(id){
cook.set('popupopen', '', -1); //delete cookie
var obj = document.getElementById(id), imsg,
sub = obj.getElementsByTagName('input');
if(sub.length){
sub = sub[sub.length - 1];
} else {sub = false;}
if (obj.style.display == ""){
obj.style.display = "none";
(imsg = document.getElementById('checkPostsMsg')) && imsg.parentNode.removeChild(imsg);
if(sub && sub.disabled){
sub.disabled = false;
sub.className = 'button';
document.getElementsByName('message')[0].value = '';
}
}
}
</script>

</head>
<body onload="if(cook.get('popupopen')){show_popup('contact_form_wrap');}">
<h2>Click image to present Popup</h2>
<br />
<a href="javascript:show_popup('contact_form_wrap')"><img border='1' height='39' width='213' src='http://www.validation.webitry.net/contact-us-button.png' alt="Contact Us"/></a>
<div id="wrapper">
<div id="contact_form_wrap" style="display: none;">
<div id="form_title">Contact Us Form
</div><br />
<?php
if (isset($_POST["check"])) {
$submitted = true;
$mailApproved = check_posts();
//assign post data to variables
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$phone = trim($_POST['phone']);
$message = trim($_POST['message']);
if($mailApproved){
define("EMAIL", "mmmmmmm@gmail.com");
$header = "From: $email\n" . "Reply-To: $email\n";
$subject = "A message from the Contact Form";
$email_to = EMAIL;
$todayis = date("l, F j, Y, g:i a") ;
$emailMessage = "Name: " . $name . "\n";
$emailMessage .= "Email: " . $email . "\n";
$emailMessage .= "Phone: " . $phone . "\n";
$emailMessage .= "Date: " . $todayis . "\n\n";
$emailMessage .= "Message: " . $message;
mail($email_to, $subject, $emailMessage, $header );
}
}
?>
<form id="contact-form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<p><label>Name: <span class="required">Required</span>
<input type="text" name="name" autofocus="autofocus" class="textfield" value="<?php echo htmlentities($name); ?>" />
</label></p>
<p><label>Email: <span class="required">Required</span>
<input type="text" name="email" class="textfield" value="<?php echo htmlentities($email); ?>" />
</label></p>
<p><label>Phone: <span class="required">Required</span>
<input type="text" name="phone" class="textfield" value="<?php echo htmlentities($phone); ?>" />
</label></p>
<p><label>Message: <span class="required">Required</span>
<textarea name="message" class="textarea" cols="45" rows="5"><?php echo htmlentities($message); ?></textarea>
</label></p>
<p><input type="hidden" name="check" value="c"><input type="submit" value="Send Message"<?php echo $mailApproved? ' class="dbutton" disabled' : ' class="button"'; ?>><a href="javascript:hide_popup('contact_form_wrap')"><span class="X">Close(X)</span></a></p>

</form>
</div>
</div>
</body>
</html>

jscheuer1
07-02-2012, 04:19 PM
Just in case you missed it, I added some new code to my last post showing one way of combining things with persistence of data when the form doesn't validate.

Webiter
07-02-2012, 05:09 PM
Hi John, the form version that you present works perfectly. No need for tweaking that. The calling page with
the Contact Us button (image) installed is now coded into the contactform.php page.

With the Contact Us (image) installed on the separate page situation facilitates the visitor calling the contact form.
That is... with the Contact Us image button installed on a webpage/s would facilitate the visitor in calling the popup
with the contactform.php form.

I can not see how this works with the Contact Us button coded into the contactform.php page!

I have tried working backwards to get your perfectly working form version to work when called by the Contact Us
button when installed on the separate contact.php page. In other words, as if calling the perfectly working form
version using the Contact Us button installed as if on a web page.

What ever I try currently breaks down! Can you get me back on track.

jscheuer1
07-02-2012, 05:48 PM
If you're asking how to put a contact us button on some other page and have it call this page with the form showing and ready to fill out. That should be fairly easy. Say the combined page is called contactform.php. From another page have a button that's linked:


<a href="contactform.php?contact=yes">contact image goes here</a>

And then add to the code in my previous post, where it has:


<body onload="if(cook.get('popupopen')){show_popup('contact_form_wrap');}">

Make that (addition highlighted):


<body onload="if(cook.get('popupopen') || <?php echo (isset($_GET['contact']) and $_GET['contact'] == 'yes')? 'true' : 'false'; ?>){show_popup('contact_form_wrap');}">

I'm also playing around with an idea of setting/getting session vars so that if the name or other data (email, phone, perhaps even message) are already known, they can be already be filled in.

BTW, the way it is currently it only remembers that stuff if the form is submitted. And will forget it if the page is navigated to afresh. Adding the use of session would make it remember even after that.

And it currently disables the submit button after a successful submission, re-enabling it if the popup is dismissed and called back, with all but the message data preserved. Whether or not to preserve the session message data would have to be coordinated with that logic or simply skipped.

Webiter
07-02-2012, 08:33 PM
Forgive me for prolonging this thing and also if I am loosing the plot!

I attach an image to help explain the result that I am seeking to achieve with the popup form. The image shows a
sample webpage in the background with the Contact Form popped up on top of it.

I am thinking much to simplified if I thought that a transparent wrapper on the popup page would allow view of the
background webpage.

Have I got the wrong end of the stick here?

ApacheTech
07-02-2012, 09:13 PM
For these types of popup forms, I tend to use the Javascript extension, Prototype Window Class, available from: http://prototype-window.xilinus.com/samples.html

It's an amazing addon that's fairly simple to use once you know the basics and highly extensible.

jscheuer1
07-03-2012, 04:57 AM
I was thinking, among other things, along those lines. But if I were to use a modal script for this I would want one more cross browser than that one apparently is.

But I don't fully understand the question yet. The code as is will do that for a single page. If you wanted to do that for several pages, a modal script is one way to go. But what we have is already a modal script, and from testing it's already fairly cross browser. To make it convenient to use on multiple pages, the css and javascript parts would be converted to external files. Much of the PHP and HTML (those parts that aren't already on a typical page) would become one or two includes. The javascript would, as I've mentioned, best be cleaned up a bit. I believe the css could use a little going over as well. And as I indicated, the PHP could possibly benefit from the use of session variables in addition to the post variables it already employs. Opening a session was already a part of the PHP code, but wasn't being used as far as I could tell.

The question is - Is this for one page or for use on multiple pages?

Webiter
07-03-2012, 08:53 AM
What I had in mind on commencement was a popup form that would be controlled or accessed from the Contact Us button on a websites navigation bar. That is, the form would be available and accessible from the navigation on each page of the website.

So I suppose that makes it a multiple page application. I just used the button image on one page as a aid to linking for the exercise.

ApacheTech
07-03-2012, 02:40 PM
How do you structure your navigation menu?

I mean, is it part of an included header or menu file that is prepended to each page, or is each page a full HTML file in it's own right?

The former option is the most preferable, as it means you can more easily add the intended script dynamically into each page as it's rendered.

Webiter
07-03-2012, 05:52 PM
Each page is a full HTML file in it's own right?

Have been looking around at modals!

ApacheTech
07-03-2012, 06:22 PM
By that, I meant that you don't use any <php include 'header.php'; ?> style features of PHP.

If you do, it will be easy to integrate another module into the site.

Webiter
07-04-2012, 11:13 AM
Still working of basic navigation like so:


<div class="nav">
<ol class="dropnav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">Raffle</a></li>
<li><a href="javascript:popup()">Tell a Friend</a></li>
<li><a href="contact.html">Contact</a></li>

</ol>
</div>

but must look into the <php include 'header.php'; ?> method!

jscheuer1
07-04-2012, 02:34 PM
I've broken this out into separate css, js and two include files:

contactform.css:


#contact_form_wrap {
background-color:#101a25;
border:2px solid red;
margin: 0;
padding:10px;
width:340px;
position: fixed;
_position: absolute;
top: 0;
left: 50%;
margin-left: -182px;
}
#contact_form_wrap #form_title
{
float:left;
width:180px;
color:#fff;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12pt;
font-weight:bold;
}
/*style the sent response*/
#contact_form_wrap div#checkPostsMsg {
color: white;
}
#contact_form_wrap h2.invalidheading{
color:#af1010;
text-shadow:#000000 1px 1px 1px;
padding:5px 0 0 3px;
background-color:yellow;
}
#contact_form_wrap p.invalidmessage{
color: white;
font-size: 12px;
}
#contact_form_wrap label {
font-size: 12px;
font-weight:bold;
}
/*style the fields required*/
#contact_form_wrap .required {
color: red;
font-size: 9px;
float:right;
}
/* style field label texts */
#contact_form_wrap .label {
float: left;
color: white;
}
/*style the input fields on hover*/
#contact_form_wrap input:hover{
background-color: #900;
border: 1px solid blue;
}
#contact_form_wrap textarea:hover{
background-color: #900;
border: 1px solid blue;
}
/*style the input fields on focus*/
#contact_form_wrap input:focus {
background-color: #900;
border: 1px solid blue;
}
#contact_form_wrap textarea:focus{
background-color: #900;
border: 1px solid blue;
}
#contact_form_wrap .textfield {
padding:5px 0 0 3px;
width:330px;
height:20px;
border: 1px solid #e9e9e9;
background-color:#303942;
color:#fff;
}
#contact_form_wrap .textarea {
padding:3px;
width:330px;
height:144px;
overflow: auto;
border: 1px solid #e9e9e9;
background-color:#303942;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#fff;
}
#contact_form_wrap .button, #contact_form_wrap .dbutton {
padding:3px 0 5px 0;
width:175px;
height:25px;
border-width: 0;
background-color:#303942;
font-weight:bold;
cursor:pointer;
color: #f1f1f1;
float: left;
font-family:Arial, Helvetica, sans-serif;
}
#contact_form_wrap .dbutton {
cursor: text;
cursor: not-allowed;
}
#contact_form_wrap .button:hover {
background-color:#f1f1f1;
color: #333;
}
#contact_form_wrap .dbutton:hover {
background-color:#303942;
border-width: 0;
color: #f1f1f1;
}
#contact_form_wrap .X /*Close(X) to hide form popup*/
{
float:right;
font-size:16px;
font-weight:bold;
color:#fff;
cursor: pointer;
}

contactjs.php:


<?php
Header("content-type: application/x-javascript");
?>
(function(){
var cook = {
set: function(n, v, d){ // cook.set takes (name, value, optional_persist_days) - defaults to session if no days specified
if(d){var dt = new Date();
dt.setDate(dt.getDate() + d);
d = '; expires=' + dt.toGMTString();}
document.cookie = n + '=' + escape(v) + (d || '') + '; path=/';
},
get: function(n){ // cook.get takes (name)
var c = document.cookie.match('(^|;)\x20*' + n + '=([^;]*)');
return c? unescape(c[2]) : null;
}
},
addEvent = (function(){return window.addEventListener? function(el, ev, f){
el.addEventListener(ev, f, false);
}:window.attachEvent? function(el, ev, f){
el.attachEvent('on' + ev, function(){f.call(el);});
}:function(){return;};
})(), obj;
addEvent(window, 'load', function(){
obj = document.getElementById('contact_form_wrap');
function show_popup() {
cook.set('popupopen'); //set session cookie
if (obj.style.display == "none") {
obj.style.display = "";
obj.style.top = ((window.innerHeight || document.documentElement.clientHeight) - obj.offsetHeight) / 2 + 'px';
}
}
function hide_popup(){
cook.set('popupopen', '', -1); //delete cookie
var imsg, sub = obj.getElementsByTagName('input');
if(sub.length){
sub = sub[sub.length - 1];
} else {sub = false;}
if (obj.style.display == ""){
obj.style.display = "none";
(imsg = document.getElementById('checkPostsMsg')) && imsg.parentNode.removeChild(imsg);
if(sub && sub.disabled){
sub.disabled = false;
sub.className = 'button';
document.getElementsByName('message')[0].value = '';
}
}
}
addEvent(document.getElementById('showcontactform'), 'click', function(e){
e = e || event;
e.preventDefault && e.preventDefault();
e.returnValue = false;
show_popup();
});
addEvent(document.getElementById('hidecontactform'), 'click', function(e){
e = e || event;
e.preventDefault && e.preventDefault();
e.returnValue = false;
hide_popup();
});
if(cook.get('popupopen') || <?php echo (isset($_GET['contact']) and $_GET['contact'] == 'yes')? 'true' : 'false'; ?>){
show_popup();
}
});
addEvent(window, 'resize', function(){
if (obj.style.display == ""){
obj.style.top = ((window.innerHeight || document.documentElement.clientHeight) - obj.offsetHeight) / 2 + 'px';
}
});
})();

contactformheader.inc:


<?php
// start the session
session_start();

ini_set('display_errors', 1);
ini_set('log_errors', 1);
ini_set('error_log', dirname(__FILE__) . '/error_log.txt');
ERROR_REPORTING(E_ALL);

//define variables and receiving email
$name=""; $email=""; $phone=""; $message="";

//for now assume the form has yet to be submitted and so of course has not yet been approved
$submitted = false;
$mailApproved = false;

//validate form inputs
function check_posts() {
$found = array();
foreach ($_POST as $x => $y) {
if ($x == "check") break;
$conditions = array(
"name" => (strlen($y) < 5),
"phone" => (strlen($y) < 6),
"email" => (!filter_var($y, FILTER_VALIDATE_EMAIL)),
"message" => (strlen($y) < 10));
$errors = array(
"name" => "Valid Name ",
"phone" => "Valid phone only",
"email" => "Valid email only",
"message" => "Valid message only" );
if ($conditions[$x]) $found[] = $errors[$x];
}
echo "<div id='checkPostsMsg'>";
$i = 1; if (count($found) > 0) {
echo "<h2 class='invalidheading'>Please address:</h2>";
foreach ($found as $z) { echo "<p class='invalidmessage'>$i. $z</p>"; $i++; }
echo "</div>";
return false;
} else {
echo " Your message has been sent. ";
echo "</div>";
return true;
}
}
//end validation code

?>

contactformfooter.inc:


<div id="contact_form_wrap" style="display: none;">
<div id="form_title">Contact Us Form
</div><br />
<?php
if (isset($_POST["check"])) {
$submitted = true;
$mailApproved = check_posts();
//assign post data to variables
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$phone = trim($_POST['phone']);
$message = trim($_POST['message']);
if($mailApproved){
define("EMAIL", "mmmmmmm@gmail.com");
$header = "From: $email\n" . "Reply-To: $email\n";
$subject = "A message from the Contact Form";
$email_to = EMAIL;
$todayis = date("l, F j, Y, g:i a") ;
$emailMessage = "Name: " . $name . "\n";
$emailMessage .= "Email: " . $email . "\n";
$emailMessage .= "Phone: " . $phone . "\n";
$emailMessage .= "Date: " . $todayis . "\n\n";
$emailMessage .= "Message: " . $message;
mail($email_to, $subject, $emailMessage, $header );
}
}
?>
<form id="contact-form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <!--[if lt IE 8]>
<br />
<![endif]-->
<p><label><span class="label">Name:</span> <span class="required">Required</span>
<input type="text" name="name" autofocus="autofocus" class="textfield" value="<?php echo htmlentities($name); ?>" />
</label></p>
<p><label><span class="label">Email:</span> <span class="required">Required</span>
<input type="text" name="email" class="textfield" value="<?php echo htmlentities($email); ?>" />
</label></p>
<p><label><span class="label">Phone:</span> <span class="required">Required</span>
<input type="text" name="phone" class="textfield" value="<?php echo htmlentities($phone); ?>" />
</label></p>
<p><label><span class="label">Message:</span> <span class="required">Required</span>
<textarea name="message" class="textarea" cols="45" rows="5"><?php echo htmlentities($message); ?></textarea>
</label></p>
<p><input type="hidden" name="check" value="c"><input type="submit" value="Send Message"<?php echo $mailApproved? ' class="dbutton" disabled' : ' class="button"'; ?>><a id="hidecontactform" href="javascript:hide_popup('contact_form_wrap')"><span class="X">Close(X)</span></a></p>

</form>
</div>

Due to space limitations, I will post a page that uses them in my next post.

jscheuer1
07-04-2012, 02:43 PM
Here's a typical page that uses them:


<?php
include 'contactformheader.inc';
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>| :: Some Page :: | </title>

<style type="text/css">
body {
margin:0;
padding:0px;
font-family:Arial, Helvetica, sans-serif;
font-size: 16px;
color:#000;
background-color:#ffffff;
}
#wrapper{
background-color:transparent;
border:solid 0px #000000;
margin:auto;
padding:1px;
height:100%;
}
h2{
color:#af1010;
text-shadow:#000000 1px 1px 1px;
padding:5px 0 0 3px;
background-color:yellow;
}
p.clear
{
clear:both;
height:0;
padding:0;
margin:0;
}
</style>
<link rel="stylesheet" href="contactform.css" type="text/css">
<script type='text/javascript' src="contactjs.php?contact=<?php echo isset($_GET['contact'])? $_GET['contact'] : 'no'; ?>"></script>

</head>
<body>
<h2>Click image to present Popup</h2>
<br />
<a id="showcontactform" href="javascript:show_popup('contact_form_wrap')"><img border='1' height='39' width='213' src='http://www.validation.webitry.net/contact-us-button.png' alt="Contact Us"/></a>
<div id="wrapper">
<p>All kinds of content can go here here</p>
</div>
<?php
include 'contactformfooter.inc';
?>
</body>
</html>

You can load it up with content anywhere between the opening <body> tag and the footer include, the popup will show over that content. If some of that content is positioned, the popup's wrapper's z-index might need to be set in the contactform.css file. For example (addition highlighted):


#contact_form_wrap {
background-color:#101a25;
border:2px solid red;
margin: 0;
padding:10px;
width:340px;
position: fixed;
_position: absolute;
top: 0;
left: 50%;
margin-left: -182px;
z-index: 100;
}

Certain paths can be made absolute or network to facilitate site wide implementation.

As you can see, the js file has a PHP extension. It need not right now unless you want to be able to pass GET data to it. All I have it for is to get the data from the page as regards contact=yes, but this is handled by the cookie, so is not being used. So that logic could be removed and it could become an ordinary .js file.

The header include starts a session. In it's current form, that's not used but it was there in your original code. It could be used though to maintain some or all of the information in the form for subsequent instances of the form in the same PHP session. If the session start command is removed though, the include no longer needs to come before the DOCTYPE, only before the footer include, and could perhaps be combined with it.

There are probably still tweaks and/or explanations to be made, but this is a working model. Requires a standards invoking DOCTYPE.

Webiter
07-06-2012, 11:29 AM
Just tried it in the engine and walla..... it worked a treat. Now I know what you mean by disabling the send button. A super
result and thank you for your effort in getting the thing working. There was quite a bit more involved in getting it working
than what I anticipated on commencement. As well as being a great working tool it provided for a great learning
experience.:)

jscheuer1
07-06-2012, 05:34 PM
I just saw a typo in the javascript. Where I had:


cook.set('popupopen', 1); //set session cookie

It should be:


cook.set('popupopen'); //set session cookie

I've fixed it in the post where it's introduced. But your copy has it the 'old' way. The former set a 1 day cookie, the latter sets a browser session only cookie.