هذه طريقه فعالة ومجربه لعمل فورم إتصل بنا contact us باستخدام HTML و PHP و JQuery

الخطوة الأولى
انشاء صفحة HTML وسميها Contact.php او اي اسم ثاني المهم .php

وهذا هو الكود :

[html]

الاتصال بنا _ فواصل

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"><!–mce:0–></script>
<div id="contact-wrapper">
<!–?php if(isset($hasError)) { //If errors are found ?–>

الرجاء التأكد من جميع الفراغات

<!–?php } ?–>

<!–?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?–>

<strong>تم الارسال</strong>

شكراً <strong><!–?php echo $name;?–></strong> سيتم الرد عليك قريباً

<!–?php } ?–>
<form id="contactform" action="<?php echo $_SERVER['PHP_SELF']; ?><br />" method="post">
<div>
<label for="name"><strong>الإسم:</strong></label>
<input id="contactname" name="contactname" size="50" type="text" /></div>
<div>
<label for="email"><strong>البريد الالكتروني:</strong></label>
<input id="email" name="email" size="50" type="text" /></div>
<div>
<label for="subject"><strong>العنوان:</strong></label>
<input id="subject" name="subject" size="50" type="text" /></div>
<div>
<label for="message"><strong>الرسالة:</strong></label>
<textarea id="message" cols="50" rows="5" name="message"></textarea></div>
<input name="submit" type="submit" value="ارسال" />
</form></div>
[/html]

الخطوة الثانية

تنسيق الصفحة..نفتح صفحة جديدة بمحرر النصوص
ونسميه style.css
ونلصق الكود التالي

[html] body {
font-family:"arabic",Tahoma, sans-serif;
direction:rtl;
}
#contact-wrapper {
width:430px;
border:1px solid #e2e2e2;
background:#f1f1f1;
padding:20px;
float:right;
}
#contact-wrapper div {
clear:both;
margin:1em 0;
}
#contact-wrapper label {
display:block;
float:none;
font-size:16px;
width:auto;
}
form#contactform input {
border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style:solid;
border-width:1px;
padding:5px;
font-size:16px;
color:#333;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

}
form#contactform textarea {
font-family:"arabic", Tahoma, Helvetica, sans-serif;
font-size:100%;
padding:0.6em 0.5em 0.7em;
border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style:solid;
border-width:1px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}
form#contactform input:focus,
form#contactform input:hover{
-moz-box-shadow:0 0 8px black;
-webkit-box-shadow:0 0 8px black;
box-shadow:0 0 8px black;
}
form#contactform textarea:focus,
form#contactform textarea:hover {
-moz-box-shadow:0 0 8px black;
-webkit-box-shadow:0 0 8px black;
box-shadow:0 0 8px black;
{
[/html]

الخطوة الثالثة

الPHP
في اعلى صفحةcontact
نلصق الكود التالي

[html] < ?php
//If the form is submitted
if(isset($_POST['submit'])) {

//Check to make sure that the name field is not empty
if(trim($_POST['contactname']) == ”) {
$hasError = true;
} else {
$name = trim($_POST['contactname']);
}

//Check to make sure that the subject field is not empty
if(trim($_POST['subject']) == ”) {
$hasError = true;
} else {
$subject = trim($_POST['subject']);
}

//Check to make sure sure that a valid email address is submitted
if(trim($_POST['email']) == ”) {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$hasError = true;
} else {
$email = trim($_POST['email']);
}

//Check to make sure comments were entered
if(trim($_POST['message']) == ”) {
$hasError = true;
} else {
if(function_exists(‘stripslashes’)) {
$comments = stripslashes(trim($_POST['message']));
} else {
$comments = trim($_POST['message']);
}
}

//If there is no error, send the email
if(!isset($hasError)) {
$emailTo = ‘ضع بريدك هناااااااااااااااااااااا’; //Put your own email address here
$body = "الاسم: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
$headers = ‘من موقعي <’.$emailTo.’>’ . "\r\n" . ‘إعادة ارسال الى: ‘ . $email;

mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
}
?>
[/html]

والأن مع كود css

[html] body {
font-family:"arabic",Tahoma, sans-serif;
direction:rtl;
}
#contact-wrapper {
width:430px;
border:1px solid #e2e2e2;
background:#f1f1f1;
padding:20px;
float:right;
}
#contact-wrapper div {
clear:both;
margin:1em 0;
}
#contact-wrapper label {
display:block;
float:none;
font-size:16px;
width:auto;
}
form#contactform input {
border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style:solid;
border-width:1px;
padding:5px;
font-size:16px;
color:#333;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;

}
form#contactform textarea {
font-family:"arabic", Tahoma, Helvetica, sans-serif;
font-size:100%;
padding:0.6em 0.5em 0.7em;
border-color:#B7B7B7 #E8E8E8 #E8E8E8 #B7B7B7;
border-style:solid;
border-width:1px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
border-radius:8px;
}
form#contactform input:focus,
form#contactform input:hover{
-moz-box-shadow:0 0 8px black;
-webkit-box-shadow:0 0 8px black;
box-shadow:0 0 8px black;
}
form#contactform textarea:focus,
form#contactform textarea:hover {
-moz-box-shadow:0 0 8px black;
-webkit-box-shadow:0 0 8px black;
box-shadow:0 0 8px black;
}
[/html]