افزونه های وردپرس

چند ستونه کردن گراویتی فرم با افزونه CSS Selector

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

پیش از این در آموزش های مختفی در مورد نحوه ایجاد فرم های تماس با افزونه های مختلف مانند فرم تماس 7 و گراویتی فرم صحبت کردیم و در مورد نحوه کار کردن با آنها نیز به خوبی توضیح دادیم. اما کار کردن با یک افزونه یک مرحله است و افزودن ویژگی های مختلف و دلخواه به آن مرحله دیگری را تشکیل میدهد.

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

در این آموزش از وردپرس نارنجی، یاد میگیریم که چگونه بتوانیم فرم های خود را چند ستونه کنیم و فرم های جذابتری بسازیم.

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

برای افزودن ویژگی هایی مانند چند ستونه کردن و زیبایی بصری دادن به هز چیزی مانند فرم های گراویتی فرم، باید کلاس های CSS را ایجاد و فراخوانی نمایید. اما برای بسیاری از افراد نوشتن کدهای سی اس اس کار دشوار و زمانگیری است، علی الخصوص برای افرادی که سیستم وردپرس را برای سادگی و عدم کدنویسی آن انتخاب کرده اند.

راه کار ساده ای برای اضافه کردن ویژگی های سی اس اس به فرم های گراویتی فرم وجود دارد و آن هم نصب و استفاده از افزونه ای است که در ادامه معرفی می شود.

افزونه های زیادی در کنار گراویتی فرم برای چند ستونه کردن آن ایجاد شده اند، اما افزونه ای که در این اموزش برای چند ستونه کردن گراویتی فرم معرفی می کنیم با عنوان GravityWP – CSS Selector در مخزن وردپرس به ثبت رسیده است.

این مطلب را از دست ندهید :
ذخیره فرم های ارسالی در contact form 7 با افزونه Flamingo

این افزونه تا کنون با بیش از 6.000 نصب فعال توانسته است امتیاز 5 را از کاربران خود به دست بیاورد. برای چند ستونه کردن گراویتی فرم بدون کدنویسی CSS، ابتدا با کلیک روی دکمه زیر افزونه CSS Selector را دانلود و سپس به کمک آموزش نحوه نصب افزونه ها در وردپرس اقدام به نصب و فعالسازی آن در وبسایت خود نمایید.

دانلود افزونه CSS Selector

پس از نصب و فعالسازی افزونه هیچ منویی به منوهای پیشخوان شما افزوده نخواهد شد و لازم نیست هیچ گونه تنظیمات خاصی برای استفاده از قابلیت چند ستونه کردن گراویتی فرم انجام دهید.

اکنون برای ویرایش فرم مورد نظر خود ابتدا به منوی فرم ها >> فرم ها رفته و فرمی که قصد دارید آن را چند ستونه کنید ویرایش نمایید.

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

ویرایش فیلد در گراویتی فرم
افزودن سی اس اس به گراویتی فرم

همانطور که در تصویر بالا مشاهده می کنید، در قسمت کلاس CSS سفارشی دکمه ای جهت چند ستونه کردن گراویتی فرم اضافه شده است. با کلیک روی این دکمه پاپ آپی مانند تصویر زیر نمایان می شود.

افزودن سی اس اس به گراویتی فرم
منوی افزودن سی اس اس به گراویتی فرم

در این قسمت چنانجه تمایل دارید فرم شما دو ستونه شود، گزینه Two Columns (2)، چنانچه تمایل دارید فرم شما 3 ستونه شود گزینه Three Columns (3) و در نهایت چنانچه می خواهید فرم شما 4 ستونه باشد گزینه Four Columns (4) را انتخاب کرده و مکان فیلد خود را نیز مشخص کنید.

به همین ترتیب برای فیلدهای بعدی نیز اقدام کنید و برای مثال چنانچه تمایل دارید فرم شما دو ستونه باشد، برای فیلد اول Right Half و برای فیلد دوم Left Half و به همین ترتیب برای فیلدهای بعدی اقدام کنید.

این مطلب را از دست ندهید :
آپدیت قالب و افزونه وردپرس با افزونه Easy Theme and Plugin Upgrades

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

برای استفاده از دکمه های رادیویی و چک باکس ها نیز گزینه جدایی در این افزونه تعبیه شده است که به کمک آن می توانید دکمه های رادیویی یا چک باکسهای خود را در چند ستون و یا در یک خط نمایش دهید.

این مورد برای زمانی کاربرد دارد که شما قصد دارید چندین دکمه رادیویی یا چک باکس برای انتخاب در اختیار کاربر قرار دهید، که به صورت پیش فرض در پایین یکدیگر قرار می گیرند. برای شخصی سازی این مورد کافی است در پاپ آپ CSS Selector گزینه Radio Buttons & Checkboxes را انتخاب کنید.

این افزونه قابلیت اضافه کردن کدهای سی اس اس دلخواه را برای چند ستونه کردن گراویتی فرم یا افزودن هر استایل دلخواهی با استفاده از بخش Add custom css فراهم کرده است.

در نهایت پس از اینکه تمام کلاس ها را به فیلدهای خود اضافه کردید، فرم خود را به روزرسانی کرده و به صفحه ای که آن را قرار داده اید، مراجعه کنید.

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

در پایان خواهید دید که مانند تصویر بالا فرم شما به تعداد ستون دلخواهتان قرار گرفته و توانستید با تنها نصب یک افزونه و استفاده از ویژگی های آن اقدام به چند ستونه کردن گراویتی فرم کنید.

عاطفه نوربخش

عاطفه نوربخش هستم؛ هم بنیانگذار " وردپرس نارنجی " که حاصل تجربه های خودم در حوزه تخصصی وردپرس را برایتان می نویسم و تلاش میکنم به شما کمک کنم تا با سیستم مدیریت محتوای وردپرس، سایت وردپرسی ای زیبا و حرفه ای داشته باشید.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

۶ دیدگاه

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

  1. بسیار عالی
    خیلی تو نت گشتم ، آخرش اینجا با آموزشش پیدا کردم.
    تشکر و سپاس از آموزش خوبتون.

دوره آموزش وردپرس در اصفهانثبت نام رایگان (کد تخفیف : WpNarenji)
+