خانهآموزش المنتوربا این کد CSS، به فرم‌ های المنتور خود ظاهر و استایل مدرن تری بدهید
https://rayawp.ir/?p=19739

با این کد CSS، به فرم‌ های المنتور خود ظاهر و استایل مدرن تری بدهید

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

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

🤔فرم المنتور چیه؟

فرم المنتور (Elementor Form) یکی از ویجت‌ها (ابزارک‌ها) در افزونه المنتوره. ویجت فرم المنتور بهت این امکان رو میده انواع فرم‌های مختلف مثل فرم تماس، فرم نظرسنجی و… رو به راحتی طراحی و در سایتت استفاده کنی. این فرم‌ها قابلیت شخصی‌سازی زیادی دارن، از جمله:

  • اضافه کردن فیلدهای متنوع: متن، ایمیل، شماره تلفن، چک‌باکس، انتخاب چندگانه و غیره.
  • استایل‌دهی آسان: انتخاب رنگ، فونت، حاشیه‌ها و اندازه‌ها.
  • اتصال به سرویس‌های جانبی: مثل Mailchimp، Zapier، یا ذخیره اطلاعات فرم در سایت.
  • نمایش پیام‌های سفارشی بعد از ارسال فرم.

اما با وجود همه این امکانات، ممکنه ظاهر فرم‌ های پیش‌فرض المنتور خیلی ساده یا شبیه به بقیه سایت‌ها باشه. اینجاست که با کمک CSS سفارشی میتونی فرم‌ها رو خاص‌تر، حرفه‌ای‌تر و متناسب با برند یا سبک طراحی سایتت کنی.

اگر به طراحی یا بهبود این فرم‌ها علاقه داری، می‌تونم نکات بیشتری هم بهت بگم! 😊 پس همینطور به خوندن ادامه بده و چشم برندار 🙂

✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

🪶استایل دادن به فرم های المنتور با CSS

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

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

1️⃣ اولین قدم: اضافه کردن ویجت فرم المنتور به صفحه

برای شروع، باید فرم المنتور رو به صفحه‌ای که می‌خواهی، اضافه کنی. این کار خیلی راحت و سریع انجام میشه! 😊

  1. وارد پیشخوان وردپرس شو: اول باید وارد پنل مدیریت وردپرس بشی و به صفحه‌ای که می‌خواهی فرم رو توش قرار بدی، بری.
  2. ویرایش با المنتور: بعد روی دکمه “ویرایش با المنتور” کلیک کن تا وارد محیط طراحی المنتور بشی.
  3. اضافه کردن ویجت فرم:
    • توی نوار ابزار سمت راست، کلمه “Form” یا “فرم” رو جستجو کن.
    • ویجت “Form” رو پیدا کن و با کشیدن و رها کردنش، بذار توی صفحه‌ات.
  4. تنظیمات فرم: بعد از اینکه فرم رو گذاشتی، می‌تونی فیلدها رو اضافه کنی و هر کدوم رو که می‌خوای ویرایش کنی. می‌تونی فیلدهایی مثل نام، ایمیل، پیام و حتی چک‌باکس‌ها و رادیو باتن‌ها رو اضافه کنی. ( در این مرحله حتما برچسب یا متن نگهدارنده فرم ها رو حذف کن اما به لیبل ها دست نزن)
  5. برو به تب استایل: یه فونت جذاب با اندازه مناسب برای عناوین فرم و فیلدها انتخاب کن. این قسمت رو می‌تونی طبق سلیقه و نیاز خودت تغییر بدی تا فرم کاملاً به سلیقه‌ت بخوره.

برای قدم بعدی آماده‌ای؟ 😎

2️⃣ دومین قدم: اضافه کردن کد CSS سفارشی

حالا که فرم رو طراحی کردی و استایل پایه رو تنظیم کردی، وقتشه که کمی بهش استایل و افکت بدی با کدهای CSS سفارشی. ✨

  1. رفتن به بخش تنظیمات فرم: اول فرم‌ات رو انتخاب کن و از پنل سمت راست وارد بخش “Advanced (پیشرفته)” بشو.
  2. اضافه کردن کد CSS: توی بخش Custom CSS، کدهای CSS زیر رو وارد کن.

برای اینکه لیبل‌های فیلدهای متنی به شکل حرفه‌ای و مشابه فرم‌های گوگل با یک کلیک به بالای فیلد منتقل بشن و تجربه‌ی کاربری جذاب‌تری ایجاد بشه، از کد زیر استفاده کن که انیمیشن و افکت‌های جذاب‌تری به فرم‌ها اضافه می‌کنه:

/* Stylish input fields with interactive floating labels By RayaWp.ir */
.elementor-form .elementor-field input[type="text"],
.elementor-form .elementor-field textarea {
    display: inline-block;
    height: 4em !important;
    border: 1px solid #d1d5db;
    padding: 0.8em;
    font-size: 14px !important;
    line-height: normal;
    color: #111827;
    background-color: #fff7e6;
    border-radius: 4px; 
    box-shadow: 0 4px 8px rgba(255, 140, 0, 0.1);
    position: relative;
    padding-right: 2.5em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.elementor-form .elementor-field input[type="text"]:focus,
.elementor-form .elementor-field textarea:focus {
    border-color: #fb923c;
    box-shadow: 0 4px 8px rgba(251, 146, 60, 0.3);
    transform: scale(1.02);
}

.elementor-form .elementor-field-group label {
    color: #6b7280;
    font-size: 1em;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    right: 0.8em;
    transform: translateY(-50%);
    background: white;
    padding: 0 0.8em;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.elementor-form .elementor-field input[type="text"]:focus + label,
.elementor-form .elementor-field textarea:focus + label,
.elementor-form .elementor-field input[type="text"]:not(:placeholder-shown) + label,
.elementor-form .elementor-field textarea:not(:placeholder-shown) + label,
.elementor-form .elementor-field-group:focus-within label {
    top: -4px;
    right: 1em;
    font-size: 0.75em;
    color: #fb923c !important;
}

.elementor-form .elementor-field-group {
    position: relative;
    margin-bottom: 25px !important;
}

.elementor-button {
    height: 3.5em;
    padding: 0 1.5em;
    background-color: #fb923c;
    color: white;
    border-radius: 4px; 
    font-size: 14px;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.elementor-button:hover {
    background-color: #f97316;
    transform: translateY(-2px);
}

3️⃣ اضافه کردن کد جاوا اسکریپت برای کنترل عملکرد لیبل

بدون جاوا اسکریپت همونطور که میبینی همه چیز درسته اما فرم یه اشکال کوچیک داره اونم اینکه زمانیکه فیلدها پر میشن توسط اطلاعات کاربر و از حالت انتخاب خارج میشن لیبل فیلد دوباره برمیگرده داخل فیلد و روی متن فیلد رو میپوشه که باعث میشه متن نوشته شده داخل فیلد به درستی مشاهده نشه برای رفع این مشکل باید یه ویجت html زیر همون ویجت فرم المنتور اضافه کنی و کد زیر رو داخلش قرار بدی :

<script>
    const elementFieldLable = document.querySelectorAll('.elementor-field-label');
    const elementorField = document.querySelectorAll('.elementor-field');

    elementorField.forEach((e) => {
        e.addEventListener('focus', (e) => {
            const elemLable = e.target.previousElementSibling;
            elemLable.style.top = '-4px';
            elemLable.style.right = '1em';
            elemLable.style.fontSize = '0.75em';
            elemLable.style.color = '#fb923c';
        });
    });

    elementorField.forEach((e) => {
        e.addEventListener('blur', (e) => {
            const elemLable = e.target.previousElementSibling;
            if (!e.target.value) {
                elemLable.style.top = '50%';
                elemLable.style.right = '0.8em';
                elemLable.style.fontSize = '1em';
                elemLable.style.color = '#6b7280';
            }
        });
    });
</script>

تبریک می‌گم! 🎉 حالا این افکت تعاملی به فرم المنتورت اضافه شده و برچسب‌ها مثل فرم‌های گوگل به بالای فیلدها منتقل می‌شن.


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

5/5 - (4 امتیاز)

اگه از مطالب سایت خوشت اومده و کارت رو راه انداخته، می‌تونی با یه حمایت کوچیک کمک کنی بهتر و قوی‌ترش کنیم! هر مبلغی که کمک کنی، مستقیم میره برای توسعه سایت و تولید محتوا و آموزش های جذاب‌ تر. 🌟

ارسال نظر ( 0 نظر تایید شده )

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

📖 آنچه خواهید خواند

Toggle
    🔥
    37 نفر در حال مطالعه این مقاله
    Picture of SaeID
    SaeID

    عاشق یادگیری وردپرس و کلن طراحی سایت هستم. سعی میکنم دانش و تجربیات خودمو در رایا وردپرس باهاتون به اشتراک بزارم :)

    مقالات بیشتر
    بستن