تواجه العديد من المواقع والمتاجر الإلكترونية تحديات تقنية في نماذجها تؤدي إلى انخفاض نسبة ملء النموذج أو ورود بيانات غير قابلة للاستخدام، وذلك بسبب الاعتماد على نماذج إدخال جامدة تفرض على المستخدم إدخال بيانات ليس لها صلة، أو نتيجة الافتقار إلى معايير التحقق من صحة المدخلات مما يؤدي إلى استقبال أرقام هواتف خاطئة مثلًا.
لذلك وفي هذا المقال سأشرح كيفية إضافة ميزتين أساسيتين إلى النماذج على ووردبريس تساعد على حل هذه المشاكل دون الحاجة لتغيير طريقة بناء النماذج التي قد تسبب تعارضًا أو فقدانًا للأرشيف، وهما:
- المنطق الشرطي: لتفعيل الظهور الديناميكي للحقول بناء على مدخلات المستخدم السابقة، ما يساعد على عدم إظهار الحقول التي ليست ذات صلة.
- نداء الدول في حقل الهاتف: لإدراج قائمة رموز الدول وضمان صحة تنسيق رقم الهاتف.
نماذج Elementor Forms
يوفر Elementor ودجت النموذج (Form) لكن فقط في الإصدار المدفوع Elementor Pro، إذ لا تتضمن النسخة المجانية أي أداة لبناء النماذج، ولذلك إذا كنت تستخدم الإصدار المجاني فيجب أن تعتمد على إضافة خارجية لإدراج النماذج وإضافة ميزات متقدمة إليها.
لكن وبالرغم من أن ودجت النموذج في Elementor Pro يتميز بمرونة عالية في التصميم والتكامل، إلا أنه يفتقر بشكل افتراضي إلى الميزات المتقدمة، إذ لا يدعم المنطق الشرطي لإخفاء أو إظهار الحقول حسب المدخلات، وحقل الهاتف فيه مجرد حقل نصي لا يوفر قائمة رموز الدول.
لكن لحسن الحظ، توجد إضافات تسمح بتوسيع قدراته ومزاياه، إذ تضيف إضافة Conditional Fields المجانية المنطق الشرطي، حيث يظهر تبويب Conditions لكل حقل يسمح بتحديد الحالات التي سيظهر فيها.
فمثلًا تختار أحد الحقول من قائمة Field ID، ثم تختار المعامل (Operator) الذي يحدد طبيعة الشرط (مثل (==) is equal أي يساوي)، وأخيرًا تكتب القيمة (Value) التي يجب أن تطابق مدخلات المستخدم لتفعيل الشرط.
فكما تلاحظ في النموذج التالي يظهر حقل رابط المعرض إذا اختار الزائر مصمم جرافيك، ويظهر حقل رابط GitHub إذا اختار الزائر مبرمج ويب في حقل المسمى الوظيفي، وذلك لأنني حددت حالة الحقلين (رابط المعرض ورابط GitHub) بحيث تظهر بناء على قيمة (Value) حقل المسمى الوظيفي.
وبخصوص رموز نداء الدول فتوجد إضافة أخرى من نفس فريق تطوير الإضافة السابقة هي Country Code For Elementor Form Telephone Field، عند تنصيبها وتفعيلها تضيف مباشرة خيار إظهار أعلام الدول ورموز النداء إلى حقل الهاتف في Elementor.
اقرأ أيضًا: أفضل إضافات لإنشاء نموذج "اتصل بنا" والتواصل الفعال مع زوار موقعك
توسيع وظائف Contact Form 7
تعتمد إضافة Contact Form 7 على هيكلية الكود المختصر، الأمر الذي يسهل على المطورين تطوير إضافات تضيف ميزات إليها دون الحاجة للمساس بالكود الأصلي.
ولإضافة ميزة المنطق الشرطي للإضافة يمكنك أن تستخدم إضافة Conditional Fields for Contact Form 7، أما من أجل إضافة حقل رقم الهاتف الذي يدعم رموز الدول فتستخدم إضافة International Telephone Input for Contact Form 7.
بعد تنصيب الإضافتين، يمكنك أن تستخدم الكود المختصر التالي لإضافة حقل الهاتف في النموذج:
[intl_tel* phone-number]
وسيظهر تبويب للمنطق الشرطي باسم الحقول المشروطة، حيث يمكن إضافة قواعد الظهور والاختفاء، حيث تنقر على زر إضافة قاعدة شرطية جديدة، ثم تحدد مجموعة الحقول التي تريد التحكم بظهورها، ثم تختار اسم الحقل الذي ستتحكم قيمته بالظهور، وبعد ذلك تختار معامل الشرط (equals مثلًا)، ثم تحدد القيمة التي ستظهر مجموعة الحقول المعنية إذا امتلكها الحقل.
فيظهر النموذج بهذه الطريقة في الواجهة الأمامية.
الإضافات التي تعمل بنظام Freemium
توجد إضافات للنماذج في ووردبريس تعتمد نظام Freemium حيث توفر إصدارًا مجانيًا محدودًا، وإصدارًا مدفوعًا يتضمن ميزات متقدمة مثل المنطق الشرطي وحقل رقم الهاتف الذي يدعم رموز الدول، ومن هذه الإضافات WPForms و Ninja Forms.
فإذا كنت تستخدم إحدى الإضافات التي تعمل بهذا النظام، فسيكون عليك الترقية إلى الإصدار المدفوع للاستفادة من الميزات المتقدمة عندما تحتاجها، وعادة لا تتوفر إضافات مساعدة مجانية موثوقة تمنح أيًا من المميزات المتقدمة مجانًا، لأن ذلك يتعارض مع بنية الإضافة المغلقة نسبيًا بالمقارنة مع Contact Form 7.
أي الحلول هو الأفضل لك؟
يعتمد الحل الأمثل على ما تستخدمه في موقعك حاليًا، فإذا:
- كنت تستخدم إضافة Elementor Pro لإنشاء نماذجك، استخدم الإضافات المساعدة التي تضيف مزايا متقدمة لودجت النموذج (Form) في Elementor Pro.
- وإذا كنت تستخدم إضافة Contact Form 7، فالأنسب أن تعتمد على الإضافات المساعدة لها.
- أما إذا كنت تستخدم إحدى الإضافات التي تعمل بنظام Freemium، فيجب عليك الترقية إلى الخطة المدفوعة أو استبدال الإضافة.
وختامًا، يعد الانتقال من النماذج التقليدية الجامدة إلى النماذج الذكية أمرًا مهمًا إذا كان هناك حاجة فعلية لذلك، إذ سيؤدي إلى زيادة نسبة ملء النموذج وتحسين جودة البيانات المستلمة منه مما يوفر كثيرًا من الجهد والوقت.
