کلاس‌های آماده در Gravity Forms (گراویتی فرم)

کلاس‌های آماده گرویتی فرم چیست؟

فرم‌ها قلب تعامل کاربران با هر وب‌سایتی هستند. اگر از افزونه‌ی قدرتمند Gravity Forms برای ساخت فرم‌ها در وردپرس استفاده می‌کنید، خبر خوب این است که بدون نوشتن حتی یک خط CSS می‌توانید ظاهر و چیدمان فرم‌های خود را حرفه‌ای‌تر کنید!
این کار با استفاده از قابلیتی به نام CSS Ready Classes انجام می‌شود — مجموعه‌ای از کلاس‌های از پیش تعریف‌شده که تنها با وارد کردن نام آن‌ها در تنظیمات فرم، تغییرات ظاهری چشمگیری ایجاد می‌کنند.

در این مقاله از فریا، قدم‌به‌قدم یاد می‌گیریم که کلاس‌های آماده چیست، چه کاربردی دارند، و چطور می‌توانید با چند کلیک، فرم‌های خود را زیباتر و کاربرپسندتر کنید.

CSS Ready Classes چیست و چرا مفید است؟

کلاس‌های آماده‌ی CSS در Gravity Forms درواقع تکه‌کدهای استایلی از پیش‌نوشته‌شده‌ای هستند که در فایل استایل اصلی افزونه قرار دارند.
به‌جای اینکه بخواهید برای هر فیلد CSS بنویسید، کافی‌ست در تنظیمات فیلد مورد نظر، نام کلاس آماده را وارد کنید تا ظاهر آن بخش بلافاصله تغییر کند.

مزایای استفاده از Ready Classes

تنظیم چیدمان چندستونه برای فیلدهای تکرارشونده (مثل چک‌باکس‌ها و رادیو‌باتن‌ها)
افزودن نوار اعلان (Alert) یا پیام‌های رنگی برای جلب توجه
نمایش متن‌های طولانی در باکس اسکرول‌دار
پنهان کردن برخی فیلدها در زمانی که گزینه‌ی Visibility در دسترس نیست
کنترل دقیق‌تر استایل بدون نیاز به کدنویسی

چطور بدون CSS Ready Classes فرم طراحی کنیم؟

از نسخه‌ی ۲.۵ به بعد، ویرایشگر گراویتی‌فرم امکانات چیدمان پیشرفته‌تری ارائه داده است.
مثلاً می‌توانید تنها با درگ‌کردن دو فیلد کنار هم، فرم چندستونه بسازید.
همچنین در تنظیمات هر فیلد، می‌توانید موقعیت برچسب (Label)، توضیحات (Description)، و عرض ستون را تعیین کنید.

با این حال، اگر بخواهید کنترل ظاهری بیشتری داشته باشید یا امکانات خاص‌تری اضافه کنید، CSS Ready Classes گزینه‌ای حرفه‌ای‌تر و دقیق‌تر است.

نحوه استفاده از CSS Ready Classes در Gravity Forms

افزودن کلاس به فیلد

روی فیلد موردنظر در ویرایشگر فرم کلیک کنید.
وارد تب Appearance شوید.
در بخش Custom CSS Class، نام کلاس آماده را وارد کنید.
فرم را ذخیره و در پیش‌نمایش بررسی کنید.

💡 نکته: اگر می‌خواهید چند کلاس را با هم استفاده کنید، آن‌ها را با فاصله از هم بنویسید.

افزودن کلاس در سطح فرم

برای بعضی از کلاس‌ها (مثل استایل پیام تأیید)، باید کلاس را در سطح کل فرم اعمال کنید:

از منوی تنظیمات فرم به Form Settings → Form Layout بروید.
در فیلد CSS Class Name، کلاس دلخواه را بنویسید.

جدول کامل کلاس‌های آماده‌ی Gravity Forms

نوع کاربرد	نام کلاس	توضیح و کاربرد
چیدمان چندستونه	`gf_list_2col` / `gf_list_3col` / `gf_list_4col` / `gf_list_5col`	نمایش گزینه‌های چک‌باکس یا رادیو در چند ستون (چپ به راست)
چیدمان عمودی چندستونه	`gf_list_2col_vertical` تا `gf_list_5col_vertical`	تقسیم آیتم‌ها از بالا به پایین در ستون‌ها
چیدمان در یک خط (Inline)	`gf_list_inline`	نمایش آیتم‌ها در یک ردیف و شکستن خط به‌صورت خودکار
ارتفاع لیست‌ها	`gf_list_height_25` تا `gf_list_height_150`	تنظیم ارتفاع آیتم‌های لیست برای جلوگیری از ناهم‌ترازی
اعلان‌ها و هشدارها	`gf_alert_green`, `gf_alert_red`, `gf_alert_yellow`, `gf_alert_gray`	افزودن نوارهای رنگی اطلاع‌رسان (مثلاً هشدار یا پیام موفقیت)
پیام‌های تأیید (Confirmation)	`gf_confirmation_simple_yellow`, `gf_confirmation_simple_gray`, `gf_confirmation_yellow_gradient`, `gf_confirmation_green_gradient`	تغییر رنگ و استایل پس‌زمینه‌ی پیام تأیید بعد از ارسال فرم
باکس اسکرول‌دار برای متن طولانی	`gf_scroll_text`	نمایش متن طولانی در باکسی با ارتفاع ثابت و اسکرول داخلی
پنهان‌کردن AM/PM در فیلد زمان	`gf_hide_ampm`	حذف گزینه‌ی صبح/عصر از فیلد زمان در فرم
مخفی‌کردن فیلد (بدون Visibility Setting)	`gf_invisible`	پنهان کردن کامل فیلد از دید کاربر
پنهان‌کردن شمارنده‌ی کاراکتر باقیمانده	`gf_hide_charleft`	حذف نمایش “کاراکترهای باقی‌مانده” در فیلدهای متنی با محدودیت طول

نمونه‌های کاربردی

ساخت فرم چندستونه

اگر لیست بلندی از گزینه‌ها دارید، مثلاً چندین شهر برای انتخاب، می‌توانید کلاس زیر را در فیلد چک‌باکس اضافه کنید:

با این کار گزینه‌ها در سه ستون نمایش داده می‌شوند.

افزودن هشدار یا اعلان رنگی

برای نمایش پیامی مهم (مثلاً “لطفاً تمام فیلدها را پر کنید”) در یک فیلد HTML:

ایجاد باکس اسکرول برای قوانین سایت

برای بخش «شرایط و قوانین استفاده»، کلاس زیر باعث می‌شود متن در یک باکس با اسکرول نمایش داده شود:

نکات مهم در استفاده از کلاس‌های آماده

تغییرات معمولاً در پیش‌نمایش زنده فرم (Preview) قابل مشاهده‌اند، نه در محیط ویرایشگر.
می‌توانید چند کلاس را به‌صورت هم‌زمان روی یک فیلد اعمال کنید.
برای طراحی حرفه‌ای‌تر، از این کلاس‌ها در کنار تنظیمات ظاهر هر فیلد استفاده کنید.
هیچ افزونه‌ی اضافی برای فعال شدن این قابلیت نیاز نیست — همه‌ی کلاس‌ها در نسخه‌ی اصلی Gravity Forms وجود دارند.

نتیجه‌گیری

کلاس‌های آماده‌ی CSS در Gravity Forms راهی سریع، ایمن و بدون نیاز به کدنویسی برای زیباتر کردن فرم‌های وردپرس هستند.
چه بخواهید فرم چندستونه بسازید، چه بخواهید هشدار رنگی اضافه کنید یا فیلدی را مخفی کنید، کافی‌ست از این کلاس‌ها استفاده کنید تا فرم‌های شما حرفه‌ای‌تر از همیشه دیده شوند.

اگر هنوز از Gravity Forms استفاده نمی‌کنید، می‌توانید از سایت رسمی آن نسخه‌ی آزمایشی را تست کرده یا لایسنس تهیه کنید.