• Dubai, UAE
  • +971 54 408 4441
  • moe.rayan@gmail.com
كيفية عمل فورم الاتصال بنا باستخدام PHP,jQuery validation

كيفية عمل فورم الاتصال بنا باستخدام PHP,jQuery validation

السلام عليكم ورحمة الله

زوارنا الاعزاء..لقد صممت فورم الاتصال بنا

واستخدمت لغة الphp و jQuery وطبعاُ أكيد الHTML

وضفتها على موقعي تستطيع ان تعاينها فقلت لنفسي..لماذا لاأشارككم الفكرة 😀

صورة فورم الستجيل


لعمل مثله..

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

نعتذر من زوارنا الكرم للخلل الفني الذي حصل في أداة تظليل الاكواد
لذلك قد تم رفع الكود على شكل text
اضغط هنا للمشاهدة

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


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

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;
}


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

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

< ?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;
}
}
?>

وبذلك نكون انتهينا والحمدلله 🙂

هذا الكود كامل
نعتذر من زوارنا الكرم للخلل الفني الذي حصل في أداة تظليل الاكواد
لذلك قد تم رفع الكود على شكل text
اضغط هنا للمشاهدة




وهذا كود ال CSS

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;
}


ننصحك بمشاهدة
كيفية اضافة هذا الفورم على الوورد بريس بطريقة الpopup


تحياتي

12 رأي على “كيفية عمل فورم الاتصال بنا باستخدام PHP,jQuery validation”

  1. pc portable قال:

    بما انك تعرف تصميم قوالب الورد بريس
    هدا جيد لو تستطيع تصميم قوالب خاصة للادسنس
    هناك غربيين يربحون من تصميم قوالب الورد بريس تسمى النيش niche .

  2. pc portable قال:

    اعرف كيف احول الرسائل الي الوارد 🙂
    انا اخبرتك كي كل عضو مسجل باي نوع الايملات
    يصله اميلات الي الوارد لان غالب من الناس امسح
    الجنك مايل بدون تفكير او ملاحضة 🙂

    1. محمد ريان قال:

      أشكرك أخي الكريم،
      انا أعمل على تصميم قالب جديد لعنكبوت،
      سيتم اضافة قائمة بريدية فور الانتهاء

  3. محمد ريان قال:

    كلامك صحيح وسيتم أخذ كلامك بعين الاعتبار، نحن لدينا قائمة بريدية.
    ولكن لم أنشرها على الموقع
    اذهب الى junk ادخل على الايميل
    واختار
    safe email
    وستستلم اي ايميل منا بالinbox

  4. pc portable قال:

    أرسل لي تنبيه بأي تعقيب على تعليقي

    انا مسجل بي live ولاكن التعقيبات تدهب الي Junck

    المرجو عمل قائمة بريدية للمنتدى
    كاي يتم جمع اميلات الاعضاء تم الارسال لهم الجديد
    هكدا كل الاعضاء تدهب لهم الجديد الي انبوكس…
    http://www.feedburner.com

  5. محمد ريان قال:

    انا أستخدم الgmail ليس هنالك junk
    ماذا تقصد؟

  6. pc portable قال:

    مش مشكلة خد كل الوقت انا لست محتاج له الان اخي.

    ملاحضة الرسائل ادهب الي ^junck mail في الهتمايل.

  7. محمد ريان قال:

    ليش لأ
    ولا يهمك، سيتم ارساله على ايميلك، لكن بعد مدة من الوقت.;)

  8. pc portable قال:

    عمل جيد ولاكن ممكن كود غير معرب.

  9. تنبيه: غير معروف

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *