پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<form class="radikalwp-f-contact"><div class="radikalwp-f-contact-row"><div class="radikalwp-f-contact-g"><label>نام و نام خانوادگی<//label><input type="text" placeholder="مثلاً سارا محمدی"><//div><div class="radikalwp-f-contact-g"><label>ایمیل<//label><input type="email" placeholder="you@example.com"><//div><//div><div class="radikalwp-f-contact-g"><label>پیام شما<//label><textarea placeholder="سلام، درباره..."><//textarea><//div><button>ارسال پیام<//button><//form>
.radikalwp-f-contact {
  width: 340px;
  padding: 22px;
  font-family: inherit;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
}
.radikalwp-f-contact-row { display: flex; gap: 12px; }
.radikalwp-f-contact-g { flex: 1; margin-bottom: 14px; display: flex; flex-direction: column; }
.radikalwp-f-contact-g label { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 6px; }
.radikalwp-f-contact-g input,
.radikalwp-f-contact-g textarea {
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  color: #1e293b;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  outline: none;
  resize: vertical;
  transition: all .3s ease;
}
.radikalwp-f-contact-g input:focus,
.radikalwp-f-contact-g textarea:focus { background: #fff; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .1); }
.radikalwp-f-contact-g textarea { min-height: 84px; }
.radikalwp-f-contact button {
  width: 100%;
  padding: 11px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: #4f46e5;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background .3s ease;
}
.radikalwp-f-contact button:hover { background: #4338ca; }

درباره این اسنیپت

فرم تماس با نام و ایمیل کنار هم و پیام در عرض کامل؛ چیدمان حرفه‌ای صفحات ارتباطی. این فیلد برای فرم‌های ورود، ثبت‌نام، جستجو و فیلتر طراحی شده و فوکوس و حالت‌های خطا را پوشش می‌دهد. این المان در ویجت HTML المنتور، فایل قالب استاتیک یا هر پروژه PHP و HTML دیگری بدون تغییر کار می‌کند. برای تغییر حس بصری کافی است متغیرهای رنگ بالای کد را عوض کنید؛ بقیه چیدمان دست‌نخورده می‌ماند.

پرسش‌های متداول

بله، این کد به‌صورت کاملاً رایگان برای استفاده شخصی و تجاری ارائه می‌شود. تنها استفاده از آن در محصولاتی که صرفاً بازفروش همین کد باشند مجاز نیست.

بله، اندازه‌ها با واحدهای نسبی و flex/grid ساخته شده‌اند و در نمایشگرهای کوچک هم درست نمایش داده می‌شوند. اگر عرض ثابت دیدید، می‌توانید آن را با max-width برای موبایل تنظیم کنید.

خیر؛ این کد بدون کتابخانه خارجی و فقط با CSS بهینه نوشته شده و حجم آن چند کیلوبایت است. انیمیشن‌ها روی GPU اجرا می‌شوند و تأثیر محسوسی بر امتیاز PageSpeed ندارد.

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

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

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

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

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

کپچا

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

شاید بپسندی

پیام بگذارید

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

فرم تماس مینیمال تک‌ستونه

فرم تماس مینیمال
۳۲
۴.۶ (۵)
پیش‌نمایش زنده اسنیپت

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

اینپوت فرم لیبل شناور
۱۰۰
۵.۰ (۱۶)
پیش‌نمایش زنده اسنیپت

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

فرم اینپوت خط
۱۰۰
۴.۲ (۱۶)