نحوه استایل دادن به پلاگین Contact Form 7 در وردپرس

یکی از مزایای اصلی ساخت یک وبسایت اینه که همیشه میتونین در دسترس بازدیدکنندگان/مشتریان باشین. فرم تماس درخواستی، فرصتی عالی برای انجام این ترفنده. Contact Form 7 یکی از بهترین انتخاب‌ها در این زمینه است.

محبوبیت پلاگین Contact Form 7 با توجه به انعطاف پذیری، سهولت استفاده و اجرای ساده اون بسیار زیاده. با این حال هیچ چیز کاملی وجود نداره و این پلاگین وردپرسی هم دارای مشکلاتی هست.

به طور پیش‌فرض، پلاگین Contact Form 7 فرم‌هاش رو استایل نمیده اگر چه کمی ساده هم به نظر میرسه.

وبسایت یه جورایی مثل چهره صاحبشه که برای رسیدن به نتیجه‌ای بی عیب و نقص ضروریه.

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

آنچه در این مطلب میخوانید:

قوانین CSS سفارشی رو کجا اضافه کنیم؟

ما میتونیم با اضافه کردن قوانین ساده CSS در قسمت Appearance -> Customize -> Additional CSS در پنل مدیریتمون این کار رو به راحتی انجام بدیم.

چطور به کل فرم، استایل اضافه کنیم؟

بیاین با اصول شروع کنیم. عنصر سطح بالای فرم تماس دارای کلاس wpcf7 هست. برای استایل کردن کل فرم تماس، قوانین استایل رو برای انتخاب‌گر کلاس اضافه کنین. این، رنگ پس زمینه و حاشیه رو به کل فرم اضافه میکنه.

پست پیشنهادی : آموزش تغییر تصویر پیش‌فرض gravatar با یک تصویر سفارشی

.wpcf7 {
    background-color: #eaf6ff;
    border: 7px solid #0f80be;
}

.wpcf7 {

background-color: #eaf6ff;

border: 7px solid #0f80be;

}

همون طور که میبینین، برخی از مشکلات فاصله‌ای وجود داره، بنابراین بیاین padding رو به فرم اضافه کنیم:

div.wpcf7 {
    padding: 3% 5% 3% 5%;
}

div.wpcf7 {

padding: 3% 5% 3% 5%;

}

چطور به فیلدهای تکی استایل اضافه کنیم؟

رایج‌ترین انواع فیلدهای متن، ایمیل و ناحیه متنی هستن، بنابراین یک قانون استایل برای اونها اضافه میکنیم

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
    background-color: #fff;
}

.wpcf7 input[type="text"],

.wpcf7 input[type="email"],

.wpcf7 textarea {

background-color: #fff;

}

یکی از درخواست‌های متدوال، تنظیم عرض فیلدهاست، بنابراین با کدهای زیر، مناطق رو به موارد دلخواه گسترش میدیم.

.wpcf7-textarea {
    width: 90%; 
} 
 
.wpcf7 input {
    width: 50%;
}
 
.wpcf7-text {
   width: 50%;
}

.wpcf7-textarea {

width: 90%;

}

.wpcf7 input {

width: 50%;

}

.wpcf7-text {

width: 50%;

}

چطور استایل‌های برچسب رو ویرایش کنیم؟

علاوه بر این، میتونیم رنگ، اندازه فونت، font-family و … برچسب‌ها رو با CSS زیر تنظیم کنیم:

.wpcf7 label {
    color: #008287;
    font-size: 20px;
    font-weight: bold;
}

.wpcf7 label {

color: #008287;

font-size: 20px;

font-weight: bold;

}

پست پیشنهادی : آموزش اضافه کردن منوی ناوبری به وردپرس

چطور به دکمه ارسال، استایل اضافه کنیم؟

برای ویرایش رنگ پس زمینه و حاشیه دکمه ارسال، هم برای نمایش فعال و هم نمایش شناور:

.wpcf7 input[type='submit'] {
    color: #ffffff;
    background-color: #008287;
    border: #008287; 
}
        
.submit:hover, input[type='submit'].wpcf7-submit:hover {
    color: #ffffff;
    background-color: #3b5998;
    border-color: #3b5998; 
}