كيفية تخصيص نموذج الاتصال الخاص بك 7 نمط الطريق السهل
نشرت: 2022-04-10نموذج الاتصال هو عنصر مهم للغاية في كل موقع. نحن نستخدمها لجمع أنواع مختلفة من المعلومات ومشاركتها ، وبالتالي يتعين علينا الحرص على أنها تبدو تمامًا مثل باقي مواقع الويب الخاصة بنا . لا يمكن لنموذج الاتصال البسيط للغاية ، بأسلوب يبدو أنه لا ينتمي إلى الصفحة ، أن يغرس الشعور بالثقة في المستخدمين لديك ، وسيكون من المؤسف أن تفقد جمهورك فقط عندما أرادوا أن يأخذوه خطوة إلى الأمام وترك بعض بياناتهم في نموذج الاتصال الخاص بك.
هناك طريقة شائعة جدًا لإنشاء نموذج اتصال وهي باستخدام المكون الإضافي لنموذج الاتصال 7 ، وهي أداة عملية وسهلة الاستخدام يتم تضمينها غالبًا مجانًا مع العديد من سمات WordPress التي تتيح لك إنشاء جميع أنواع نماذج الاتصال بسهولة . يغطي هذا المكون الإضافي جميع الجوانب التقنية لإنشاء نموذج اتصال - لتصميمه ستحتاج إلى مهارات إضافية أو مكون إضافي آخر.
في هذه المقالة ، سنوضح لك مدى سهولة تصميم نماذج الاتصال الخاصة بك لتتناسب مع تصميم موقع الويب الخاص بك بأداة مجانية .
ابق على اتصال لمعرفة المزيد حول:
- استخدام ملحقات Qi للعنصر لتصميم نماذج الاتصال الخاصة بك
- تحديد نمط نموذج الاتصال
Qi Addons for Elementor عبارة عن مكون إضافي مجاني غني بالميزات يأتي مع 60 عنصر واجهة مستخدم ، ويتضمن عنصر واجهة مستخدم نموذج الاتصال 7 الذي تم إنشاؤه خصيصًا لمساعدتك في تصميم النماذج الخاصة بك. لا يتطلب البرنامج المساعد أي معرفة بالشفرات ويمكن لأي شخص استخدامه بشكل مريح حرفيًا. لا يوفر لك خيار إنشاء نموذج اتصال ، ولكن إذا كنت تستخدم المكون الإضافي لنموذج الاتصال 7 ، فستتمكن من خلال Qi من تخصيص وإعادة تصميم نماذجك بطريقة تتناسب تمامًا مع نمط موقع الويب الخاص بك.
من السهل تثبيت وتكوين Qi Addons for Elementor ، والإجراء مشابه تمامًا لأي مكون إضافي آخر.
بعد تثبيته ، انتقل إلى الصفحة حيث يوجد نموذج الاتصال الذي تريد تصميمه واختر تحريره في Elementor.
ثم اكتب Contact Form 7 في حقل البحث في القائمة اليمنى للعثور على عنصر واجهة مستخدم Contact Form 7.
الآن ، عندما تحصل عليه ، انقر فوقه وحوم فوق المكان الذي تريد أن يكون نموذج الاتصال الخاص بك فيه .
النموذج الذي تضيفه بهذه الطريقة هو النموذج الذي قمت بإنشائه باستخدام ملحق نموذج الاتصال 7 ، تم تصميم هذه الأداة فقط لمساعدتك على تصميم النموذج ، ولا يمكنك إنشاء نموذج به . لذلك ، لديك الآن نموذج الاتصال الخاص بك في المكان الذي تريده ، ويمكنك رؤية إعدادات عنصر واجهة مستخدم نموذج جهة الاتصال 7 في القائمة اليمنى.
توفر لك علامة التبويب الأولى في القائمة خيار اختيار نوع نموذج الاتصال الذي تريده على الصفحة . يمكننا الاختيار من بين ثلاثة خيارات - نموذج الاتصال 1 ، والنشرة الإخبارية ، والاتصال بنا ، يمكنك بالطبع اختيار أي من النماذج التي قمت بإنشائها مسبقًا لموقعك. دعنا الآن نوضح لك كيف قمنا بتخصيص نموذج "اتصل بنا" على موقعنا.
لفتح خيارات تصميم النموذج ، انقر فوق علامة التبويب "النمط ".
يشير الخيار الأول إلى طباعة التسمية ، حيث يمكنك ضبط الخط وحجم الخط والتباعد بين كلمات التسمية ونمط الخط والتباعد بين الأحرف في الكلمات والشيء الرائع هو أنك ستتمكن من رؤية جميع التغييرات عش على الفور حتى لا تفعل أي شيء بشكل أعمى .
في الصورة أدناه يمكنك أن ترى بدقة كيف تنعكس اختياراتنا على طباعة الملصق.
يشير الخيار التالي إلى لون الملصق .
يمكنك إنشاء الظل الخاص بك ، حسب احتياجاتك. نختار اللون الأزرق الداكن لملصقنا لأنه يتناسب بشكل جيد مع لون خلفية الصفحة.
الآن ، عندما يتم ضبط نمط الملصق ، تشير الإعدادات التالية إلى نمط الإدخال .
سيكون لديك أيضًا خيارات مماثلة هنا - يمكنك اختيار نمط خط الطباعة وحجمه ولونه . يمكنك أيضًا تعيين لون الخلفية لحقل الإدخال إذا كنت لا تريده أن يكون أبيض كما هو افتراضيًا. ستجد أيضًا إعدادات لضبط نمط الحدود لحقول الإدخال هنا ويمكنك الاختيار بين صلب أو متقطع أو مخدد أو منقط أو مزدوج أو لا شيء ولكل خيار من الخيارات يمكنك إجراء تعديلات إضافية.
يمكنك أيضًا تعيين أنماط مختلفة عندما تكون حقول الإدخال نشطة . جميع الخيارات نفسها تحت تصرفك ، ولكن سيتم تطبيقها فقط عندما تكون حقول الإدخال نشطة.
تشير الإعدادات التالية إلى نمط مربع الاختيار . هذا العنصر الصغير مهم جدًا في نموذج الاتصال ويجب أن يبدو أنيقًا ويمكن الوصول إليه بسهولة لأن هذه هي الخطوة التي تقدم فيها نوعًا من الاختيار لمستخدمي موقع الويب الخاص بك.
باستخدام Qi ، ستجعل هذا العنصر يبدو مثاليًا بسهولة. يمكنك تعيين حجم إدخال مربع الاختيار ، ويمكنك ترك مساحة أكبر أو أقل بين مربعي الاختيار وكذلك بين مربعات الاختيار وحقول الإدخال الأخرى . يمكنك أن ترى بوضوح في الصورة أدناه كيف تؤثر اختياراتنا على نموذج الاتصال في هذه الحالة:
الإعدادات التالية التي من المهم معرفتها هي إعدادات Button Style .
يمكنك تغيير لون خلفية الزر ، وضبط الحدود حول الزر بحيث تكون بلون وأسلوب مختلفين (صلب ، متقطع أو منقط). يمكنك أيضًا تغيير لون النص في الزر عن طريق اختيار اللون المطلوب في خيار لون الزر. تظهر جميع التغييرات على الفور حتى تتمكن بسهولة من فهم أي من الإعدادات يشير إلى أي عنصر من عناصر نموذج الاتصال.
إذا كنت تريد تغيير نمط الزر عند التمرير ، فانقر فوق علامة التبويب النشطة وضبط الإعدادات - يمكنك ضبط لون تحوم الزر ولون خلفية تمرير الزر ولون حدود تمرير الزر وما إلى ذلك.
عندما تكون راضيًا عن شكل نموذج جهة الاتصال ، يمكنك الآن ضبط التباعد عن طريق فتح الإعدادات في علامة التبويب نمط التباعد . يمكنك ضبط التباعد لكل عنصر من عناصر نموذج الاتصال هنا.
تشير إعدادات النمط العام إلى نمط المحاذاة لنموذج الاتصال. يمكنك الاختيار بين محاذاة اليسار والوسط واليمين.
تسمح لك إعدادات نمط الخطأ بالتحكم في نمط رسالة الخطأ التي يتم عرضها عندما لا يقوم شخص ما بكتابة البيانات الصحيحة في النموذج. يمكنك ضبط موضع رسالة الخطأ والطباعة واللون بسهولة.
تسمح لك إعدادات نمط الاستجابة بضبط تفاصيل الردود التي تم إدراجها في نموذج جهة الاتصال. يمكنك التحكم في الخط ولون الخط وتعيين مساحة الاستجابة وهامش الاستجابة بالإضافة إلى نوع الحد.
هذا ما يبدو عليه النموذج بعد أن أرسل شخص ما الرسالة:
وبهذه الطريقة ، لديك نموذج اتصال أنيق على صفحتك ، جاهز للعمل من أجلك.
التفاف كل شيء
إن الشيء العظيم في Qi Addons for Elementor هو أنه يمكنك رؤية جميع التغييرات التي تجريها مباشرة حتى تتمكن من التنقل بسرعة عبر الخيارات المختلفة ومعرفة كيفية استخدامها بشكل حدسي. على الرغم من أن إضافة نماذج الاتصال ليست مهمة إبداعية بشكل خاص ، إلا أن هذا المكون الإضافي يسمح لك بأن تكون مبدعًا حتى في هذه الحالة. يمكن أن يؤثر مظهر نماذج الاتصال بشكل كبير على الطريقة التي ينظر بها المستخدمون إليك ، وإذا تمكنت من تقديم نفس المعيار في هذا القسم أيضًا ، فستكون إضافة كبيرة لموقعك على الويب وعلامتك التجارية وعملك.
نأمل أن تكون هذه المقالة مفيدة. إذا أعجبك ذلك ، فلا تتردد في الاطلاع على بعض هذه المقالات أيضًا!
- أفضل ووردبرس] مثل زر الإضافات يستحق الحصول عليها
- 4 طرق سهلة لإنشاء أزرار WordPress
- نصائح حول تصميم الزر: كيفية الحصول على نقرات من زوارك