چک‌ باکس‌ ها و دکمه‌ های رادیویی فرم‌ ها رو حرفه‌ای استایل بده!

چک‌ باکس‌ ها و دکمه‌ های رادیویی فرم‌ ها رو حرفه‌ای استایل بده! – سلام به رفیق رایا وردپرسی خودم 👋 حالت چطوره؟

تو هم مثل من از ظاهر پیش‌فرض و کسل‌کننده چک‌باکس‌ها و دکمه‌های رادیویی توی فرم‌هات خسته شدی؟ 🤔 همون مربع‌ها و دایره‌های ساده‌ای که توی همه مرورگرها یه جور بی‌روح ظاهر میشن و هیچ هیجان و جذابیتی ندارن. انگار مال عهد بوقن! 🦕😁

اما نگران نباش! ✨ امروز اومدم با یه ترفند خفن که بهت یاد بدم چطوری کاری کنی چک‌ باکس‌ و رادیو‌باتن‌ ها در فرم هات حرفه‌ای و چشم‌نواز بشن. طوری که هر کاربری دید، کیف کنه و بگه “اووووه، اینجا چه خبره؟!” 🤩 پس منو تا پایان این پست خاص از سری آموزش های رایا وردپرس دنبال کن و چشم از صفحه برندار 🙂

🤔 چرا اصلاً باید چک باکس‌ ها و دکمه های رادیویی رو استایل بدیم؟

ببین، المان‌های داخل فرم مثل چک‌باکس (Check box) و دکمه های رادیویی (Radio button)، نقطه تعامل کاربر با سایت تو هستن. ظاهر پیش‌فرض این المان‌ها خیلی ساده و بی روحه. 😑 انگار هیچ تلاشی برای زیباشون نشده!

حالا فکر کن بتونی ظاهر این المان‌ها رو کامل عوض کنی، رنگ و لعاب خودتو بهشون بدی، اندازه‌شون رو تنظیم کنی و حتی انیمیشن‌های باحال بهشون اضافه کنی! ✨ این کار باعث میشه:

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

1. سایتت حرفه‌ای‌تر و جذاب‌تر به نظر بیاد: فرم‌ها دیگه یه بخش خسته‌کننده نیستن، بلکه بخشی از طراحی زیبای سایتت میشن. نشون میدی که به جزئیات اهمیت میدی.
2. تجربه کاربری (UX) بهبود پیدا کنه: المان‌های واضح‌تر، بزرگتر (اگه خواستی!) و با ظاهر دلنشین‌تر، کار کردن با فرم رو برای کاربر راحت‌تر و لذت‌بخش‌تر میکنن. کاربر با سایتت احساس راحتی بیشتری میکنه.
3. با بقیه اجزای طراحیت هماهنگ بشن: دیگه لازم نیست ظاهر پیش‌فرض مرورگر رو تحمل کنی، میتونی چک‌باکس‌ها و رادیو‌باتن‌ها رو دقیقاً با رنگ‌ها و فونت‌های سایتت ست کنی و یه هارمونی جذاب ایجاد کنی.

خلاصه، استایل دادن به این المان‌ها فقط یه تغییر ظاهری ساده نیست، بلکه یه قدم بزرگ برای ساختن یه تجربه کاربری عالی و یه سایت حرفه‌ایه که باعث میشه کاربر بیشتر توی ذهنش بمونه! 😉 همینطور امکان اینکه کاربر فرم رو پر کنه خیلی بیشتر میشه 🙂

🤔چطور چک باکس‌ها و دکمه‌های رادیویی فرم رو استایل بدیم؟

خب، حالا که میدونی چرا باید این کارو بکنی و چقدر نتیجه‌اش خفن میشه، بریم سراغ اصل مطلب! 👇 چطوری این ظاهر بی‌روح رو عوض کنیم و بهش جون بدیم؟ خیلی ساده است! قراره از CSS کمک بگیریم و استایل مدنظرمون رو به فرم بدیم.

نکته خیلی مهم: رفیق. این استایل‌های CSS که قراره بهت یاد بدم، قدرت اینو دارن که ظاهر چک‌باکس‌ها و رادیو‌باتن‌های هر فرمی رو توی سایتت عوض کنن! 😍 فرقی نمیکنه اون فرم رو با چی ساخته باشی: با المنتور، با یه افزونه فرم‌ساز دیگه مثل WPForms و Contact Form 7، یا حتی خودت با کد HTML!

برای اینکه قشنگ بهت نشون بدم چطور کار میکنه و یاد بگیری دقیقاً کجا این کدها رو بذاری، توی این آموزش روی ویجت فرم المنتور این استایلو پیاده سازی کردم. اما بازم میگم هیچ محدودیتی وجود نداره و میتونی روی هر فرمی این استایلو پیاده سازیش کنی 🙂

قدم اول: افزودن ویجت فرم به برگه

اولین قدم اینه که یه ویجت فرم به برگه‌ات اضافه کنی. اگه قبلاً این کارو کردی که هیچی، برو مرحله بعد! ولی اگه نه، کافیه توی پنل المنتور، ویجت “Form” رو پیدا کنی و بکشی بذاری توی قسمتی از برگه‌ات که میخوای فرمت نمایش داده بشه. به همین سادگی! 😉

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

• حالا که ویجت فرم رو داری، میتونی انواع و اقسام فیلدهای دیگه مثل فیلد متن، ایمیل، شماره تلفن و… رو هم بهش اضافه کنی. المنتور توی این زمینه دستتو باز گذاشته. اما خب، چون تمرکز اصلی ما توی این آموزش روی استایل دادن به چک‌باکس‌ها و دکمه‌های رادیوییه، برای این آموزش فقط نیاز داریم که حداقل یه فیلد از نوع Checkbox و یه فیلد از نوع Radio توی فرم وجود داشته باشه.

قدم دوم: افزودن کد CSS برای استایل دهی به چک باکس و دکمه رادیویی فرم

خب، حالا که فیلدهای چک‌باکس و رادیو‌باتنت توی فرم المنتور آماده‌ان، وقتشه کدهای CSS خفنمون رو اضافه کنیم تا ظاهرشون متحول بشه! ✨ دو تا جای اصلی داری که میتونی این کدها رو بذاری، بستگی داره هدفت چی باشه:

1. داخل خود ویجت فرم المنتور: این راحت‌ترین راهه اگه میخوای این استایل‌های خاص و جذاب فقط روی همین فرمی که الان داری باهاش کار می‌کنی اعمال بشه و بقیه فرم‌های سایتت دست نخورده بمونن. برای این کار، خیلی ساده روی ویجت فرمت کلیک کن تا تنظیماتش باز بشه، برو توی تب پیشرفته (Advanced) و بعد بخش CSS سفارشی (Custom CSS). تمام کدهایی که بهت میدم رو اینجا کپی و پیست می‌کنی. تمام!
2. توی قسمت CSS سفارشی وردپرس یا فایل استایل قالبت: اگه میخوای این استایل‌ها روی همه چک‌باکس‌ها و رادیو‌باتن‌های سایتت (چه اونایی که توی فرم‌های المنتورن، چه اونایی که با یه افزونه دیگه ساختی یا حتی خودت با کد HTML نوشتی) اعمال بشه، بهتره کدها رو توی بخش CSS سفارشی وردپرس یا فایل style.css قالبت بزاری. اینطوری خیالت راحته که همه جا یه شکل دیده میشن. 😎

ما توی این آموزش برای سادگی و اینکه دقیقاً ببینی مرحله به مرحله چیکار باید بکنی، روش اول (اضافه کردن کد داخل بخش CSS سفارشی ویجت فرم المنتور) رو پیش می‌بریم.

1️⃣ تعریف متغیرهای رنگی ✨

اولین قدم برای اضافه کردن کدهای استایلمون، تعریف یه سری متغیر برای رنگ‌هاست. میدونی چرا این کارو می‌کنیم؟ 🤔 چون اینطوری هر وقت دلت خواست رنگ‌های اصلی استایلت رو عوض کنی، فقط کافیه همین اول کار، مقادیر این متغیرها رو تغییر بدی و نیازی نیست کل کد رو بگردی دنبال رنگ‌ها! اینطوری کارت خیلی راحت و تمیز میشه و هر موقع خواستی می‌تونی ظاهر استایلت رو عوض کنی. 😉

این متغیرها رو با استفاده از :root تعریف می‌کنیم که یعنی این متغیرها توی کل سند HTML یا توی محدوده‌ای که کد رو گذاشتی قابل دسترسی هستن. بیا با تعریف متغیرهای رنگی شروع کنیم:

2️⃣استایل دادن به چک باکس و دکمه رادیویی

قدم بعدیمون اینه که ظاهر پیش‌فرض چک باکس‌ها و دکمه های رادیویی رو حذف کنیم و استایل خودمون رو اعمال کنیم:

خب ببین چیکار کردیم؟ اول با استفاده از appearance: none ظاهر اصلی چک باکس و دکمه رادیویی رو پاک کردیم. بعد اندازه رو تنظیم کردیم و یه حاشیه فیروزه‌ای خفن با گوشه‌های گرد بهش دادیم. همچنین با cursor: pointer مشخص کردیم که وقتی ماوس روی چک باکس و دکمه رادیویی میره، نشانگر به شکل دست (اشاره‌گر) تغییر کنه.

3️⃣ هاور افکت برای چک‌ باکس‌ و دکمه رادیویی

حالا قراره یه افکت خفن اضافه کنیم که وقتی کاربر روی چک باکس و دکمه رادیویی هاور می‌کنه (ماوس روش نگه میداره) نمایش داده بشه :

وقتی کاربر ماوس رو روی چک باکس و دکمه رادیویی نگه میداره، رنگ حاشیه به بنفش نئونی تبدیل میشه، یه سایه درخشان دورش ظاهر میشه و چک باکس کمی بزرگتر میشه! چقدر جذاب؟! نه؟😍

4️⃣ استایل حالت انتخاب‌ شده (Checked)

بریم سراغ بخش هیجان‌انگیز قضیه! 😍 وقتی کاربر روی چک‌باکس کلیک می‌کنه و انتخابش می‌کنه، تازه اصل جادو شروع میشه و می‌خوایم ظاهرش کلی تغییر کنه و اون افکت‌های نئونی و ایموجی باحال نمایش داده بشن.

این کارو با استفاده از یه حالت خاص توی CSS به اسم :checked و همینطور شبه‌ عناصر خفن ::before و ::after انجام میدیم. بیا ببینیم کدهای این بخش چی میگن: 👇

حالا بیا این تیکه کد ببینیم چیکار میکنه: 👇

✅ وقتی چک‌باکس یا دکمه رادیویی تیک میخوره (:checked):

• رنگ حاشیه‌ش (border-color) میشه بنفش نئونی #ff00ff.

✅ بعدش با ::before:

• یه لایه کامل با گرادیانت خوشگل (بنفش به فیروزه‌ای) روی دکمه اضافه میشه.
• این لایه با یه انیمیشن ملایم (fill-background) ظاهر میشه.

✅ با ::after هم:

• یه ایموجی 👽 دقیقاً وسط دکمه نمایش داده میشه تا ظاهرش جذاب‌تر بشه. میتونی از ایموجی های دیگه مثل قلب 💖 یا هر ایموجی دلخواهی خواستی استفاده کنی. (این ایموجی روی همه لایه‌ها دیده میشه چون z-index بالاتری داره).

5️⃣ اضافه کردن انیمیشن‌

حالا باید انیمیشن‌هایی که استفاده کردیم رو تعریف کنیم:

این انیمیشن‌ها باعث میشن وقتی چک باکس یا دکمه رادیویی انتخاب میشه، پس‌زمینه گرادینت با یه حرکت زیبا پر بشه.

6️⃣ استایل دادن به متن لیبل‌ ها

در این مرحله یه افکت خفن هم به لیبل‌های چک باکس‌ها و دکمه‌های رادیویی میدیم تا کارمون حرفه ای تر بشه:

با این کد، وقتی چک باکس یا دکمه رادیویی انتخاب میشه، متن لیبل کنارش پررنگ میشه و رنگش به سبز تغییر می‌کنه!

7️⃣ سازگاری با دستگاه‌ های مختلف

و در آخر، باید مطمئن بشیم که چک باکس‌ها و دکمه‌های رادیویی ما در همه دستگاه‌ها (مثل موبایل) عالی و در اندازه درست نمایش داده میشن:

در پایان، کد کامل رو یکجا برات پایین گذاشتم تا راحت برداری و استفاده کنی 😉✨

جمع‌ بندی

تبریک میگم! 🎊 حالا تو یاد گرفتی چطور چک باکس‌ها و دکمه‌های رادیویی ساده و معمولی رو به المان‌های تعاملی جذاب و حرفه‌ای تبدیل کنی. این تغییرات کوچک می‌تونن تأثیر بزرگی روی تجربه کاربری سایتت داشته باشن.

فراموش نکن که سفارشی‌سازی فرم‌ها فقط به زیبایی سایت کمک نمی‌کنه، بلکه باعث میشه کاربران با رغبت بیشتری فرم‌های تو رو پر کنن و این یعنی نرخ تبدیل بالاتر! 📈

حالا دیگه وقتشه که دست به کار بشی و فرم‌های خودت رو با این روش‌ها زیباتر کنی. مطمئنم نتیجه فوق‌العاده‌ای میگیری! اگه سؤالی داشتی یا به کمک بیشتری نیاز داشتی، میتونی در بخش نظرات با من در میون بذاری. 😊

موفق باشی رفیق! ✨