🌟 مقدمة تحفيزية:
“مرحباً بك يا مبرمجنا المحترف ! لقد وصلت إلى المحطة الأخيرة في هذه الرحلة الممتعة . اليوم ، سنقوم ببناء نموذج تواصل ذكي (Smart Contact Form) . لماذا هو ذكي ؟ لأنه لن يرسل البيانات فحسب ، بل سيتفاعل مع المستخدم ، يتحقق من صحة بياناته، ويرحب به بشكل شخصي . هذا المشروع هو تطبيق عملي لما قد يحتاجه زوار موقعك في قسم الاستشارات القانونية أو التسجيل في الدورات . لقد أصبحت الآن جاهزاً لبناء أدوات حقيقية !”
🏗️ 1 . بناء النموذج (HTML)
سنقوم بإنشاء نموذج يطلب الاسم ، البريد ، ونوع الاستشارة :
HTML
<form id="contactForm">
<input type="text" id="userName" placeholder="ادخل اسمك الكامل" required>
<input type="email" id="userEmail" placeholder="بريدك الإلكتروني" required>
<button type="submit">إرسال الطلب</button>
</form>
<div id="responseMessage"></div>💻 2 . منطق التحقق والترحيب (JavaScript)
هنا ندمج الأحداث (Events)، الشروط (If)، و الـ DOM معاً :
JavaScript
document.getElementById("contactForm").addEventListener("submit", function(event) {
event.preventDefault(); // منع الصفحة من إعادة التحميل
let name = document.getElementById("userName").value;
let response = document.getElementById("responseMessage");
// التحقق من البيانات والترحيب
if (name.length < 3) {
response.innerHTML = "يرجى كتابة اسمك الصحيح (أكثر من 3 أحرف).";
response.style.color = "red";
} else {
response.innerHTML = `مرحباً بك يا ${name}! تم استلام طلبك في أكاديمية قياوي بنجاح. سنتواصل معك قريباً.`;
response.style.color = "green";
// إفراغ الخانات بعد النجاح
document.getElementById("contactForm").reset();
}
});⚖️ 3 . لماذا هذا المشروع هو “ختام الاحتراف” ؟
في موقع qiyaouiacademy.com، هذا المشروع يعلم الطالب :
- التحقق من البيانات (Validation) : التأكد من أن المستخدم أدخل معلومات صحيحة قبل إرسالها .
- تجربة المستخدم (UX) : إعطاء رد فعل فوري (Feedback) للزائر يجعله يثق في احترافية الموقع .
- الأمان البرمجي : منع إرسال النماذج الفارغة .
🎓 كلمة ختامية للوحدة :
“تهانينا يا بطل ! بإتمامك هذا المشروع ، تكون قد أنهيت وحدة ادخل الاحتراف . لم تعد مجرد شخص يعرف ‘ما هي البرمجة’ ، بل أصبحت شخصاً ‘يعرف كيف يبرمج’ . الأبواب الآن مفتوحة أمامك لبناء تطبيقات الويب المتكاملة” .
🎯 تحدي التخرج :
“يا محترف ، قم بإضافة ‘قائمة منسدلة’ (Select) في النموذج تحتوي على خيارات (برمجة ، قانون ، ذكاء اصطناعي) . اجعل رسالة الترحيب تتغير بناءً على المجال الذي يختاره الطالب !”
للتوضيح :
ما هو نموذج التواصل؟
نموذج التواصل هو استمارة يملؤها الزائر لإرسال رسالة إلى صاحب الموقع .
مثلاً يكتب :
-
اسمه
-
بريده الإلكتروني
-
رسالته
ثم يضغط إرسال .
يُستعمل في :
-
المواقع التعليمية
-
مواقع الشركات
-
المتاجر الإلكترونية
-
مواقع الخدمات
<!DOCTYPE html>
<html>
<head>
<title>نموذج التواصل</title>
</head>
<body>
<h2>اتصل بنا</h2>
<form>
الاسم:<br>
<input type="text"><br><br>
البريد الإلكتروني:<br>
<input type="email"><br><br>
الموضوع:<br>
<input type="text"><br><br>
الرسالة:<br>
<textarea rows="5" cols="30"></textarea><br><br>
<button>إرسال</button>
</form>
</body>
</html>شرح العناصر form يمثل النموذج الكامل . input يُستعمل لإدخال :
- الاسم
- البريد
- الموضوع
textarea يستعمل لكتابة رسالة طويلة . button زر إرسال الرسالة . الخطوة 2 : جعل النموذج ذكياً (Events) نضيف حدث عند الضغط على زر الإرسال . HTML
<button onclick="sendMessage()"> إرسال </button>
الخطوة 3 : كود التفاعل
HTML
<script>
function sendMessage(){
alert("تم إرسال رسالتك بنجاح، شكرا لتواصلك معنا");
}
</script>عند الضغط على الزر تظهر رسالة : تم إرسال رسالتك بنجاح
نموذج كامل :
<!DOCTYPE html>
<html>
<head>
<title>نموذج التواصل</title>
</head>
<body>
<h2>اتصل بنا</h2>
<form>
الاسم<br>
<input type="text"><br><br>
البريد الإلكتروني<br>
<input type="email"><br><br>
الرسالة<br>
<textarea></textarea><br><br>
<button onclick="sendMessage()">إرسال</button>
</form>
<script>
function sendMessage(){
alert("شكرا لتواصلك معنا");
}
</script>
</body>
</html>تحسين التصميم (اختياري)
<style>
body{
font-family:Arial;
}
input, textarea{
width:250px;
padding:8px;
margin:5px;
}
button{
padding:10px;
background-color:green;
color:white;
border:none;
}
</style>ماذا تعلمنا في هذا الدرس؟ إنشاء Form إدخال البيانات استعمال Events إنشاء نموذج تواصل حقيقي