I'm trying to create a contact form in colorbox (overlay across the whole page) calling from an iframe. I got pretty much everything figured out except that the form won't submit and I lost the css style and everything after validation. What did I do wrong? Your help will be greatly appreciated. Thanks!!!
Here are the codes I have so far:
contactform.html
<body>
<form name="form1" method="post" action="sendmessages.php">
<input type="text" name="your_name" class="your-name" id="your-name" placeholder="your name">
<input type="text" name="email-address" class="email-address" id="email-address" placeholder="email address">
<textarea name="comments" class="comments" id="comments" placeholder="type your message here..."></textarea>
<input type="submit" value="submit" name="submit" class="submit">
</form>
colorbox-k.css
#colorbox, #cboxOverlay, #cboxWrapper{
position:absolute;
top:0;
left:0;
z-index:9999;
overflow:hidden;
}
#cboxOverlay{
position:fixed;
width:100%;
height:100%;
}
#cboxContent{
position: relative;
overflow:hidden;
}
#cboxLoadedContent{
overflow:hidden;
}
#cboxLoadedContent iframe{
display:block;
position:absolute;
width:100%;
height:100%;
border:0;
}
#cboxOverlay{background:url(../images/overlay.png) repeat 0 0;}
#colorbox{}
#cboxContent{
position:fixed;
width:536;
height:409;
}
#cboxClose{
display:block;
position:absolute;
top:0px;
left:0px;
background:url(../images/close.png) no-repeat 0 0;
width:31px;
height:31px;
padding: 0px;
border: 0px;
text-indent:-9999px;
}
body {
background: url(../images/envelope.png) center no-repeat;
display: block;
position: absolute;
width: 536px;
height: 409px;
z-index:12;
position: relative;
margin:auto;
}
input[type=text] {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
background-color:rgb(255,255,255);
color: #787474;
padding-left: 10px;
width:194px;
height:24px;
position: absolute;
border-color: #000000;
border-width:2px;
border-style:solid;
}
.comments {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
background-color:rgb(255,255,255);
color: #787474;
padding: 10px 0 0 10px;
width:414px;
height:140px;
border-color: #000000;
border-width:2px;
border-style:solid;
position: absolute;
top: 150px;
left: 54px;
}
.your-name {
position: absolute;
top: 104px;
left: 54px;
}
.email-address {
position: absolute;
top: 104px;
left: 272px;
}
.submit {
width: 70px;
height: 24px;
background: url(../images/send-btn.png) center no-repeat;
position: absolute;
top: 338px;
right: 54px;
padding: 0px;
border: 0px;
text-indent:-9999px;
}
.submit:hover{
background: url(../images/send-btnr.png);
}
.submit:active{
background: url(../images/send-btn.png);
}
sendmessages.php
<?php
// Comments
$message="$comments";
// Mail of sender
$mail_from="$email-address";
// From
$header="from: $your-name <$mail_from>";
// Enter your email address
$to ='mail@kitistproduction.com';
$send_contact=mail($to,$subject,$message,$header);
// Check, if message sent to your email
// display message "Thank you!"
// Check, if message sent to your email
// display message "Thank you!"
if($send_contact){
echo "<p style='background: url(../images/envelope_sent.png) center no-repeat;
display:block;
position:relative;
top: -6px;
left: -6px;
width:536px;
height:409px;
z-index:12;
margin:auto;
padding:0px;'></p>";
}
else {
echo "ERROR";
}
?>
SYNTAX ERROR
$email-address=$_POST['email-address'];
$your-name=$_POST['your_name'];
$header. = 'Content-type: text/html; charset=iso-8859-1' . "
";
$header.="From: " . $your-name <$email-address>."
";
