كيفية تعيين الحد الأدنى لطول حقول نموذج الاتصال Divi

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

هيا بنا نبدأ.

معاينة

الحد الأدنى لطول سطح المكتب لمثال على حقول نموذج الاتصال

الحد الأدنى لطول الهاتف لحقول نموذج الاتصال

كيفية تعيين الحد الأدنى لطول حقول نموذج الاتصال

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

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

خيارات المجال

بعد ذلك، قم بالتمرير لأسفل إلى "خيارات الحقل" . حدد مربع القائمة المنسدلة "النوع" لرؤية الخيارات.

اختر حقل الإدخال من اختياراتك. يسمح حقل الإدخال للمستخدمين بإدخال الحروف أو الأرقام أو الرموز، ويمكنك التحكم في ذلك.

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

لضبط الحد الأدنى للطول ، أدخل عدد الأحرف التي تريد استخدامها كحد أدنى مطلوب. استخدم شريط التمرير أو أدخل الرقم في الحقل .

لماذا يتم تحديد الحد الأدنى لطول حقول نماذج الاتصال؟

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

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

بشكل عام، 100 حرف هي حوالي 16 كلمة. لذا، إذا كنت تريد حوالي 100 كلمة، فعليك تعيين الحد الأدنى للطول إلى 1600. تبلغ الفقرة النموذجية حوالي 50 كلمة (بالطبع، يختلف هذا حسب نوع الكتابة). إذا كنت تريد فقرة نموذجية من النص، فيمكنك تعيين الحد الأدنى إلى 800 حرف. لا تتطلب الكثير من الكلمات، حيث قد يؤدي ذلك إلى تخلي المستخدمين عن نموذج الاتصال الخاص بك. اضبط الحد عند أدنى مستوى ممكن للحصول على المعلومات التي تحتاجها.

مثال الرمز البريدي

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

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

مثال الوصف التفصيلي

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

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

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

الحد الأدنى لطول حقول نموذج الاتصال كمثال

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

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

إضافة وحدة نموذج الاتصال

أولاً، قم بحذف وحدة الأزرار ضمن وحدة نص عنوان القسم.

بعد ذلك، أضف وحدة نموذج الاتصال في مكانها.

إعدادات المجال

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

عنوان

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

• العنوان (سطح المكتب والكمبيوتر اللوحي): قم بوصف المشكلة بدقة
• العنوان (الهاتف): وصف المشكلة

خيارات المجال

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

• النوع: حقل الإدخال
• الحد الأدنى للطول: 800

نص

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

• زر الإرسال: حدد موعدًا

مجالات

بعد ذلك، انتقل إلى علامة التبويب "التصميم" . بالنسبة لإعدادات الحقول ، قم بتغيير لون خلفية الحقول إلى الأبيض ولون نص الحقول إلى الأسود.

• لون الخلفية: #ffffff
• لون النص: #000000

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

• هامش الحقول: 15 بكسل من الأعلى والأسفل
• حشوة الحقول: 20 بكسل من الأعلى والأسفل

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

• الخط: إنتر
• الوزن : جريء
• النمط: تي تي
• تباعد الحروف: 1 بكسل

نص كلمة التحقق

بعد ذلك، قم بالتمرير لأسفل إلى نص Captcha . اضبط الخط على Inter، والوزن على غامق، واللون على #f26440. يتطابق هذا مع رقم الهاتف الموجود في التذييل ولكن بخط أصغر.

• الخط: إنتر
• الوزن : جريء
• اللون: #f26440

زر

بعد ذلك، قم بالتمرير لأسفل إلى الزر وقم بتمكين استخدام الأنماط المخصصة للزر . سنقوم بتصميم الزر ليتناسب مع الزر الأصلي الذي قمنا بحذفه. قم بتغيير الحجم إلى 14 بكسل، واللون إلى الأسود، ولون الخلفية إلى #edbf48.

• حجم النص: 14 بكسل
• لون الخط: #000000
• لون الخلفية: #edbf48

اضبط عرض الحدود ونصف قطر الحدود على 0 بكسل.

• عرض الحدود: 0 بكسل
• نصف قطر الحدود: 0 بكسل

قم بتغيير الخط إلى Inter، والوزن إلى غامق، والنمط إلى TT.

• الخط: إنتر
• الوزن : جريء
• النمط: تي تي

بعد ذلك، أضف 14 بكسل إلى الأعلى والأسفل و20 بكسل إلى حشوة الزر الأيمن والأيسر . يجب أن يبدو الزر الآن بنفس الشكل الأصلي.

• الحشو: 14 بكسل من الأعلى والأسفل، 20 بكسل من اليسار واليمين

التحجيم

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

• العرض: 80%
• محاذاة الوحدة: المركز

CSS

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

• زر الاتصال:

  margin-top: 15px

أخيرًا، قم بالتمرير لأسفل إلى حقل Captcha وأدخل CSS التالي في الحقل. أغلق الوحدة واحفظ إعداداتك.

• حقل كلمة التحقق: الهامش العلوي: 15 بكسل

نتائج

الحد الأدنى لطول سطح المكتب لمثال على حقول نموذج الاتصال

الحد الأدنى لطول الهاتف لحقول نموذج الاتصال

إنهاء الأفكار

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

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