ادراج نموذج تواصل ضمن صفحة انترنت مع برمجية تحقق

في القسم السادس من دورة تصميم المواقع الشاملة، سنقوم بإدراج نموذج اتصال للتواصل مع الزبائن وزوار الصفحة. سيتم هذا الأمر عن طريق استخدام نموذج الاتصال الموجود أصلا في الصفحة، و سنقوم بربطه بصفحة php حتى تكون هذه الصفحة مسؤولة عن الارسال كالتالي:

أولا: ملف HTML

أولا نحن بحاجة لكود HTML يتم تضمينه ضمن صفحة index.html أو الصفحة التي ترغب بوضع النموذج فيها:

<!-- Kontakt form -->
<form name="htmlform" method="post" action="php/html_form_send.php">
	<table id="contact-form" dir="rtl">
		<tr><td><input type="text" name="first_name" placeholder="الاسم *" maxlength="50" size="30" required></td></tr>
		<tr><td><input type="text" name="last_name" placeholder="اللقب *" maxlength="50" size="30" required></td></tr>
		<tr><td><input type="email" name="email" placeholder="الايميل *" maxlength="80" size="30" required></td></tr>
		<tr><td><input type="text" name="telephone" placeholder="رقم الهاتف" maxlength="30" size="30"><br></td></tr>
		<tr><td><textarea name="comments" placeholder="رسالتك هنا *" maxlength="1000" cols="25" rows="6" required>
	 </textarea></td></tr>
	 <tr><td><input type="submit" value="ارسال"></td></tr>
	 </table>
 </form>
<!-- Kontakt Form -->

علينا أن ننتبه في النموذج السابقة الى الأمور التالية:

تتم معالجة النموذج عن طريق ملف PHP موجود ضمن مجلد باسم php حسب السطر البرمجي التالي:

<form name="htmlform" method="post" action="php/html_form_send.php">

في الكود التالي يتم ادراج حقل الادخال input الى النموذج مع ملاحظة كلمة required في نهاية السطر البرمجي وذلك لتنبيه متصفح الانترنت الى أن هذا الحقل مطلوب من المستخدم.

<input type="text" name="first_name" placeholder="الاسم *" maxlength="50" size="30" required>

مع الانتباه بالطبع الى أن هذه الميزة معتمدة فقط في متصفحي Firefox و Chrome أما بالنسبة للمتصفحات الباقية فهي تحتاج الى كود Javascript سيتم الحديث عنه في موضوع لاحق.


ثانيا: ملف CSS

وبالتأكيد لا تكتمل جمالية ملف HTML الا عن طريق اضافة تنسيق الكود البرمجي من خلال تعليمات CSS، بالطبع سأقوم بالنص البرمجي التالي بتنسيق فقط الحقول، أما تنسيق النموذج كاملا فبإمكانك التحكم به كما شئت:

input[type="text"], textarea {
	background-color: white;
	width: 80%;
	height: 40px;
	border: 1px solid #999;
	border-radius: 15px;
	margin: 5px 0;
	direction: rtl;
	padding: 0 20px;
	font-size: 14px;
	font-weight: bold;
}

textarea{
	height: auto;
}

ثالثا: ملف PHP

أما القسم الثاني فهو بالتأكيد لملف PHP الذي سيقوم بمعالجة النموذج وارساله

<?php
 header('Content-Type: text/html; charset=utf-8');
if(isset($_POST['email'])) {

    // قم بتعديل السطرين أدناه
    $email_to = "email@websitecom";
    $email_subject = "Email from :";

    $first_name = $_POST['first_name']; // required
    $last_name = $_POST['last_name']; // required
    $email_from = $_POST['email']; // required
    $telephone = $_POST['telephone']; // not required
    $comments = $_POST['comments']; // required
 
    $email_message = "Form details below.\n\n";

    function clean_string($string) {
      $bad = array("content-type","bcc:","to:","cc:","href");
      return str_replace($bad,"",$string);
    }
 
    $email_message .= "First Name: ".clean_string($first_name)."\n";
    $email_message .= "Last Name: ".clean_string($last_name)."\n";
    $email_message .= "Email: ".clean_string($email_from)."\n";
    $email_message .= "Telephone: ".clean_string($telephone)."\n";
    $email_message .= "Comments: ".clean_string($comments)."\n";
 
// create email headers
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);  
?>
 
<?php
    echo "<script type='text/javascript'>alert('شكرا لتواصلك، سيتم قراءة الرسالة والرد بأقرب وقت ممكن')</script>";
    echo "<script> window.location.assign('../index.html'); </script>";
?> 
 
<?php
}
?>

يجب ملاحظة الأمور التالية في كود php السابق:

السطر البرمجي التالي هو لإدراج حروف اللغة العربية ضمن المتصفح، ويتم اضافته حتى لا تحدث مشاكل عند وصول البريد الالكتروني للمستقبل:

header('Content-Type: text/html; charset=utf-8');

وطبعا ضمن النص البرمجي يجب تغيير البريد الالكتروني الذي سيتم وصول الرسائل اليه، بالاضافة الى عنوان الرسالة:

// EDIT THE 2 LINES BELOW AS REQUIRED
    $email_to = "email@website.com";
    $email_subject = "Email from :";

وضمن السطر البرمجي الأخير، قمت باضافة رسالة تنبيه بسيطة بواسطة جافا سكريبت، حتى تقوم بتنبيه المستخدم أنه تم ارسال الرسالة بنجاح، طبعا يمكن تغيير نص الرسالة حسب المطلوب:

<?php
    echo "<script type='text/javascript'>alert('شكرا لتواصلك، سيتم قراءة الرسالة والرد بأقرب وقت ممكن')</script>";
    echo "<script> window.location.assign('../index.html'); </script>";
?>

و بهذا نكون انتهينا تماما من انشاء نموذج تواصل ضمن صفحة موقع الانترنت مع برمجية تحقق HTML5

بامكانكم أيضا مشاهدة الدرس عن طريق الفيديو التالي
اذا استفدت من الدرس، قم بالاشتراك بقناة اليوتيوب ومتابعة كل جديد

8 thoughts on “ادراج نموذج تواصل ضمن صفحة انترنت مع برمجية تحقق

  1. ابومحمد رجب حسن Reply

    نشكرك جدا د. نور ولكن لي طلب او عدة طلبات
    1- التنقل بين الصفحات
    2- عملية الاشتراك بالموقع اما بالتسجيل به او بوسائل اخرى مثل فيسبوك او جيميل
    3- مشاركة اي محتوى باي صفحة عن طريق وسائل التواصل الاجتماعي

  2. sakhr Reply

    أستاذ نور بصراحة انت نعمة وجدت لنا كمبرمجين مبتدئين وبفضل الله ثم انت استطعنا اجتياز العديد من الأمور المعقدة التي لولا أجتهاداتك لما وصلنا إليها وفقك الله ونفع الأمة بك ، ولكن لدي أستفسار مهم جداً وارجو منك الرد علية بخصوص المقالات التي وضعتها في الموقع لاحظت ان هناك بجانب كل مقالة اسم وصورة الناشر بالأضافة إلى التاريخ وعدد القراءات لكل مقال وايقونات مواقع التواصل وهذا ما ابحث عنة تماما ولم اجد احد يفيدني في ذلك ارجو منك شاكرا ان تضع لنا درس عن عداد القراءات وايقونات مواقع التواصل وتاريخ المقالة والكلمات المفتاحية التي نشاهدها اسفل اغلب المواقع ، سأكون لك شاكراً وممتن

    لك خالص التقدير والأحترام

Leave a Reply

Your email address will not be published. Required fields are marked *