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

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

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

 

 

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

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

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

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

 

 

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

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

 

 

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

 

 

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

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

 

 

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

 

 

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

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

 

 

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

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

 

 

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