كيفية فرض مسافة بين الحقول في WPForms

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

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

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

فرض المسافات بين حقول النموذج

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

الإعداد الأولي: تباعد النماذج مع التعليمات البرمجية

لنبدأ بتثبيت المكونات الإضافية المطلوبة على موقعك.

الخطوة 1: تثبيت WPForms وWPCode

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

بعد شراء WPForms Pro، تابع وتثبيت المكون الإضافي على موقعك. فيما يلي دليل تفصيلي حول تثبيت WPForms.

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

تشبه خطوات التثبيت طريقة تثبيت WPForms، لكن يمكنك إضافة الإصدار المجاني من WPCode مباشرةً من مستودع WordPress. إليك النسخة السريعة من العملية.

من قائمة إدارة WordPress الخاصة بك، انتقل إلى Plugin »Add New .

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

سيستغرق التثبيت بضع ثوانٍ فقط وسيتغير زر التثبيت إلى تنشيط. اضغط على زر التنشيط لإنهاء تثبيت المكون الإضافي على موقعك.

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

الخطوة 2: إنشاء نموذج وتضمينه

إذا كنت تحاول ضبط التباعد بين الحقول في WPForms، فمن المحتمل أنك قمت بالفعل بإنشاء ونشر نموذج واحد أو أكثر على موقعك.

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

لأغراض توضيحية، أستخدم قالب نموذج الاستطلاع الجاهز هذا.

تأكد من تضمين النموذج الخاص بك ونشره (أو على الأقل حفظ نسخة مسودة منه في محرر WordPress الخاص بك). يمكنك فقط تخصيص التباعد في نموذج مضمن بالفعل في موقعك.

ستحتاج أيضًا إلى معرفة معرف النموذج الخاص بالنموذج الذي تريد تخصيص المسافات له. يمكنك تحديد موقع معرف النموذج بسهولة بالانتقال إلى WPForms »All Forms .

يتكون معرف النموذج بالكامل من أرقام، وهو مذكور في عمود الرمز القصير داخل علامتي الاقتباس. في حالتي، معرف النموذج هو 2294 .

عظيم! ولكن ربما لا تزال تتساءل عن كيفية إدراج الكود لتعديل تباعد WPForms. سأصف هذا بعد ذلك.

الخطوة 3: إدخال التعليمات البرمجية لتباعد النماذج

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

لإضافة مقتطف جديد، ما عليك سوى الانتقال إلى Code Snippets » + Add Snippet .

ثم انقر فوق الزر Use Snippet ضمن خيار Add Your Custom Code (New Snippet).

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

نظرًا لأن جميع الرموز الخاصة بالتحكم في التباعد في النموذج هي CSS، فتأكد من تحديد CSS Snippet في القائمة المنسدلة Code Type.

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

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

ممتاز! أنت الآن جاهز لبدء تخصيص تباعد النماذج باستخدام تعليمات برمجية مخصصة.

رموز CSS لضبط تباعد النماذج

نحن الآن جاهزون لبدء إنشاء مقتطفات تعليمات برمجية CSS التي تتحكم في المسافات بين عناصر النموذج المختلفة.

تعديل المسافة بين عنوان النموذج والحقل الأول

دعونا نتحدث عن عناوين النموذج! افتراضيًا، يستخدم WPForms عنوان H1 الخاص بصفحتك كعنوان للنموذج. يظهر هذا العنوان أعلى النموذج نفسه.

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

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

قد ترغب في إخفاء H1 إذا كنت تستخدم عنوان WPForms. يمكن القيام بذلك ببساطة عن طريق النقر على H1 ثم الضغط على أيقونة العين عندما تنبثق.

نحن الآن جاهزون لتغيير التباعد بين العنوان وحقل النموذج الأول. يمكنك نشر النموذج الخاص بك أو تحديثه في هذه المرحلة.

دعونا نلقي نظرة أولاً على التباعد الافتراضي بين عنوان النموذج والحقل الأول في WPForms. وإليك ما يبدو عادة:

لتغيير هذا التباعد، قم بإنشاء مقتطف جديد في WPCode، كما هو موضح في الخطوة 3. يمكنك الوصول إلى هذا بسرعة بالانتقال إلى Code Snippets » + Add Snippet على الشريط الجانبي لـ WordPress الخاص بك.

إليك الكود الخاص بتغيير تباعد العناوين لجميع نماذج WPForms على موقعك:

.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container-full .wpforms-title {
margin-bottom: 15px !important;
}

تذكر أن قيم الحشو والهامش متغيرة. وهذا يعني أنه يمكنك إدخال أي قيمة تحتاجها هنا. أوصي بتغيير قيمة margin-bottom فقط في هذا الرمز وترك padding-bottom مضبوطًا على 0.

على سبيل المثال، إذا كنت تريد أن يظهر العنوان بنفس المسافة مثل الفجوة بين كل حقل، فيمكنك استخدام 15 بكسل كقيمة margin-bottom . إذا كنت تريد إنشاء مسافة أكبر أو أصغر من ذلك، فما عليك سوى زيادة أو تقليل قيمة margin-bottom حسب الحاجة.

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

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

على سبيل المثال، إليك كيفية تغيير الرمز لنموذج يحمل المعرف # 2294.

wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-title {
margin-bottom: 15px !important;
}

هذا يعتني بالتباعد بين عنوان النموذج الخاص بك. ولكن ماذا عن التباعد بين كل حقل؟

سأتناول هذا بعد ذلك.

تعديل التباعد لجميع الحقول

الفجوة بين كل صف متتالي من الحقول هي رقم متغير آخر يمكن التحكم فيه بسهولة باستخدام الكود.

كمرجع، دعونا أولاً نلقي نظرة على التباعد الافتراضي بين الحقول.

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

هذه المرة فقط، يبدو الرمز الذي تحتاجه كما يلي:

.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container .wpforms-field {
padding-top: 100px !important;
}

والنتيجة هي شكل أكثر تمددًا مع وجود فجوة أكبر بين كل حقل متتالي.

يمكنك ضبط الفجوة بحرية عن طريق تغيير قيمة px لخاصية padding-top .

مرة أخرى، إذا كنت تريد فقط تعديل تباعد الحقول لنموذج فردي، فستحتاج إلى تعديل التعليمات البرمجية عن طريق ذكر معرف النموذج:

wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-field {
padding-top: 100px !important;
}

تغيير حشوة زر الإرسال

يعد تغيير الفجوة بين الحقل الأخير وزر الإرسال أمرًا سهلاً تمامًا مثل الرموز التي استخدمتها أعلاه.

افتراضيًا، تظهر المسافة بين زر الإرسال في WPForms بالشكل التالي:

الكود الذي تحتاجه لضبط حشوة زر الإرسال هو:

.wpforms-container .wpforms-submit-container {
padding-top: 30px !important;
}

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

كان ذلك واضحًا جدًا، أليس كذلك؟

لا تتردد في استخدام رموز CSS لفرض مسافة في WPForms كما تراه مناسبًا!

بعد ذلك، قم بتطبيق أنماط النماذج المتقدمة

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

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

أنشئ نموذج WordPress الخاص بك الآن

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

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