• Dubai, UAE
  • +971 54 408 4441
  • moe.rayan@gmail.com
اضافة فورم الاتصال بنا بتقنية popup

اضافة فورم الاتصال بنا بتقنية popup

في هذا الدرس سنشرح كيفية اضافة فورم الاتصال بنا (شرحنا بما سبق كيفية عمله) على المدونة (ووردبريس) بتقنية الpopup جي كويري
لمشاهدة الدرس السابق كيفية عمل فورم الاتصال بنا باستخدام الPHP و jQuery

مثال
في الاعلى..في شريط القائمة، اضغط على الاتصال بنا..ولاحظ تقنية الpopup 😉
قبل ما نبدأ شرح التركيب

نزل الملفات (صفحة الPHP وملف الستايل)

أولا
في لوحة التحكم الخاصة في الوورد بريس
نذهب الى المظهر>المحرر>header.php
ونضيف كود الphp في الاعلى بعد اغلاق وسم head

صورة لتوضيح مكان اضافة الكود

 
< ?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 = '3nkboot.management@gmail.com'; //Put your own email address here
$body = "name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
$headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
 
mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}
}
?>



ثـــانيــــاً
نضيف التالي
1.مكتبة الجيكويري
2.اضافة الvalidation
3.اضافة الpopup
4.ملف الستايل

كما أسلفنا في الدرس السابق، سبق وأضفنا 3 نقاط (مكتبة الجيكويري – اضافة الvalidation – ملف الستايل)

باقي اضافة الpopup
انزلها من هنا
اضغط هنا

كيف راح نربط الملفات بالهيدر؟
لربط مكتبة الجيكويري واضافة الvalidation
نكتب الكود التالي في وسم الهيد

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js" type="text/javascript"></script>




لربط ملف الستايل
اول شيء، نقوم برفعه الى ملف الCSS الخاص بالقالب المستخدم
ثم نكتب الكود التالي

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/css/general.css" />
</link>


لربط اضافة الpopup
نرفعها الى ملف القالب الرئيسي
ونكتب الكود التالي



اخر شيء في المرحلة الاولى
نضيف هذا الكود قبل نهاية وسم الهيد

 
<script type="text/javascript">
$(document).ready(function(){
$("#contactform").validate();
});
</script>

انتهينا من المرحلة الاولى
في ملف الheader.php
ننزل الى الاسفل حتى نرى هذا الكود

<ul>
<li><a href="<?php echo home_url(); ?>">الرئيسية</a></li>
< ?php wp_list_categories('title_li='); ?>
 
</ul>


ليس من الضروري ان يكون الكود مشابه 100%
نضيف عليه التالي

						<li><a id="button">الإتصال بنا</a></li>


ليصبح كالتالي

<ul>
<li><a href="<?php echo home_url(); ?>">الرئيسية</a></li>
< ?php wp_list_categories('title_li='); ?>
<li><a id="button">الإتصال بنا</a></li>
</ul>


أخيراً
في آخر ملف الheader.php
نكتب الكود التالي

 
<div id="popupContact">
<a id="popupContactClose">x</a>
<div id="contactArea">
<div id="contact-wrapper">
 
< ?php if(isset($hasError)) { //If errors are found ?>
<p class="error">الرجاء التأكد من جميع الفراغات</p>
< ?php } ?>
 
< ?php if(isset($emailSent) && $emailSent == true) { //If email is sent ?>
<p><strong>تم الارسال</strong></p>
<p>شكراً <strong>< ?php echo $name;?></strong> سيتم الرد عليك قريباً</p>
< ?php } ?>
 
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform">
<div>
<label for="name"><strong>الإسم:</strong></label>
<input type="text" size="41" name="contactname" id="contactname" value="" class="required" />
</div>
 
<div>
<label for="email"><strong>البريد الالكتروني:</strong></label>
<input type="text" size="41" name="email" id="email" value="" class="required email" />
</div>
 
<div>
<label for="subject"><strong>العنوان:</strong></label>
<input type="text" size="41" name="subject" id="subject" value="" class="required" />
</div>
 
<div>
<label for="message"><strong>الرسالة:</strong></label>
<textarea rows="5" cols="50" name="message" id="message" class="required"></textarea>
</div>
<input type="submit" value="ارسال" name="submit" />
</form>
</div>
 
 
 
 
 
 
</div>
</div>
<div id="backgroundPopup"></div>


بذلك نكون انتهينا والحمدلله
اذا كان لديكم أي استفسار، فإني متواجد بإذن الله 😀
أراكم لاحقاً 😛
تحياتي

14 رأي على “اضافة فورم الاتصال بنا بتقنية popup”

  1. fouad قال:

    طريقة رائعه ومميزة

  2. ahmed قال:

    طريقة رائعه ومميزة ولكان اريد تحميل الاستايل ولما اجده ممكن إعادة وضع رابط تحميل الاستايل ومكتبات الجاكيوري ومكتبات التحقق إذا ممكن

  3. ahmed قال:

    ترجو منكم إعادة وضع رابط تحميل مكتبات الجي كويري والاستابلات
    مكتبة الجيكويري – اضافة الvalidation – ملف الستايل)
    لانه عندي مشكلة في التحميل

  4. Alwadifa قال:

    الاضافة روعه بس معقده في التركيب

  5. طريقة رائعه ومميزة
    تم التطبيق بنجاح

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

      أهلا وسهلا..وشكراً على الاطراء 😀

  6. الاضافة روعه بس معقده في التركيب اكود وانا معرف استخدك الاكواد

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

      اخي قلي شو الصعب فيها؟ وانا بساعدك ولا يهمك

  7. تنبيه: غير معروف
  8. سلطان قال:

    والله طريقة رائعة ماشاء الله عليك

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

      الله يسلمك

أضف تعليقاً

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