قم بإنشاء النماذج وتصميمها باستخدام عنصر واجهة المستخدم الخاص بنموذج Elementor

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

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

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

لقد قام Elementor بتضمين أداة النموذج لبعض الوقت الآن، مما يعني أنك لم تعد بحاجة إلى الذهاب إلى أي مكان آخر لإنشاء نماذج لموقع WordPress الخاص بك، وهي نعمة!

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

قبل أن نبدأ باستخدام أداة إنشاء النماذج Elementor، دعنا نلقي نظرة سريعة على بعض ميزاته الأساسية.

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

ومن هناك، يمكنك إنشاء ما يصل إلى 18 نوعًا مختلفًا من الحقول:

  • نص البريد الإلكتروني منطقة النص منطقة النص
  • عنوان URL ورقم الهاتف هما كما يلي:
  • أزرار الاختيار هي نوع من أزرار الاختيار.
  • اختر من القائمة (القائمة المنسدلة)
  • يتم استخدام مربعات الاختيار في قوائم المراجعة.
  • هناك خانة اختيار واحدة فقط (القبول)
  • reCAPTCHA
  • مواضع الجذب هي نوع من الحاويات التي تحتوي على العسل (تمنع البريد العشوائي)

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

يحتوي Elementor Pro على أكثر من 12 عملية تكامل مع خدمات التسويق عبر البريد الإلكتروني الشائعة وأنظمة إدارة علاقات العملاء لمساعدتك في تحقيق أقصى استفادة من النماذج الخاصة بك. هناك أيضًا تكامل شامل مع Zapier يسمح لك بالاتصال بأي من آلاف الأدوات المتاحة على منصة Zapier إذا لم تكن أداتك مدرجة.

هناك عدد قليل من البدائل الأخرى المثيرة للاهتمام أيضًا. على amp ، عندما يقوم شخص ما بملء النموذج الخاص بك، يمكنك تلقي إشعارات عبر Slack أو Discord.

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

ما هي أفضل طريقة لإنشاء نموذج في Elementor؟

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

كيفية إنشاء نموذج العنصر

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

تكوين العناصر الأولية بطريقة منظمة

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

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

من الممكن أيضًا تكرار الحقل عن طريق تحديد الرمز الذي يشبه وثيقتين، أحدهما أمام الآخر، ثم النقر فوقه. 

أنواع الحقول في النموذج

تتوفر العديد من أنواع حقول النموذج، بدءًا من الحقول النصية البسيطة وحتى كلمات المرور وحقول ReCaptcha وحقول مصيدة الجذب.

لتغيير سلوك حقل النموذج، حدد الحقل أولاً ثم قم بتسجيل الإعجاب بالقائمة المنسدلة "النوع" لرؤية أنواع الحقول المتنوعة المتاحة.

أنواع الحقول في النموذج العنصري

عرض عمود النموذج

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

النماذج في Elementor للتصميم

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

يمكن تخصيص النموذج نفسه والحقول والأزرار وأي خطوات ورسائل الخطأ ورسائل التأكيد.

بالنسبة لأولئك الذين هم على دراية بـ Elementor بالفعل، ليس هناك الكثير مما يحتاجون إلى تعلمه في تصميم Elementor Forms.

الإجراءات على النموذج

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

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

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

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

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

إنشاء قالب مراسلة نموذج الاتصال في Elementor

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

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

للبدء، يجب عليك أولاً تمكين المراسلة المخصصة عن طريق تحديد "خيارات إضافية" من القائمة المنسدلة ثم تبديل مفتاح التبديل لـ "المراسلة المخصصة" إلى "نعم".

تخصيص عنصر واجهة مستخدم نموذج جهة الاتصال Elementor عن طريق إضافة رسائل مخصصة

كما ترون، هناك أربع رسائل مختلفة يمكنك تخصيصها، بما في ذلك الرسائل المذكورة أدناه:

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

رسالة الخطأ — رسالة يتم عرضها للمستخدم النهائي عند حدوث خطأ غير معروف أثناء إرسال النموذج.

الرسالة المطلوبة — تظهر عند عدم ملء حقل النموذج المطلوب، وإرسال النموذج، وعدم اكتمال النموذج.

عندما يكون هناك شيء ما في إرسال النموذج غير صحيح ولا يمكن إرساله، يتم عرض الرسالة "رسالة غير صالحة" للمستخدم النهائي.

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

خاتمة

أداة نموذج Elementor، من السهل إنشاء نموذج اتصال. يأتي مزودًا بأداة إنشاء نماذج اتصال سهلة الاستخدام تعمل بالسحب والإفلات وعدد كبير من خيارات التخصيص التي تميزه عن plugin الأخرى لنماذج الاتصال المتوفرة في السوق. يمكنك بسهولة تخصيص نظام التصميم والألوان الخاص به ليتناسب مع شكل ومظهر شركتك. يتضمن أيضًا العديد من الأدوات الجذابة الأخرى، وأكثر من 300+ قالب احترافي، ومنشئ النوافذ المنبثقة في حزمة واحدة مناسبة. يتكون منشئ صفحات WordPress كامل الميزات من جميع الأدوات والميزات الضرورية، لذلك لن تضطر إلى شراء منشئي صفحات إضافيين لتخصيص موقع الويب الخاص بك بشكل أكبر. علاوة على ذلك، فهو يسمح بدمج أكثر من 30 خدمة تسويقية، ولهذا السبب فهو أحد plugin الأكثر شيوعًا في السوق اليوم.

هانسون ف.

المشاركات الاخيرة

كيفية استخدام الرؤوس والتذييلات مع Elementor

تعد رؤوس وتذييلات موقع الويب عناصر أساسية. في معظم الحالات، يوفر الرأس إمكانية التنقل...

6 يناير 2022

مقارنة سمات WordPress: Astra vs OceanWP

اثنان من سمات WordPress الأكثر شيوعًا في السوق هما Astra وOceanWP. احترافي…

2 يناير 2022

مقارنة موضوع أخبار WordPress: الصحيفة مقابل الأخبار أسترا

إن إنشاء موقع إخباري ممتاز لا يتطلب منك أن تصبح مصمم ويب. نحن…

25 أكتوبر 2021

أنشئ موقعًا إلكترونيًا متعلقًا بالأخبار باستخدام موضوع الصحيفة

يعد موضوع Newspaper واحدًا من أهم سمات WordPress التي صممها tagDiv، وهو…

18 أكتوبر 2021

كيفية إنشاء تجارة إلكترونية باستخدام Avada WooCommerce builder

عندما يتعلق الأمر بإنشاء متجر عبر الإنترنت، فإن WooCommerce هو plugin المناسب. هو - هي…

4 أكتوبر 2021

كيفية استخدام تأثيرات الرأس والتمرير اللاصقة مع Elementor

عادةً ما يكون العنوان هو أول ما يراه الشخص عند زيارته لموقع الويب الخاص بك،...

21 سبتمبر 2021