سبد خرید
0

هیچ محصولی در سبد خرید نیست.

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

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

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

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

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

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

 

 

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

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

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

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

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

 

 

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

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

پست پیشنهادی :  آموزش تغییر دامنه وردپرس Multisite

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

 

 

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

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

 

 

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

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

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

 

 

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

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

 

 

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

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

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

 

 

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

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

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

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

 

 

صفحه تماس رو ریفرش کنین و از نتیجه کارتون لذت ببرین!

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

توسط
تومان