چند ستونه کردن گراویتی فرم

چند ستونه کردن در گراویتی فرم از موارد بسیار مهم و کاربردی برای معتبر و بهترین افزونه فرم ساز جهان می باشد. قطعا شما خواستید که بجای قرارگیری فیلدها زیر هم که باعث شلوغی و حجم بالای فیلدها می شود، آنها را دو ستون، سه ستون، چهار ستون کنید. در این آموزش قصد داریم از چند روش این مورد را به شما آموزش دهیم.

چند ستونه کردن گراویتی فرم با دو روش

• روش اول: استفاده از کد و همچنین کلاس CSS پیش فرض گراویتی فرم
• روش دوم: استفاده از افزونه

روش اول: استفاده از CSS های پیش فرض گراویتی فرم

📢 تبدیل به دو ستونه، سه ستونه و چهار ستونه کردن فیلدهای گرویتی فرم

🔷 اگر قصد دارید در سمت چپ فیلد اولی باشد، کلاس CSS را در تب نمایش » کلاس CSS سفارشی وارد کنید:

gf_left_half

🔷 همچنین برای قرار گرفتن در فیلد دومی در سمت راست، کلاس CSS را در تب نمایش » کلاس CSS سفارشی وارد کنید:

gf_right_half

✅ پیش نمایش نهایی دو ستونه کردن گراویتی فرم:

🔷 در صورتی که قصد دارید فیلدها سه ستونه کنید به این صورت انجام دهید. کلاس CSS را در تب نمایش » کلاس CSS سفارشی هر فیلد را به ترتیب زیر وارد کنید:

سمت چپ » gf_left_third

میانی » gf_middle_third

سمت راست » gf_right_third

✅ پیش نمایش نهایی سه ستونه کردن گراویتی فرم:

🔶 برای چهار ستونه کردن فیلدها در گراویتی فرم مطابق مراحل بالا می باشد و کافیست در هر فیلد، کلاس CSS را در تب نمایش » کلاس CSS قرار دهید.

بخش اول» gf_first_quarter

بخش دوم» gf_second_quarter

بخش سوم» gf_third_quarter

بخش چهارم» gf_third_quarter

• توجه داشته باشید که فیلدها در کنار هم قرار و ۴ ستونه می شوند.

🔷 اگر قصد دارید فیلدها در یک ستون باشند و نمی خواهید فاصله زیادی بین آنها ایجاد شود می توانید به جای استفاده از حالت های دو ستونه، سه ستونه، چهار ستونه از این روش استفاده کنید. کافیست در تب نمایش » کلاس CSS هر فیلد، کلاس CSS زیر را قرار دهید.

برای هر فیلد کلاس CSS را قرار دهید:

gf_inline

✅ پیش نمایش نهایی:

🔷 برای استفاده از کلاس لیست هم می توانید چک باکس / رادیو را دوستونه، سه ستونه، چهار ستونه و پنج ستونه نمایید. (تب نمایش » کلاس CSS)

دو ستونه: gf_list_2col

سه ستونه: gf_list_3col

چهار ستونه: gf_list_4col

پنج ستونه: gf_list_5col

✅ پیش نمایش نهایی:

🔷 برای چک باکس inline (داخلی و در یک خط) می توانید کلاس CSS را در تب نمایش » کلاس CSS قرار دهید.

gf_list_inline

✅ پیش نمایش نهایی:

🔶 همچنین برای ارتفاع و فاصله لیست از ۲۵ الی ۱۲۵ پیکسل در چک باکس می توانید با قراردادن هر یک از کلاس های CSS در تب نمایش » کلاس CSS از آنها استفاده کنید.

برای ارتفاع ۲۵ پیکسل: gf_list_height_25

برای ارتفاع ۵۰ پیکسل: gf_list_height_50

برای ارتفاع ۷۵ پیکسل: gf_list_height_75

برای ارتفاع ۱۰۰ پیکسل: gf_list_height_100

برای ارتفاع ۱۲۵ پیکسل: gf_list_height_125

برای ارتفاع ۱۵۰ پیکسل: gf_list_height_150

ساختار فرم به صورت افقی در گراویتی فرم

🔶 به عنوان مثال شما فیلدی دارید که از کاربر ایمیلی را دریافت می کنید و دکمه و اطلاعات هر یک از آنها در فرم در یک ردیف جداگانه قرار دارد ولی با ساختار فرم به صورت افقی در گراویتی فرم می توانید این مورد را در ستون قرار دهید تا شکل ظاهری مناسب و زیبایی داشته باشد. (تب نمایش » کلاس CSS)

gf_simple_horizontal

سایر کلاس های CSS در گراویتی فرم

🔷 برای سایر کلاس های CSS در گراویتی فرم می توانید از این کلاس های CSS در بخش تب نمایش » کلاس CSS فیلد مورد نظر را استفاده کنید.

با این کلاس CSS می توانید قوانین و محتوایی طولانی را در این بخش به صورت اسکرول دار نمایش دهید.

gf_scroll_text

✅ پیش نمایش نهایی:

✅ همچنین می توانید از افزونه های زیر که در مخزن وردپرس هستند استفاده کنید و ستون، ساختار فیلدها و زیبایی بهتر و بیشتر را از طریق افزونه تغییر دهید.

• افزونه GravityWP – CSS Selector
• افزونه Multiple Columns for Gravity Forms
• افزونه Styles & Layouts for Gravity Forms – Best Gravity Forms Styler, Designer
• افزونه Gravitizer – Material UI Styler for Gravity Forms
• افزونه UI Elements for Gravity Forms

در این آموزش در نظر داشتیم تا بتوانید از قابلیت های دو ستونه، سه ستونه و چهار ستونه افزونه حرفه ای فرم ساز گراویتی فرم استفاده کنید. همراه با این آموزش هم سایر مواردی که می توانید برای زیبایی فرم به شما کمک کند را قرار دادیم.

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