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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

استنتاج

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

اترك تعليق

لن يتم نشر عنوان بريدك الإلكتروني. الحقول المطلوبة محددة *