تنظیمات استایل گرویتی فرم

افزودن استایل و تم به افزونه gravity forms

آموزش افزودن استایل آماده css برای تغییر در تم و فیلد‌های افزونه gravity forms ، این ویژگی‌ها در تنظیمات این افزونه وجود ندارند.

امروزه فرم‌ها را در سایت‌های مختلف مشاهده می‌کنیم که کار‌های مختلفی را انجام می‌دهند. عملیات ثبت سفارش، تماس با ما و … همگی از طریق فرم‌ها قابل انجام هستند. افزونه‌های زیادی در مخزن وردپرس با عنوان ایجاد فرم در دسترس است. پرطرفدار‌ترین و بهترین افزونه‌های ایجاد فرم در وردپرس افزونه‌های form contact 7 و qforms و gravity forms است که امکانات و قابلیت‌های زیادی را می‌توان با توجه به انعطاف پذیری این فرم ها ایجاد کرد.

افزونه gravity forms

افزونه فرم ساز gravity forms افزونه‌ای پرطرفدار و رایگان در مخزن وردپرس است. اگر به تنظیمات این افزونه مبنی بر شخصی سازی و استایل‌های پیشفرض نگاه کنیم می‌بینیم که تنظیمات زیادی برای شخصی سازی این فرم وجود ندارد. تنها آیتم در دسترس اندازه فیلد‌ها هستند که می‌توانید اندازه آنها را تغییر دهید (کوچک، متوسط، بزرگ). در این پست با افزودن کد های css به قالب تنظیمات شخصی سازی گسترده‌تری را بر استایل فرم‌های این افزونه اعمال می‌کنیم.

 

آموزش افزودن کدهای css به قالب

برای انجام این کار کدهایی در باکس های زیر مشاهده می‌کنید که هرکدام مرتبط با انجام کاری هستند برای افزودن این ویژگی ها در قسمت پیشخوان وردپرس (نمایش>ویرایشگر پوسته) را باز کنید. فایل style.css را انتخاب کنید و کد های موجود را در یک خط خالی از این پوشه copy paste کنید. اگر از قالب هاب غیر رایگان و پیشرفته استفاده می‌کنید حتما در تنظیمات قالب سایت خود قسمتی با عنوان کد های css سریع (quick css) دارید. در این صورت نیاز به فایل style.css نیست و از همان قسمت می‌توانید کد ها را اضافه کنید. در آخر با ذخیره کد‌ها فرم را در سایت باز کنید و با زدن کلید ترکیبی ctrl + f5 تغییرات را در فرم مشاهده کنید.

 

اندازه فیلد در gravity forms

برای تغییر اندازه فیلد از کد زیر استفاده کنید. با عوض کردن مقدار max-width می‌توانید عرض فیلد را به دلخواه تغییر دهید.

در عبارت #gform_wrapper_1 بجای عدد 1 آی دی یا شناسه مربوط به فرمی را قرار دهید که قصد دارید این تغییرات بر آن اعمال شود. برای مشاهده آی دی فرم های موجود در گرویتی فرم به آدرس (فرم‌ها>فرم‌ها) رفته و مقابل هر فرم آی دی مربوط در ستون شناسه قرار دارد. اگر قصد دارید تنظیمات اندازه فیلد را برای فیلد های دو فرم مجزا اعمال کنید از کد بالا دو بار استفاده کنید و در هر بار شناسه مربوط به فرم مدنظر خودتان را قرار دهید. (این موضوع برای تمامی کدهای css  صدق می‌کند)

 

وسط چین کردن فیلدهای gravity forms

فیلدها به طور پیشفرض راست چین هستند. برای وسط چین کردن فیلد ها از کد زیر استفاده کنید.

تمامی عبارات #gform_wrapper_1 را مانند توضیحات بالا برای شناسه فرم موردنظر ست کنید.

 

کم کردن فاصله فیلدها و حذف عناوین در gravity forms

کار جالب دیگری که می‌توانید انجام دهید و به زیبایی فرم نیز بسیار کمک می‌کند استفاده از کد زیر است. این کد عناوین فیلد را حذف می‌کندو آنهارا به هم نزدیک تر می‌کند برای استفاده از عناوین می‌توانید آن را داخل فیلد قرار دهید.

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

استایل gravity forms

(عناوین حذف شده و فیلدها متناسب‌تر نسبت به یکدیگر هستند)

 

در آخر با ترکیب این سه کد فرمی همانند فرم زیر خواهید داشت.

زیباسازی افزونه gravity forms

 

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

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

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