How do I connect this to my existing Contact Form 7 forms?

In the Content tab, open Select Contact Form. It lists every form you created in Contact Form 7. Choose one and the widget displays it with your chosen design.

Will my form still send emails and work as configured in Contact Form 7?

Yes. The widget only changes how the form looks. Fields, email settings, messages and spam protection stay in Contact Form 7 and work as you set them up there.

Is the Contact Form 7 widget free?

Yes, the widget is part of the free Master Addons plugin, and Style One to Style Four are free. Style Five to Style Eleven need Master Addons Pro. Contact Form 7 itself is also free.

Do I need the Contact Form 7 plugin?

Yes. This widget styles Contact Form 7 forms, so the free Contact Form 7 plugin must be installed and active. Without it, the widget shows a “Contact Form 7 is Not Activated” notice.

What happens if I add a new field in the Contact Form 7 plugin?

Edit the form in Contact Form 7 and save. The widget shows the updated form, and your field and label styles apply to the new field because they target all text fields and labels. Refresh the Elementor editor if the preview does not update.

Do I need to know CSS to style my forms?

No for colors, borders, spacing and typography, which are all panel controls. Layout inside the form, such as putting two fields side by side, comes from your Contact Form 7 form markup.

نموذج الاتصال 7 عنصر واجهة المستخدم: نمط CF7 بدون CSS

تضع أداة نموذج الاتصال 7 في البرنامج الإضافي Master Addons المجاني أي نموذج قمت بإنشائه نموذج الاتصال 7 على صفحة Elementor وتتيح لك تصميمها من اللوحة. اختر النموذج، واختر شكلًا مختلفًا للتصميم، ثم اضبط الحاوية والعنوان والحقول والتسميات وزر الإرسال ورسائل الخطأ. لا يزال نموذج الاتصال 7 يتعامل مع الحقول ويرسل البريد الإلكتروني. أربعة أشكال مختلفة للتصميم مجانية وسبعة أخرى تأتي مع Master Addons Pro. تحتاج إلى تثبيت البرنامج الإضافي المجاني لنموذج الاتصال 7 وإنشاء نموذج واحد على الأقل.

كيفية إضافة نموذج الاتصال 7 إلى العنصر

أنت بحاجة إلى Elementor، مجانًا نموذج الاتصال 7 البرنامج المساعد والمكون الإضافي Master Addons المجاني.

قم بتثبيت نموذج الاتصال 7 وقم بإنشاء النموذج الخاص بك تحت الاتصال، إضافة جديد، مع الحقول وإعدادات البريد الإلكتروني التي تحتاجها.
تثبيت وتنشيط الإضافات الرئيسية من WordPress.org.
قم بتحرير صفحتك باستخدام Elementor وابحث في لوحة الأدوات نموذج الاتصال 7. اختر الشخص الذي يحمل شارة Master Addons.
في حدد نموذج الاتصال، اختر النموذج الخاص بك.
في الأسلوب، اختر تصميمًا مختلفًا (النمط من الأول إلى الرابع مجاني).
اضبط الحاوية والحقول والتسميات والزر والأخطاء، ثم أرسل رسالة اختبار على الصفحة المباشرة.

يتم تغطية كل إعداد في إعدادات عناصر واجهة المستخدم لنموذج الاتصال 7 مرشد.

اختلافات التصميم: 4 مجاني، 7 برو

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

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

نموذج الاتصال الخاص بالتصميم 7: نموذج Widget vs CSS vs Elementor Pro

هناك ثلاث طرق شائعة للحصول على نموذج جميل المظهر على موقع Elementor. وإليك كيفية المقارنة.

	واجهة مستخدم الإضافات الرئيسية CF7	Css مخصص على CF7	عنصر واجهة المستخدم لنموذج Elementor Pro
منشئ النموذج	نموذج الاتصال 7	نموذج الاتصال 7	مدمج في Elementor Pro
التصميم	ضوابط اللوحة و11 اختلافًا (4 مجانًا)	كتابة وصيانة CSS	ضوابط اللوحة
تكلفة	مجاني (7 اختلافات تحتاج إلى Pro)	حر	يحتاج العنصر برو
الأفضل ل	المواقع التي تستخدم بالفعل CF7	المطورين الذين يريدون السيطرة الكاملة	المواقع الموجودة على Elementor Pro التي تريد النماذج والإجراءات في مكان واحد

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

حاوية النموذج والعنوان

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

اضبط عرض النموذج على أقل من 100% لتوسيط النموذج الضيق في عمود عريض.
يعمل لون الحد العلوي كلكنة بسيطة فوق النموذج.
الحشو يعطي مساحة للنموذج داخل بطاقة ملونة.

الحقول والتسميات

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

يعمل عرض الحقل بالنسبة المئوية، وهو مفيد للتخطيطات المكونة من عمودين المضمنة في ترميز نموذج CF7 الخاص بك.
تحافظ مربعات الاختيار وأزرار الاختيار ومدخلات الملفات على المظهر الخاص بك أو تصميم CF7.
احتفظ بتباين كافٍ بين خلفية الحقل والنص لإمكانية الوصول.

إرسال الزر ورسائل الخطأ

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

الزر الافتراضي هو اللون الأرجواني (#6e00e9) مع نص أبيض، لذا قم بتعيين ألوان علامتك التجارية.
يؤدي إخفاء أخطاء الحقل إلى جعل النموذج أكثر ترتيبًا، لكن الزوار يعتمدون بعد ذلك على الرسالة على مستوى النموذج.
لا يوجد تحكم في أيقونة الزر. لإضافة واحدة، انظر كيفية إضافة رمز Font Awesome إلى زر إرسال نموذج الاتصال 7.

الأسئلة المتداولة لنموذج الاتصال 7

تعرف على الاستفسارات الأكثر طلبًا لدى المستخدمين حول نموذج الاتصال 7 وابحث عن الإجابات في مكان واحد.

كيف يمكنني ربط هذا بنماذج نموذج الاتصال 7 الموجودة لدي؟

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

هل سيستمر النموذج الخاص بي في إرسال رسائل البريد الإلكتروني والعمل كما تم تكوينه في نموذج الاتصال 7؟

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

هل أداة نموذج الاتصال 7 مجانية؟

نعم، الأداة جزء من البرنامج الإضافي Master Addons المجاني، والنمط من One إلى Style Four مجاني. يحتاج النمط الخامس إلى النمط الحادي عشر ماستر أدونز برو. نموذج الاتصال 7 نفسه مجاني أيضًا.

هل أحتاج إلى البرنامج المساعد لنموذج الاتصال 7؟

نعم. تقوم هذه الأداة بتصميم نماذج نموذج الاتصال 7، لذلك يجب تثبيت البرنامج الإضافي المجاني لنموذج الاتصال 7 وتنشيطه. بدونها، تعرض الأداة إشعار “Contact Form 7 غير نشط.

ماذا يحدث إذا أضفت حقلاً جديدًا في البرنامج المساعد Contact Form 7؟

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

هل أحتاج إلى معرفة CSS لتصميم النماذج الخاصة بي؟

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

عناصر واجهة المستخدم والملحقات الشائعة

إنشاء مواقع متطورة في وقت أقل.

منشئ الموضوع

منشئ النوافذ المنبثقة

منشئ القطعة

منشئ القائمة الضخمة

Css مخصص

العلامات الديناميكية

شروط العرض

مكتبة الأيقونات

الرسوم المتحركة

مجموعات القالب

أقسام جاهزة

النوافذ المنبثقة جاهزة

قوالب صفحة العنصر

رأس جاهز

تذييل جاهز

إدارة WP

محرر شريط الإدارة

تسجيل الدخول

جناح رولماستر

الكتل الرئيسية

أضواء WP

نموذج الاتصال 7 عنصر واجهة المستخدم: نمط CF7 بدون CSS

كيفية إضافة نموذج الاتصال 7 إلى العنصر

اختلافات التصميم: 4 مجاني، 7 برو

نموذج الاتصال الخاص بالتصميم 7: نموذج Widget vs CSS vs Elementor Pro

حاوية النموذج والعنوان

الحقول والتسميات

إرسال الزر ورسائل الخطأ

الأسئلة المتداولة لنموذج الاتصال 7

عناصر واجهة المستخدم والملحقات الشائعة

التشكل الزجاجي

إضافات الحاويات

أنماط

ناسخ البريد/الصفحة

شريط تقدم القراءة

انضم إلى 30،000+ من منشئي الويب الذين يثقون في الإضافات الرئيسية