webbydesignerHello i had created a Quick contact form with HTML & PHP. I want this quick contact form on my sidebar in all pages of my wordpress site. i have created 5 files here contact.php, settings.php, process.php, validation.js & contactthanks.php
The code in contact.php is as below
<?php /* Template Name: Quick Contact */ ?>
<!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" />
<link rel="stylesheet" type="text/css" href="style.css"/>
<title>Contact Form</title>
<script src="lite_validation.js"></script>
<script>
required.add('Full_Name','NOT_EMPTY','Full Name');
required.add('Email_Address','EMAIL','Email Address');
required.add('Your_Message','NOT_EMPTY','Your Message')
</script>
<SCRIPT TYPE="text/javascript">
function numbersonly(myfield, e, dec)
{
var key;
var keychar;
if (window.event)
key = window.event.keyCode;
else if (e)
key = e.which;
else
return true;
keychar = String.fromCharCode(key);
// control keys
if ((key==null) || (key==0) || (key==8) ||
(key==9) || (key==13) || (key==27) )
return true;
// numbers
else if ((("0123456789").indexOf(keychar) > -1))
return true;
// decimal point jump
else if (dec && (keychar == "."))
{
myfield.form.elements[dec].focus();
return false;
}
else
return false;
}
</SCRIPT>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body{
font-size:62.5%;
font-family:Helvetica, sans-serif;
background-color:#FFF;
}
.msg-sent{
font-family:Helvetica, sans-serif;
font-size:16px;
color:#666;
margin-left:36px;
}
.contact-thanks{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#666;
margin-left:80px;
}
.contact-thanks:hover{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#8eb600;
}
p{
font-size:1.3em;
margin-bottom:15px;
}
#page-wrap{
background-color:#e9e9e9;
border:1px solid #bbbbbb;
width:300px;
margin:20px;
min-height:500px;
height:auto;
height:500px;
}
#contact-area{
width:300px;
margin-top:25px;
}
#contact-area input, #contact-area textarea{
padding:4px;
width:250px;
font-family:Helvetica, sans-serif;
font-size:1.4em;
margin:0px 0px 10px 0px;
float:right;
margin-right:18px;
border:2px solid #ccc;
}
#contact-area textarea{
height:90px;
}
#contact-area textarea:focus, #contact-area input:focus{
border:2px solid #8eb600;
}
#contact-area input.submit-button{
width:100px;
float:right;
margin-right:20px;
margin-top:10px;
background:#444;
color:#FFFFFF;
}
#contact-area input.submit-button:hover{
width:100px;
float:right;
margin-right:20px;
margin-top:10px;
background:#8eb600;
color:#FFFFFF;
}
label{
float:left;
text-align:left;
margin-left:20px;
width:100px;
padding-top:8px;
font-size:1.4em;
}
</style>
</head>
<body>
<div id="page-wrap">
<div id="contact-area">
<form method="post" action="lite_process.php" onsubmit="return validate.check(this)">
<label for="Full_Name">Full Name</label>
<input type="text" name="Full_Name" id="Full_Name" />
<label for="Telephone_Number">Phone</label>
<input type="text" name="Telephone_Number" id="Telephone_Number" maxlength="10" onKeyPress="return numbersonly(this, event)" />
<label for="Email_Address">Email</label>
<input type="text" name="Email_Address" id="Email_Address" maxlength="100" />
<label for="Best_Time">Preffered Time</label>
<select name="type" size="1" style="width:262px; float:right; margin-right:18px; padding:2px;">
<option>To Contact</option>
<option>08:00</option>
<option>09:00</option>
<option>10:00</option>
<option>11:00</option>
<option>12:00</option>
<option>13:00</option>
<option>14:00</option>
<option>15:00</option>
<option>16:00</option>
<option>17:00</option>
<option>18:00</option>
<option>19:00</option>
</select>
<label for="Your_Message">Message</label>
<textarea name="Your_Message" id="Your_Message" rows="20" cols="20"></textarea>
<input type="submit" name="submit" value="Submit Form" class="submit-button" />
</form>
<div style="clear:both;"></div>
</div>
</div>
</body>
</html>The code in settings.php is as below
<?php
$email_to = "youremailaddress@yourdomain.com"; // your email address
$email_subject = "Contact Form Message"; // email subject line
$thankyou = "contactthanks.php"; // thank you page
?>The code in process.php is as below
<?php
if(isset($_POST['Email_Address'])) {
include 'lite_settings.php';
function died($error) {
echo "Sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
if(!isset($_POST['Full_Name']) ||
!isset($_POST['Email_Address']) ||
!isset($_POST['Telephone_Number']) ||
!isset($_POST['Your_Message'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$full_name = $_POST['Full_Name']; // required
$email_from = $_POST['Email_Address']; // required
$telephone = $_POST['Telephone_Number']; // not required
$comments = $_POST['Your_Message']; // required
$error_message = "";
$email_exp = "^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$";
if(!eregi($email_exp,$email_from)) {
$error_message .= 'The Email Address you entered does not appear to be valid.<br />';
}
if(strlen($full_name) < 2) {
$error_message .= 'Your Name does not appear to be valid.<br />';
}
if(strlen($comments) < 2) {
$error_message .= 'The Comments you entered do not appear to be valid.<br />';
}
if(strlen($error_message) > 0) {
died($error_message);
}
$email_message = "Form details below.\r\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Full Name: ".clean_string($full_name)."\r\n";
$email_message .= "Email: ".clean_string($email_from)."\r\n";
$email_message .= "Telephone: ".clean_string($telephone)."\r\n";
$email_message .= "Message: ".clean_string($comments)."\r\n";
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
header("Location: $thankyou");
?>
<script>location.replace('<?php echo $contactthanks.php;?>')</script>
<?php
}
?>The code in validation.js is as below
function has_id(id){try{var tmp=document.getElementById(id).value;}catch(e){return false;}
return true;}
function has_name(nm){try{var tmp=cfrm.nm.type;}catch(e){return false;}
return true;}
function $$(id){if(!has_id(id)&&!has_name(id)){alert("Field "+id+" does not exist!\n Form validation configuration error.");return false;}
if(has_id(id)){return document.getElementById(id).value;}else{return;}}
function $val(id){return document.getElementById(id);}
function trim(id){$val(id).value=$val(id).value.replace(/^\s+/,'').replace(/\s+$/,'');}
var required={field:[],add:function(name,type,mess){this.field[this.field.length]=[name,type,mess];},out:function(){return this.field;},clear:function(){this.field=[];}};var validate={check:function(cform){var error_message='Please fix the following errors:\n\n';var mess_part='';var to_focus='';var tmp=true;for(var i=0;i<required.field.length;i++){if(this.checkit(required.field[i][0],required.field[i][1],cform)){}else{error_message=error_message+required.field[i][2]+' must be supplied\n';if(has_id(required.field[i][0])&&to_focus.length===0){to_focus=required.field[i][0];}
tmp=false;}}
if(!tmp){alert(error_message);}
if(to_focus.length>0){document.getElementById(to_focus).focus();}
return tmp;},checkit:function(cvalue,ctype,cform){if(ctype=="NOT_EMPTY"){if(this.trim($$(cvalue)).length<1){return false;}else{return true;}}else if(ctype=="EMAIL"){exp=/^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;if($$(cvalue).match(exp)==null){return false;}else{return true;}}},trim:function(s){if(s.length>0){return s.replace(/^\s+/,'').replace(/\s+$/,'');}else{return s;}}};The code in contactthanks.php is as below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<head>
<title>Thank You</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
body{
font-size:62.5%;
font-family:Helvetica, sans-serif;
background-color:#FFF;
}
.msg-sent{
font-family:Helvetica, sans-serif;
font-size:16px;
color:#666;
margin-left:36px;
}
.contact-thanks{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#666;
margin-left:80px;
}
.contact-thanks:hover{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#8eb600;
}
#page-wrap{
background-color:#e9e9e9;
border:1px solid #bbbbbb;
width:300px;
margin:20px;
min-height:500px;
height:auto;
height:500px;
}
</style>
</head>
<body>
<div id="page-wrap">
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<br /><br />
<span class="msg-sent">Your message has been sent</span><br /> <br />
<span class="msg-sent">We will get in touch with you soon!</span><br /> <br />
<p><a href="index.html" class="contact-thanks">Back to Contact Form</a></p>
</div>
<script type="text/javascript">
_uacct = "UA-68528-29";
urchinTracker();
</script>
</body>
</html>Am i on the right track of creating this process or should i do it in another process ? In which location should i upload these files. And what is the process of embedding this contact form on my sidebar. Please be brief & Help me out.
The blog I need help with is webbydesigner.wordpress.com.
auxclass
