نحوه فرم تماس با فرم 7 فرم در وردپرس

با بیش از 1 میلیون کاربر فعال ، فرم تماس 7 یکی از محبوب ترین افزونه های فرم تماس با وردپرس است. بزرگترین نقطه ضعف آنها این است که فرم های خارج از جعبه که اضافه می کنید بسیار ساده به نظر می رسند. خوشبختانه فرم تماس 7 را می توان با استفاده از CSS در قالب وردپرس خود به راحتی سبک کرد. در این مقاله ، ما به شما نشان خواهیم داد که چگونه فرم تماس 7 فرم را در وردپرس سبک کنید.

توجه: ما دیگر پلاگین Contact Form 7 را توصیه نمی کنیم. درعوض ، ما WPForms را توصیه می کنیم ، که برای مبتدی ترین پلاگین فرم تماس دوستانه است. همچنین می توانید WPForms Lite را به صورت رایگان بارگیری کنید.

ما یک راهنمای گام به گام در نحوه ایجاد فرم تماس در وردپرس .

آموزش فیلم h4>

مشترک شدن در WPBeginner

اگر فیلم را دوست ندارید یا به دستورالعمل های بیشتری احتیاج دارید ، به خواندن ادامه دهید.

شروع کار h4>

با این فرض که شما قبلاً افزونه فرم تماس 7 و اولین فرم تماس خود را ایجاد کرده اید. مرحله بعدی کپی کردن کد کوتاه برای فرم تماس با خود و قرار دادن آن در یک پست وردپرس یا صفحه ای که دوست دارید فرم شما در آن نشان داده شود.

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

Default Contact Form 7 form on a WordPress site using  default WordPress theme

همانطور که می بینید فرم تماس برخی از سبک های فرم را از قالب وردپرس شما به ارث می برد. جدا از آن بسیار اساسی است.

ما فرم های فرم 7 را با استفاده از CSS تمام CSS به درون مضمون شما می رود یا تم کودکانه .

فرم تماس با فرم 7 فرم در وردپرس h4>

فرم تماس 7 کد سازگار و بسیار مفیدی برای فرم ها ایجاد می کند. هر عنصر در فرم دارای یک کلاس ID و CSS مناسب با آن است.

هر فرم تماس از کلاس CSS .wpcf7 استفاده می کند که می توانید از آن برای سبک دادن به فرم خود استفاده کنید.

در این مثال ما از یک قلم Google Lora در قسمتهای ورودی خود استفاده می کنیم. به نحوه مشاهده برای افزودن Google Fonts در وردپرس .

div.wpcf7 {
background-color: #fbefde؛
حاشیه: 1px solid # f28f27؛
بالشتک: 20px؛
}
.wpcf7 input [type = "text"] ،
.wpcf7 input [type = "email"] ،
.wpcf7 textarea {
پس زمینه: # 725f4c؛
رنگ: #FFF؛
font-family: lora، sans-serif؛
نوع قلم: مورب؛
}
.wpcf7 input [type = "ارسال"] ،
.wpcf7 input [type = "دکمه"] {
background-color: # 725f4c؛
عرض: 100٪
text-align: مرکز؛
تبدیل متن: بزرگ؛
}

فرم تماس ما پس از استفاده از این CSS به این شکل بود.

Styling Contact Form 7 forms with CSS in WordPress

فرم دهی فرم تماس چند فرم 7 فرم h4>

مشکلی که در CSS ما در بالا استفاده کردیم این است که روی کلیه فرم های فرم تماس 7 در وب سایت شما اعمال می شود. اگر از چندین فرم تماس استفاده می کنید و می خواهید آنها را به طرز متفاوتی تنظیم کنید ، باید از شناسه تولید شده توسط فرم تماس 7 برای هر فرم استفاده کنید.

به سادگی یک صفحه حاوی فرم مورد نظر برای تغییر باز کنید. موس خود را به قسمت اول فرم وارد کنید ، کلیک راست کرده و گزینه Inspect Element را انتخاب کنید. صفحه مرورگر شکسته می شود و کد منبع صفحه را مشاهده خواهید کرد. در کد منبع ، شما باید خط شروع کد فرم را پیدا کنید.

Finding the element ID for your contact form

همانطور که در تصویر بالا مشاهده می کنید ، کد فرم تماس با ما با خط شروع می شود:

ویژگی id یک شناسه منحصر به فرد است که توسط فرم تماس 7 برای این فرم خاص تولید می شود. این ترکیبی از شناسه فرم و شناسه پست است که این فرم اضافه می شود.

ما برای سبک کردن فرم تماس خود از این شناسه در CSS خود استفاده خواهیم کرد. .wpcf7 را در اولین قطعه CSS خود با # wpcf7-f201-p203-o1 جایگزین خواهیم کرد.

div # wpcf7-f201-p203-o1 {
background-color: #fbefde؛
حاشیه: 1px solid # f28f27؛
بالشتک: 20px؛
}
# wpcf7-f201-p203-o1 ورودی [type = "text"] ،
ورودی # wpcf7-f201-p203-o1 [type = "email"] ،
# wpcf7-f201-p203-o1 textarea {
پس زمینه: # 725f4c؛
رنگ: #FFF؛
font-family: lora، "Open Sans"، sans-serif؛
نوع قلم: مورب؛
}
ورودی # wpcf7-f201-p203-o1 [نوع = "ارسال"] ،
ورودی # wpcf7-f201-p203-o1 [نوع = "دکمه"] {
background-color: # 725f4c؛
عرض: 100٪
text-align: مرکز؛
تبدیل متن: بزرگ؛
}

فرم تماس با فرم 7 فرم با CSS Hero

بسیاری از مبتدیان وردپرس تجربه نوشتن CSS را ندارند و نمی خواهند وقت خود را برای یادگیری آن بگذرانند. خوشبختانه ، یک راه حل عالی برای مبتدیان وجود دارد که به شما امکان می دهد نه تنها فرم تماس خود بلکه تقریباً همه جنبه های سایت وردپرس خود را سبک کنید.

به سادگی CSS Hero را نصب و فعال کنید plugin و به صفحه حاوی فرم خود بروید. روی نوار ابزار CSS Hero کلیک کنید و سپس روی عنصری که می خواهید سبک دهید کلیک کنید. CSS Hero یک رابط کاربری آسان برای ویرایش CSS و بدون نوشتن هرگونه کد برای شما فراهم می کند.

Styling Contact Form 7 Form Using CSS Hero

مشاهده کامل بررسی CSS Hero و نحوه استفاده از آن برای سبک کردن هر چیزی در سایت وردپرس خود. شما می توانید از کوپن CSS Hero کد WPBeginner strong استفاده کنید > برای تخفیف 34٪ تخفیف ویژه.

این همان چیزی است که امیدواریم این مقاله به شما کمک کند یاد بگیرید چگونه فرمهای فرم تماس 7 را در وردپرس سبک کنید. همچنین ممکن است بخواهید راهنمای ما را در نحوه افزودن یک پنجره فرم تماس با ما در وردپرس .

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube مشترک شوید برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .

منبع:
https://www.wpbeginner.com/wp-tutorials/how-to-style-contact-form-7-in-wordpress/.

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