في هذه المقالة سوف تتعرف على كيفية إنشاء نموذج باستخدام Elementor مجانًا.
على الرغم من أن أداة النموذج متاحة فقط على إليمنتور بروهذا لا يعني أنه لا يمكنك إضافة نموذج باستخدام النسخة المجانية من Elementor.
إذا كنت ترغب في تضمين نموذج في صفحة تم إنشاؤها باستخدام الإصدار المجاني من Elementor، فهناك طريقتان سنستكشفهما في هذه المقالة.
Elementorيُقدّم هذا البرنامج، بنسختيه المدفوعة والمجانية، أداتين لإنشاء النماذج: أداة HTML وأداة Shortcode. تُمكّنك أداة HTML من تضمين نموذج باستخدام كود HTML، بينما تُمكّنك أداة Shortcode من تضمين نموذج من إضافات النماذج التي تستخدم الرموز المختصرة، مثل Contact Form 7.
محتويات
قم بإنشاء نموذج باستخدام الإصدار المجاني من Elementor باستخدام أداة HTML في 7 خطوات
إنشاء نموذج باستخدام النسخة المجانية من Elementor أمر ممكن تمامًا، حتى لو لم يكن لديك إمكانية الوصول إلى أداة النموذج المتوفرة في النسخة الاحترافية. إحدى الطرق الفعّالة هي استخدام أداة HTML، التي تتيح لك تضمين نموذج باستخدام كود HTML.
الخطوة 1: أنشئ صفحة جديدة أو عدّل الصفحة الموجودة
للبدء، قم بإنشاء صفحة جديدة وتحريرها باستخدام Elementor (الصفحات -> إضافة). يمكنك أيضًا تعديل صفحة موجودة إذا كنت ترغب في ذلك.
إذا قررت إنشاء نموذج على صفحة جديدة، فتذكر أن تقوم بتكوين التخطيط بالنقر فوق رمز الترس الموجود أعلى صفحتك.
الخطوة 2: إعداد كود HTML للنموذج
للبدء، ستحتاج إلى كود HTML الخاص بالنموذج الخاص بك. إذا كانت لديك مهارات HTML، فيمكنك كتابة الكود بنفسك. خلاف ذلك يمكنك يمكنك العثور على العديد من قوالب نماذج HTML المجانية عبر الإنترنت. بمجرد أن يصبح كود HTML جاهزًا، انسخه وانتقل إلى الخطوة التالية.
الخطوة 3: إضافة قسم جديد في Elementor
في محرر Elementor، ابدأ بإنشاء قسم جديد في الصفحة التي تريد إدراج النموذج فيها. انقر على زر "+" لإضافة قسم.
ثم اختر التخطيط الذي يناسب النموذج الخاص بك.
الخطوة 4: أدخل أداة HTML
بعد إضافة القسم، ابحث عن أداة "HTML" في لوحة الأدوات على اليسار. اسحبها وأفلتها في القسم الذي أنشأته. تتيح لك هذه الأداة إدراج كود HTML مباشرةً في الصفحة.
الخطوة 5: الصق كود HTML الخاص بالنموذج
بعد تثبيت عنصر HTML، انقر على تبويب "المحتوى" الخاص به في اللوحة اليسرى. ثم الصق كود HTML الخاص بالنموذج في الحقل المخصص. سيظهر النموذج على الصفحة فورًا.
الخطوة 6: تخصيص النموذج وتصميمه
سيتخذ النموذج الذي دمجته تلقائيًا التصميم الأساسي لقالب ووردبريس الخاص بك. ومع ذلك، إذا كنت ترغب في تخصيصه بشكل أكبر، يمكنك إضافة CSS مخصص لضبط الألوان والهوامش والخطوط وغيرها. يتطلب هذا بعض المعرفة بـ CSS أو مساعدة مطور إذا لزم الأمر.
الخطوة 7: المعاينة والنشر
بعد دمج النموذج وتنسيقه، خذ وقتك لمعاينة الصفحة للتأكد من عرض كل شيء بشكل صحيح. اختبر النموذج للتأكد من أنه يعمل كما هو متوقع. عندما تكون راضيًا عن النتيجة، انشر الصفحة.
انظر أيضا: كيفية استخدام عناصر واجهة / قوالب Elementor مثل كتل Gutenberg
هناك شيء مهم يجب ملاحظته: إذا كان نموذج HTML الخاص بك يستخدم CSS خارجيًا أو صورًا أو JavaScript للتصميم، فتأكد من تحميل المجلدات التي تحتوي على ملفات CSS والصور وJavaScript إلى الدليل الجذر لموقع الويب الخاص بك.
يُعدّ استخدام أداة HTML لإنشاء نموذج في النسخة المجانية من Elementor حلاً بسيطاً ومرناً. ورغم أنه يتطلب جهداً أكبر قليلاً من أداة النموذج المتوفرة في النسخة الاحترافية، إلا أنه طريقة فعّالة لإضافة نماذج وظيفية إلى موقعك دون تكاليف إضافية.
من خلال الجمع بين إمكانيات Elementor وقليل من أكواد HTML، يمكنك إنشاء نماذج مصممة خصيصًا لتلبية احتياجاتك مع الحفاظ على التناسق البصري لموقعك.
قم بإنشاء نموذج Elementor مجاني باستخدام نموذج الاتصال 7 في 7 خطوات
يمكن إنشاء نموذج باستخدام الإصدار المجاني من Elementor بسهولة باستخدام ملف البرنامج المساعد الشهير لنموذج الاتصال 7. يقدم هذا البرنامج المساعد طريقة بسيطة وفعالة لتضمين النماذج في صفحات Elementor الخاصة بك دون الحاجة إلى أي معرفة بالبرمجة.
هناك العديد من إضافات النماذج الأخرى المتاحة، لكننا نوصي باستخدام Contact Form 7 لأنه الإضافة الأكثر شيوعًا لنماذج WordPress، وهو مجاني تمامًا.
الخطوة 1: تثبيت وتفعيل نموذج الاتصال 7
للبدء، عليك تثبيت وتفعيل إضافة Contact Form 7 على موقع ووردبريس الخاص بك. انتقل إلى لوحة تحكم ووردبريس، ثم انتقل إلى ملحقات> إضافةثم ابحث عن "Contact Form 7". بمجرد العثور على الإضافة، انقر على تثبيت الآنثم نشط بمجرد اكتمال التثبيت.
الخطوة 2: إنشاء نموذج جديد
بمجرد تنشيط البرنامج المساعد، يمكنك إنشاء نموذج. للقيام بذلك، انتقل إلى اتصل > إضافة جديد في لوحة تحكم WordPress الخاصة بك. قم بتسمية النموذج الخاص بك للتعرف عليه بسهولة لاحقًا.
افتراضيًا، يوفر لك نموذج الاتصال 7 نموذج اتصال أساسيًا يحتوي على حقول للاسم والبريد الإلكتروني والموضوع والرسالة. يمكنك استخدام هذا النموذج كما هو أو تخصيص حقوله لتناسب احتياجاتك.
لإضافة حقل جديد، ضع المؤشر في المنطقة التي تريد إضافة الحقل الجديد إليها (يمكنك وضعه أسفل أو أعلى حقل موجود). أضف تسمية لحقل النموذج الجديد بالتنسيق التالي: <label> votre label préféré </label>.
ضع المؤشر مباشرةً بعد اسم الحقل الذي تريد تعديله أو بعد آخر حقل موجود. ثم حدد نوع الحقل الذي تريد إضافته من علامة التبويب. بطللتحسين قابلية قراءة وتنظيم النموذج الخاص بك، يمكنك إدراج فاصل أسطر بعد كل حقل جديد، مما سيجعل النموذج أكثر وضوحًا ومتوافقًا مع الحقول الأخرى الموجودة.
املأ الحقول وانقر فوق أدخل العلامة (يمكنك ترك كل شيء كإعداد افتراضي).
سيقوم نموذج الاتصال 7 بإرسال الطلبات الواردة عبر نموذجك إلى عنوان بريد إلكتروني. يمكنك تحديد عنوان البريد الإلكتروني من علامة التبويب. البريد الإلكتروني.
يمكنك الانتقال إلى علامة التبويب الرسائل إذا كنت ترغب في استبدال الرسائل الافتراضية، يمكنك تخصيص الرسالة التي تظهر بعد أن يقوم زوارك بإرسال النموذج بنجاح، ورسالة الخطأ عند عدم إرسال النموذج، وما إلى ذلك.
انقر فوق الزر سجّل بمجرد الانتهاء من تحرير النموذج.
الخطوة 3: تخصيص النموذج
إذا كنت ترغب في تعديل أو إضافة حقول إضافية إلى نموذجك، يمكنك القيام بذلك مباشرةً من خلال واجهة Contact Form 7. يمكنك إضافة حقول لأرقام الهواتف، أو مربعات الاختيار، أو أي نوع آخر من البيانات التي تحتاجها. بعد الانتهاء من إجراء التغييرات، احفظ النموذج.
اقرأ دليلنا على: كيفية تخصيص نموذج نموذج الاتصال 7
الخطوة 4: احصل على الرمز القصير للنموذج
بعد إنشاء النموذج الخاص بك وتخصيصه، سيزودك نموذج الاتصال 7 برمز قصير فريد. يعد هذا الرمز القصير ضروريًا لدمج النموذج في صفحة Elementor. ما عليك سوى نسخ الرمز القصير الموجود أسفل اسم النموذج.
الخطوة 5: تضمين النموذج في Elementor
بعد حصولك على الرمز المختصر، افتح الصفحة التي تريد إضافة النموذج إليها باستخدام محرر Elementor. أضف قسمًا جديدًا أو حدد قسمًا موجودًا حيث تريد ظهور النموذج.
حدد موقع أداة "الرمز المختصر" في لوحة أدوات Elementor، ثم اسحبها إلى القسم المطلوب. الصق الرمز المختصر الذي نسخته سابقًا في الحقل المخصص.
الخطوة 6: تخصيص النموذج وتصميمه
سيتم ضبط نموذج Contact Form 7 المدمج في Elementor افتراضيًا على نمط قالب WordPress الخاص بك. إذا كنت ترغب في تخصيص مظهر النموذج بشكل أكبر، فيمكنك القيام بذلك عن طريق إضافة... عرف المغلق. يمكنك تغيير الألوان والهوامش والطباعة والمزيد لتكييف النموذج مع المظهر العام لموقعك.
اقرأ أيضا: كيفية تعطيل العنصر المنبثق على الهواتف الذكية
الخطوة 7: الاختبار والإصدار
قبل نشر صفحتك، تأكد من معاينة النموذج للتحقق من عمله بشكل صحيح. أرسل رسالة اختبار للتأكد من عمل جميع الميزات. بعد التأكد من ذلك، انشر الصفحة ليتمكن زوارك من الوصول إلى النموذج.
لذا ! باستخدام نموذج الاتصال 7 مع Elementor المجاني، يمكنك بسهولة إنشاء نماذج وظيفية دون إنفاق سنت واحد. تعتبر هذه الطريقة مثالية للمستخدمين الذين يريدون وظائف أساسية ولكن فعالة، مع الحفاظ على المرونة اللازمة لتخصيص النموذج الخاص بهم.
يمنحك نموذج الاتصال 7، مع Elementor، حلاً قويًا لالتقاط المعلومات الأساسية من زوار موقعك.
إذا كنت تريد تخصيصًا أسهل، فيمكنك مراجعة هذه المقالة حول كيفية القيام بذلك قم بتخصيص نموذج نموذج الاتصال 7 باستخدام الإضافات الأساسية والعنصر.
الأسئلة المتداولة: كيفية إنشاء نموذج باستخدام الإصدار المجاني من Elementor
هل يمكنني إنشاء نموذج باستخدام الإصدار المجاني من Elementor؟
نعم، يمكنك إنشاء نموذج باستخدام الإصدار المجاني من Elementor باستخدام أدوات HTML أو Shortcode. على الرغم من أن أداة النموذج محجوزة للإصدار Pro، إلا أن هناك بدائل مجانية فعالة.
ما هي طرق إنشاء نموذج في Elementor المجاني؟
يمكنك استخدام عنصر واجهة مستخدم HTML لتضمين نموذج HTML مباشرةً أو عنصر واجهة مستخدم الرمز القصير لتضمين نموذج تم إنشاؤه باستخدام مكون إضافي مثل نموذج الاتصال 7.
كيفية إضافة نموذج HTML إلى صفحة Elementor؟
استخدم أداة HTML في Elementor لإدراج كود HTML للنموذج الخاص بك. يمكنك لصق الكود مباشرة في حقل محتوى عنصر واجهة المستخدم.
هل أحتاج إلى معرفة لغة HTML لإنشاء نموذج باستخدام Elementor المجاني؟
على الرغم من أن ذلك يساعدك، إلا أنك لا تحتاج إلى مهارات HTML إذا كنت تستخدم مكونًا إضافيًا للنموذج مثل نموذج الاتصال 7، الذي ينشئ رموزًا قصيرة يسهل تضمينها.
كيفية تصميم نموذج تم إنشاؤه باستخدام Elementor المجاني؟
إذا كنت تستخدم نموذج HTML، فستحتاج إلى استخدام CSS لتصميمه. ترث النماذج التي تم إنشاؤها بواسطة المكونات الإضافية مثل Contact Form 7 نمط قالب WordPress الخاص بك، ولكن يمكنك أيضًا تخصيص النمط باستخدام CSS.
هل هناك أي مكونات إضافية مجانية لإنشاء النماذج باستخدام Elementor؟
نعم، تعد المكونات الإضافية مثل Contact Form 7 وWPForms Lite وNinja Forms من الخيارات المجانية الشائعة لإنشاء النماذج التي يمكنك تضمينها في Elementor.
كيفية دمج نموذج الاتصال 7 في صفحة Elementor؟
أنشئ النموذج الخاص بك في نموذج الاتصال 7، ثم انسخ الرمز القصير الذي تم إنشاؤه. استخدم أداة الرمز القصير الخاصة بـ Elementor لتضمين هذا النموذج في صفحتك.
ما هي القيود المفروضة على الإصدار المجاني من Elementor لإنشاء النماذج؟
لا يقدم الإصدار المجاني من Elementor أداة نموذج مخصصة. لإنشاء نماذج، ستحتاج إلى استخدام حلول مثل HTML أو الرموز المختصرة أو المكونات الإضافية الخارجية.
كيف يمكنني اختبار النموذج الذي تم إنشاؤه باستخدام Elementor؟
بعد تضمين النموذج الخاص بك في الصفحة، قم بمعاينة الصفحة باستخدام Elementor وأرسل اختبارًا للتأكد من أن النموذج يعمل بشكل صحيح.
هل من الممكن استخدام النماذج المتقدمة مع الإصدار المجاني من Elementor؟
بالنسبة للميزات المتقدمة، مثل الحقول الشرطية أو النماذج متعددة الخطوات، يوصى بالترقية إلى الإصدار Pro من Elementor أو استخدام المكونات الإضافية للنماذج مع الميزات المتقدمة في إصداراتها المجانية.
الموارد الأخرى ذات الصلة
- كيفية دمج ActiveCampaign مع Elementor
- كيفية دمج AWeber مع Elementor
- Elementor كيفية إضافة رسوم متحركة لوتي
- Elementor : كيفية إنشاء متتبع التقدم الرأسياحصل على Elementor Pro الآن !!!
خاتمة
هذا كل شيء! بهذا نختتم هذه المقالة التي تشرح كيفية إنشاء نموذج باستخدام النسخة المجانية من Elementor. إذا واجهت أي صعوبة في فهم الخطوات، فأخبرنا بذلك في التعليقات. تعليقات.
ومع ذلك ، يمكنك أيضا استشارة مواردنا، إذا كنت بحاجة إلى مزيد من العناصر لتنفيذ مشاريعك الخاصة بإنشاء مواقع الإنترنت ، من خلال الرجوع إلى دليلنا على وورد خلق بلوق أو واحد على ديفي: أفضل موضوع وورد في كل العصور.
ولكن في هذه الأثناء ، شارك هذا المقال على الشبكات الاجتماعية المختلفة.
...