پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<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 برای موبایل تنظیم کنید.

امتیاز شما به این محتوا

میانگین امتیاز کاربران: ۴.۱ از ۱۰ رأی — برای امتیازدهی وارد شوید

دیدگاه‌ها (۰)

هنوز دیدگاهی ثبت نشده؛ اولین نفر باشید!

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

کپچا

دیدگاه شما پس از تأیید مدیر نمایش داده می‌شود.

شاید بپسندی

پیش‌نمایش زنده اسنیپت

اینپوت خط زیر متحرک

فرم اینپوت خط
۱۰۰
۴.۲ (۱۶)
پیش‌نمایش زنده اسنیپت

اینپوت با آیکون جستجو داخلی

فرم جستجو آیکون
۱۰۰
۴.۷ (۱۶)
پیش‌نمایش زنده اسنیپت

اینپوت لیبل شناور

اینپوت فرم لیبل شناور
۱۰۰
۵.۰ (۱۶)