46- كورس HTML للمبتدئين – إنشاء صفحة تواصل معنا تحتوي على نموذج بواسطة HTML

إنشاء صفحة “تواصل معنا” تحتوي على نموذج بواسطة HTML

تُعتبر صفحة “تواصل معنا” من الصفحات الأساسية في أي موقع إلكتروني، حيث تتيح للزوار التواصل مع أصحاب الموقع لطرح استفساراتهم أو تقديم اقتراحات. في هذا المقال، سنشرح كيفية إنشاء مثل هذه الصفحة باستخدام لغة HTML مع عرض أمثلة متعددة.

أساسيات إنشاء نموذج تواصل باستخدام HTML

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

مثال:
<title>تواصل معنا</title>


    <h1>تواصل معنا</h1>
    
        <label for=\"name\">الاسم:</label>
        


        
        <label for=\"email\">البريد الإلكتروني:</label>
        


        
        <label for=\"message\">الرسالة:</label>

        <textarea id=\"message\" name=\"message\" rows=\"4\" cols=\"50\"></textarea>

تحسين النموذج وإضافة عناصر إضافية

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

مثال:
<title>تواصل معنا</title>
    
        form {
            width: 300px;
            margin: 0 auto;
        }
    


    <h1>تواصل معنا</h1>
    
        <label for=\"name\">الاسم:</label>
        


        
        <label for=\"email\">البريد الإلكتروني:</label>
        


        
        <label for=\"phone\">رقم الهاتف:</label>
        


        
        <label for=\"subject\">الموضوع:</label>
        
            استفسار
            اقتراح
            شكوى
        


        
        <label for=\"message\">الرسالة:</label>

        <textarea id=\"message\" name=\"message\" rows=\"4\" cols=\"50\"></textarea>

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