پیش‌نمایش زنده (iframe sandbox) تمام‌صفحه
در حال بارگذاری پیش‌نمایش زنده...
<form class="radikalwp-form-newsletter" action="#"><div class="radikalwp-form-newsletter-row"><input class="radikalwp-form-newsletter-input" type="email" placeholder="ایمیل شما" required aria-label="ایمیل"><button class="radikalwp-form-newsletter-btn" type="submit">عضویت<//button><//div><p class="radikalwp-form-newsletter-note">با عضویت، هفته‌ای یک ایمیل کوتاه از کدهای جدید می‌گیرید — بدون اسپم.<//p><//form>
.radikalwp-form-newsletter { max-width: 400px; }
.radikalwp-form-newsletter-row {
  display: flex;
  gap: 8px;
  background: #fff;
  padding: 5px;
  border-radius: 14px;
}
.radikalwp-form-newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 11px 14px;
  font-family: inherit;
  font-size: 13.5px;
  color: #1e293b;
  border: none;
  outline: none;
  background: transparent;
}
.radikalwp-form-newsletter-btn {
  padding: 11px 24px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .25s ease;
}
.radikalwp-form-newsletter-btn:hover { filter: brightness(1.1); }
.radikalwp-form-newsletter-note {
  margin: 10px 4px 0;
  font-size: 11px;
  line-height: 1.8;
  color: #94a3b8;
}
@media (max-width: 400px) {
  .radikalwp-form-newsletter-row { flex-direction: column; }
  .radikalwp-form-newsletter-btn { width: 100%; }
}

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

فرم خبرنامه فشرده با ورودی ایمیل و دکمه عضویت که در یک خط می‌نشیند و در موبایل زیر هم می‌شکند. دکمه گرادیانی و ورودی سفید روی پس‌زمینه تیره کنتراست بالایی دارند و متن رضایت کوچکی زیر فرم اعتماد می‌سازد. برای فوتر، پایان مقالات و بنرهای CTA مناسب است. چیدمان با flex و min-width مدیریت شده تا در عرض‌های مختلف نشکند.

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

این نسخه برای فوتر تیره طراحی شده. برای زمینه روشن، متن یادداشت را خاکستری تیره کنید و حاشیه ظریف به ردیف سفید بدهید تا در پس‌زمینه سفید گم نشود.

بله؛ زیر ۴۰۰ پیکسل ردیف عمودی می‌شود و دکمه تمام‌عرض می‌گیرد تا هدف لمسی بزرگ و راحت باشد.

یک p زیر فرم بگذارید و با JS بعد از response، متن note را به «عضویت شما ثبت شد» تغییر دهید؛ ظاهر تغییر نمی‌کند و فقط محتوای متن عوض می‌شود.

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

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

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

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

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

کپچا

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

شاید بپسندی

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

فرم خبرنامه درون‌خطی

فرم خبرنامه ایمیل
۴۷
۴.۲ (۷)
پیش‌نمایش زنده اسنیپت

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

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

فرم ورود شیشه‌ای شبانه

فرم ورود شیشه‌ای
۱۰۰
۴.۲ (۱۶)