<form class="radikalwp-f-ticket"><div class="radikalwp-f-ticket-g"><label>موضوع<//label><input type="text" placeholder="خلاصه مشکل را بنویسید"><//div><div class="radikalwp-f-ticket-g"><label>اولویت<//label><div class="radikalwp-f-ticket-prios"><label class="radikalwp-f-ticket-prio"><input type="radio" name="radikalwp-prio" checked><span>کم<//span><//label><label class="radikalwp-f-ticket-prio"><input type="radio" name="radikalwp-prio"><span>متوسط<//span><//label><label class="radikalwp-f-ticket-prio"><input type="radio" name="radikalwp-prio"><span>فوری<//span><//label><//div><//div><button>ثبت تیکت<//button><//form>
.radikalwp-f-ticket {
width: 300px;
padding: 20px;
font-family: inherit;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 14px;
}
.radikalwp-f-ticket-g { margin-bottom: 14px; }
.radikalwp-f-ticket-g > label { display: block; font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 6px; }
.radikalwp-f-ticket-g input[type="text"] {
width: 100%;
padding: 10px 12px;
font-family: inherit;
font-size: 13px;
color: #1e293b;
background: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
outline: none;
transition: border-color .3s ease;
}
.radikalwp-f-ticket-g input[type="text"]:focus { border-color: #f59e0b; }
.radikalwp-f-ticket-prios { display: flex; gap: 8px; }
.radikalwp-f-ticket-prio input { display: none; }
.radikalwp-f-ticket-prio span {
display: inline-block;
padding: 7px 16px;
font-size: 12.5px;
font-weight: 600;
color: #64748b;
background: #f1f5f9;
border: 1.5px solid transparent;
border-radius: 999px;
cursor: pointer;
transition: all .25s ease;
}
.radikalwp-f-ticket-prio input:checked + span { color: #b45309; background: #fef3c7; border-color: #f59e0b; }
.radikalwp-f-ticket button {
width: 100%;
padding: 11px;
font-family: inherit;
font-size: 14px;
font-weight: 700;
color: #fff;
background: #f59e0b;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background .3s ease;
}
.radikalwp-f-ticket button:hover { background: #d97706; }
درباره این اسنیپت
فرم پشتیبانی با عنوان و اولویت و توضیح کوتاه؛ برای سیستم تیکت ساده بدون پیچیدگی. این فیلد برای فرمهای ورود، ثبتنام، جستجو و فیلتر طراحی شده و فوکوس و حالتهای خطا را پوشش میدهد. ساختار HTML حداقلی دارد و افزودن یا حذف تکرار المانها بدون بههمریختگی انجام میشود. رنگها و اندازهها با متغیرهای ساده CSS قابل تغییرند و میتوانید آنها را با پالت برند خودتان هماهنگ کنید.
پرسشهای متداول
خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشنها روی GPU اجرا میشوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.
بله، این کد بهصورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه میشود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.
بله، اندازهها با واحدهای نسبی و flex/grid ساخته شدهاند و در نمایشگرهای کوچک هم درست نمایش داده میشوند. اگر عرض ثابت دیدید، میتوانید آن را با max-width برای موبایل تنظیم کنید.
امتیاز شما به این محتوا
میانگین امتیاز کاربران: ۴.۱ از ۱۰ رأی — برای امتیازدهی وارد شوید
دیدگاهها (۰)
هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!