ال نموذج الاتصال 7 العنصر بواسطة الإضافات الرئيسية عبارة عن أداة متخصصة تستخدم لدمج النماذج التي تم إنشاؤها باستخدام المكون الإضافي الشهير Contact Form 7 داخل جهازك وتصميمها تصاميم العنصر. يتيح لك ذلك الاستفادة من الوظائف القوية لـ CF7 مع الحصول على تخصيص مرئي قوي من خلال Elementor.
باستخدام عنصر نموذج الاتصال 7، يمكنك:
- يختار أي نموذج اتصال موجود 7 من القائمة المنسدلة.
- اختر من بين عدة اختلافات التصميم (النمط الأول خلال النمط الحادي عشر).
- التحكم في رؤية رسائل الخطأ و أخطاء التحقق.
- تخصيص كامل حاوية النموذج, حقول الإدخال ومنطقة النص, تسمياتو ال زر الإرسال ل عادي و تحوم تنص على.
- نمط عرض رسائل الخطأ والتحقق من الصحة.
لذلك، دعونا نرى كيفية إضافة وتخصيص هذا العنصر.
ما هي أداة نموذج الاتصال 7 في Elementor؟ #
أداة Contact Form 7 Elementor هي عنصر Master Addons يعرض أي نموذج Contact Form 7 موجود داخل Elementor ويمنحك التحكم البصري الكامل في تصميمه. فهو يحافظ على CF7 في التعامل مع منطق النموذج وتسليم البريد الإلكتروني، بينما تقوم بتصميم الحاوية وحقول الإدخال والتسميات وزر الإرسال ورسائل الخطأ من علامة التبويب Elementor's Style. تقوم Master Addons بشحن أحد عشر إعدادًا مسبقًا للتصميم (النمط من الأول إلى الرابع في المكون الإضافي المجاني، والنمط من الخامس إلى الحادي عشر في Pro)، حتى تتمكن من إعادة تصميم نموذج CF7 عادي ليتناسب مع موقعك دون كتابة أي CSS. إنه جزء من مجاني عناصر واجهة المستخدم والإضافات الرئيسية مكتبة. للحصول على نظرة عامة ومقارنة مع CSS وعنصر واجهة المستخدم Elementor Pro Form، راجع نموذج الاتصال 7 عنصر واجهة المستخدم العنصر صفحة.
إضافة وتكوين عنصر نموذج الاتصال 7 #
لإضافة نموذج نموذج الاتصال 7 المصمم في Elementor: قم بتحرير صفحتك باستخدام Elementor، واسحب نموذج الاتصال 7 القطعة على اللوحة القماشية، حدد النموذج الخاص بك من القائمة المنسدلة، واختر شكلًا مختلفًا للتصميم (النمط الأول إلى الرابع مجاني)، ثم قم بضبط الحاوية والحقول والملصقات وزر الإرسال في أسلوب علامة التبويب. الخطوات أدناه تمر عبر كل جزء بالتفصيل.
اتبع هذه الخطوات لإضافة عنصر نموذج الاتصال 7 وتكوينه على أي صفحة من صفحات موقع الويب الخاص بك.
الخطوة 1: إنشاء صفحة أو تحريرها #
- من لوحة تحكم WordPress الخاصة بك، انتقل إلى الصفحات → إضافة جديد لإنشاء صفحة جديدة. يمكنك أيضًا تحديد صفحة موجودة والنقر عليها يحرر.
- بعد ذلك، انقر فوق “تحرير باستخدام العنصرزر ”.
الخطوة 2: ابحث عن عنصر نموذج الاتصال 7 #
- في لوحة Elementor اليسرى، استخدم شريط البحث للعثور على “نموذج الاتصال 7.”
- اسحب الملحق وأسقطه في القسم الذي تريده من الصفحة.
الخطوة 3: تخصيص إعدادات نموذج الاتصال 7 #
بعد وضع الإضافة، ستجد أقسام التخصيص في اللوحة اليسرى، بشكل أساسي أسفل محتوى و أسلوب علامات التبويب.
علامة تبويب المحتوى #
هذا هو المكان الذي تحدد فيه النموذج وتحدد رؤية الخطأ.
نموذج الاتصال 7: #
- حدد نموذج الاتصال: اختر نموذج نموذج الاتصال 7 المحدد الذي ترغب في عرضه من القائمة المنسدلة.
- نمط الأخطاء (رسائل الخطأ / أخطاء التحقق): اختر ما إذا كنت تريد يعرض أو يخفي الإشعارات الموجودة ضمن الحقول الفردية (رسائل الخطأ) ورسالة التحقق من صحة النموذج (أخطاء التحقق).
تخطيط التصميم: #
- اختلافات التصميم: حدد نمطًا مصممًا مسبقًا للنموذج (النمط الأول خلال النمط الحادي عشر).
علامة تبويب النمط #
هذا هو المكان الذي تتحكم فيه في المظهر المرئي للنموذج وعناصره.
حاوية النموذج: #
- نوع الخلفية: اضبط نمط الخلفية لحاوية النموذج بأكملها كلاسيكي أو التدرج.
- اللون العلوي الحدودي: قم بتعيين لون للحد العلوي للحاوية.
- عرض النموذج (%) /حشو النموذج: التحكم في الحجم والتباعد الداخلي لحاوية النموذج.
عنوان: #
- اللون / المحاذاة / الطباعة: قم بتصميم عنوان النموذج (إذا كان موجودًا في بنية CF7).
منطقة الإدخال والنص: #
- لون الخلفية / لون النص: قم بتعيين الخلفية ولون النص لجميع حقول الإدخال ومنطقة النص.
- الحشو: ضبط التباعد الداخلي للحقول.
- عرض الحقل (%): ضبط الحجم الأفقي للحقول.
- نوع الحدود/نصف قطر الحدود: قم بتعيين نمط الحدود والزوايا المستديرة لحقول الإدخال.
التسميات: #
- اللون / الطباعة: قم بتصميم لون النص وإعدادات الخط لتسميات الحقول.
زر الإرسال: #
- طباعة الأزرار: التحكم في إعدادات الخط لنص الزر.
- عادي/يحوم: اضبط ما يلي للزر في كلتا الحالتين:
- نوع الخلفية
- لون النص
- لون الحدود
- نصف قطر الحدود / الحشو: اضبط الزوايا الدائرية والتباعد الداخلي للزر.
أخطاء: #
- رسائل الخطأ (تحت الحقول): قم بتصميم الإشعارات التي تظهر أسفل الحقول الفردية، مثل رسالة الحقل المطلوبة.
- لون النص / لون الخلفية / نوع الحدود.
- أخطاء التحقق (النموذج الكامل): قم بتصميم الرسالة على مستوى النموذج التي تظهر عندما يفشل الإرسال في التحقق من الصحة.
- لون الخلفية / لون النص / نوع الحدود.
الخطوة 4: حفظ ونشر صفحتك #
بمجرد تخصيص كل شيء حسب رغبتك:
- انقر فوق “ينشرزر ” (إذا كانت صفحة جديدة) أو “تحديث” (في حالة تحرير صفحة موجودة).
- اختبر إرسال النموذج ورسائل الخطأ الموجودة على الواجهة الأمامية لضمان تطبيق جميع الأنماط بشكل صحيح.
الأسئلة المتداولة #
كيف أقوم بتصميم نموذج الاتصال 7 في Elementor؟
أضف عنصر واجهة المستخدم Master Addons Contact Form 7 إلى صفحة Elementor الخاصة بك، وحدد النموذج الخاص بك من القائمة المنسدلة، ثم افتح علامة التبويب "النمط". ومن هناك يمكنك إعادة تصميم حاوية النموذج وحقول الإدخال ومنطقة النص والتسميات وزر الإرسال ورسائل الخطأ. يمكنك أيضًا اختيار إعداد مسبق للتصميم (أربعة مجانية، وسبعة أخرى تأتي مع Pro) لتخطي التصميم اليدوي.
هل أداة نموذج الاتصال 7 مجانية في الإضافات الرئيسية؟
نعم. أداة نموذج الاتصال 7 هي جزء من المجانية عناصر واجهة المستخدم والإضافات الرئيسية مكتبة. ما عليك سوى تثبيت البرنامج الإضافي المجاني لنموذج الاتصال 7 والإضافات الرئيسية وتنشيطها؛ لا يلزم وجود Elementor Pro. النمط الأول إلى النمط الرابع مجاني، والنمط الخامس إلى النمط الحادي عشر يحتاج إلى Master Addons Pro.
كم عدد أنماط تصميم نموذج الاتصال 7 التي تتضمنها الإضافات الرئيسية؟
تتضمن الإضافات الرئيسية أحد عشر نوعًا مختلفًا من التصميم، تحمل أسماء Style One إلى Style Eleven. النمط الأول إلى النمط الرابع مجاني، ويحتاج النمط الخامس إلى النمط الحادي عشر إلى Master Addons Pro. اختر واحدًا ضمن قسم تخطيط التصميم لتطبيق مظهر كامل على الفور، ثم اضبط الألوان والحدود والطباعة في علامة التبويب "النمط" لتتناسب مع علامتك التجارية.
هل يمكنني إضافة أيقونة Font Awesome إلى زر إرسال نموذج الاتصال 7؟
نعم. بالإضافة إلى تصميم الزر المدمج في هذه الأداة، يمكنك إضافة رمز إلى زر الإرسال باتباع دليلنا حول كيفية القيام بذلك قم بتطبيق أيقونة Font Awesome داخل زر إرسال نموذج الاتصال 7. إنه يقترن جيدًا بأنماط الزر العادي والتحليق التي قمت بتعيينها هنا.
لماذا لا يظهر تصميم نموذج الاتصال 7 الخاص بي في Elementor؟
يكون هذا دائمًا تقريبًا تخزينًا مؤقتًا أو تعارضًا في المكونات الإضافية. تأكد من أن كلاً من نموذج الاتصال 7 وMaster Addons نشطان، وتأكد من أنك تستخدم عنصر واجهة المستخدم Master Addons Contact Form 7 (وليس الرمز القصير CF7 العادي)، ثم قم بتطهير ذاكرة التخزين المؤقت لصفحتك وإعادة التحميل الثابت. يساعد أيضًا الحفاظ على الأصول هزيلة؛ انظر نصائحنا ل تسريع موقع Elementor الخاص بك.
