Text + image

Embed

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نموذج التقديم عبر واتساب</title>
    <style>
        /* التنسيقات المخصصة لحاوية النموذج فقط (لضمان الاستقلالية) */
        
        /* التنسيقات الأساسية للخطوط والألوان */
        body {
            font-family: 'Droid Arabic Kufi', 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: transparent; /* إزالة خلفية الصفحة بالكامل */
        }
        
        /* ضبط حجم ومظهر حاوية النموذج نفسها */
        .application-form-wrapper {
            background-color: #ffffff; /* خلفية بيضاء للنموذج */
            padding: 30px;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* ظل خفيف وأنيق */
            max-width: 650px; /* العرض الأقصى للنموذج على الويب */
            width: 95%; /* استخدام 95% من العرض المتاح */
            margin: 20px auto; /* توسيط النموذج داخل أي حاوية في صفحتك */
            direction: rtl;
            text-align: right;
            border: 1px solid #e0e0e0; /* حد خفيف */
        }

        h2 {
            color: #128C7E;
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
        }
        
        /* تنسيقات الحقول والمجموعات */
        .form-group {
            margin-bottom: 18px;
        }
        label {
            display: block;
            margin-bottom: 6px;
            font-weight: bold;
            color: #333;
            font-size: 15px;
        }
        input[type="text"],
        input[type="number"],
        input[type="email"],
        textarea,
        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            box-sizing: border-box;
            font-size: 15px;
            max-width: 100%;
        }
        textarea {
            resize: vertical; 
            min-height: 80px;
        }
        
        /* تنسيق ملاحظة السعر */
        .note {
            background-color: #DCF8C6;
            padding: 12px;
            border-radius: 8px;
            margin-top: 15px;
            margin-bottom: 20px;
            color: #128C7E;
            font-weight: bold;
            text-align: center;
        }
        
        /* تنسيق زر الواتساب */
        #whatsapp-button {
            background-color: #25D366;
            color: white;
            padding: 14px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            width: 100%;
            font-size: 17px;
            font-weight: bold;
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }
        #whatsapp-button:hover {
            background-color: #128C7E;
        }
        .whatsapp-icon {
            margin-left: 8px;
            width: 18px;
            height: 18px;
        }
        
        /* تحسين التجاوبية للشاشات الصغيرة */
        @media (max-width: 600px) {
            .application-form-wrapper {
                padding: 15px;
                margin: 10px auto;
            }
            h2 {
                font-size: 22px;
            }
        }
    </style>
</head>
<body>
    <div class="application-form-wrapper">
        <h2>نموذج طلب التسجيل في الدورات التدريبية</h2>
        
        <div class="note">
            سعر الدورة الواحدة: **99,000 دينار عراقي**. يرجى ملء البيانات وإرسالها عبر واتساب لإكمال طلب التقديم.
        </div>

        <form id="applicationForm">
            
            <div class="form-group">
                <label for="full-name">الاسم الكامل للمتقدم: <span style="color: red;">*</span></label>
                <input type="text" id="full-name" required>
            </div>

            <div class="form-group">
                <label for="age">العمر (لغرض التصنيف): <span style="color: red;">*</span></label>
                <input type="number" id="age" min="16" max="60" required>
            </div>

            <div class="form-group">
                <label for="phone">رقم هاتف آخر للتواصل (غير الواتساب):</label>
                <input type="text" id="phone" placeholder="اختياري">
            </div>

            <div class="form-group">
                <label for="education-status">التحصيل الدراسي: <span style="color: red;">*</span></label>
                <select id="education-status" required>
                    <option value="" disabled selected>-- اختر الحالة --</option>
                    <option value="خريج">خريج</option>
                    <option value="طالب">طالب</option>
                </select>
            </div>

            <div class="form-group">
                <label for="major">التخصص (مثال: هندسة، إدارة، علوم): <span style="color: red;">*</span></label>
                <input type="text" id="major" required>
            </div>

            <div class="form-group">
                <label for="experience">هل لديك خبرة سابقة في مجال الدورة؟</label>
                <textarea id="experience" placeholder="اذكر أي خبرة سابقة أو معرفة بالشبكات/الفايبر (اختياري)"></textarea>
            </div>

            <div class="form-group">
                <label for="address">عنوان السكن المفصل (المحافظة/القضاء): <span style="color: red;">*</span></label>
                <input type="text" id="address" required>
            </div>

            <div class="form-group">
                <label for="email">البريد الإلكتروني (الإيميل):</label>
                <input type="email" id="email" placeholder="اختياري">
            </div>
            
            <div class="form-group">
                <label for="course">اختر دورة التدريب المتقدم عليها: <span style="color: red;">*</span></label>
                <select id="course" required>
                    <option value="" disabled selected>-- اختر الدورة --</option>
                    <option value="CCNA">CCNA</option>
                    <option value="اساسيات الفايبر اوبتك">أساسيات الفايبر اوبتك</option>
                    <option value="صيانة وتسليك المشروع الوطني (ميداني)">صيانة وتسليك المشروع الوطني (ميداني)</option>
                </select>
            </div>

            <button type="submit" id="whatsapp-button">
                إرسال طلب التقديم عبر واتساب
                <img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" alt="WhatsApp Icon" class="whatsapp-icon">
            </button>
        </form>
    </div>

    <script>
        document.getElementById('applicationForm').addEventListener('submit', function(e) {
            e.preventDefault(); 

            // جمع البيانات من الحقول
            const name = document.getElementById('full-name').value;
            const age = document.getElementById('age').value;
            const phone = document.getElementById('phone').value || "لم يُدخل"; 
            const education = document.getElementById('education-status').value;
            const major = document.getElementById('major').value;
            const experience = document.getElementById('experience').value || "لا توجد خبرة سابقة مذكورة"; 
            const address = document.getElementById('address').value;
            const email = document.getElementById('email').value || "لم يُدخل"; 
            const course = document.getElementById('course').value;
            const price = "99,000 دينار عراقي";
            const whatsappNumber = "9647838929924"; 

            // بناء رسالة الواتساب المهنية والمفصلة
            const message = `*طلب تسجيل جديد في الدورات التدريبية*\n\n` +
                            `*الدورة المختارة:* ${course}\n` +
                            `*سعر الدورة:* ${price}\n\n` +
                            `*البيانات الأساسية:*\n` +
                            `- الاسم: ${name}\n` +
                            `- العمر: ${age}\n` +
                            `- السكن: ${address}\n` +
                            `- رقم هاتف إضافي: ${phone}\n` +
                            `- البريد الإلكتروني: ${email}\n\n` +
                            `*المعلومات الأكاديمية والمهنية:*\n` +
                            `- التحصيل الدراسي: ${education}\n` +
                            `- التخصص: ${major}\n` +
                            `- الخبرة والمعرفة السابقة: ${experience}\n\n` +
                            `*الرجاء تأكيد التسجيل، وشكراً.*`;

            // تشفير الرسالة لضمان ظهورها بشكل صحيح في الرابط
            const encodedMessage = encodeURIComponent(message);

            // إنشاء رابط واتساب وفتحه
            const whatsappURL = `https://wa.me/${whatsappNumber}?text=${encodedMessage}`;
            window.open(whatsappURL, '_blank');
        });
    </script>
</body>
</html>

ايرث بغداد للاتصالات والانترنت

إيرث بغداد للاتصالات والإنترنت هي مزود خدمات إنترنت في العراق، وتحديدًا في محافظة الديوانية، وتعمل كوكيل معتمد لشركة إيرثلنك  ونقطة بيع معتمدة للمشروع الوطني 

