لإنشاء زر الموافقة على الإرسال في نموذج جهة الاتصال نستخدم تقنيات HTML وJavaScript

كيفية إنشاء زر الموافقة على الإرسال في نموذج جهة الاتصال

تعتبر نماذج الاتصال من العناصر الأساسية في أي موقع للويب حيث تمكن الزوار من التواصل مع مالكي الموقع بشكل فعال. واحد من العناصر المهمة في نماذج الاتصال هو زر الموافقة على الإرسال، الذي يشير إلى أن المستخدم يوافق على إرسال معلوماته. في هذا المقال، سنوضح كيف يمكننا إنشاء زر الموافقة على الإرسال باستخدام HTML وJavaScript.

الكود الأساسي لإنشاء النموذج

<form id="contactForm">
    <label for="name">الاسم:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">البريد الإلكتروني:</label>
    <input type="email" id="email" name="email" required>

    <label>
        <input type="checkbox" id="agreement" required>
        أوافق على معالجة بياناتي وفقًا لـ <a href="https://example.com/privacy-policy" rel="nofollow">سياسة الخصوصية</a>
    </label>

    <button type="submit">إرسال</button>
</form>

وظيفة JavaScript للتأكد من صحة النموذج

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

<script>
    document.getElementById('contactForm').onsubmit = function(event) {
        var agreementCheckbox = document.getElementById('agreement');
        if (!agreementCheckbox.checked) {
            alert('يجب عليك الموافقة على معالجة بياناتك.');
            event.preventDefault();
        }
    };
</script>

الخاتمة

إن إنشاء زر الموافقة على الإرسال في نموذج جهات الاتصال يعد خطوة أساسية في الحفاظ على الشفافية مع المستخدمين وزيادة الثقة. من خلال الكود البسيط أعلاه، يمكنك التأكد من أن المستخدمين قد وافقوا على شروط محددة قبل إرسال بياناتهم. لمزيد من المعلومات حول تصميم النماذج، يمكنك الاطلاع على <a href="https://www.w3schools.com/html/html_forms.asp" rel="nofollow">موقع W3Schools</a>.