خانه / سیستمهای مدیریت محتوا / وردپرس / چگونه فرم ارتباط پلاگین Contact Form 7 را در وردپرس شکل دهیم؟

چگونه فرم ارتباط پلاگین Contact Form 7 را در وردپرس شکل دهیم؟

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

نکته: ما پلاگین Contact Form 7 را پیشنهاد می کنیم. به جای آن پیشنهاد می کنیم که از WPForms که پلاگین راحتتر و مناسب تر برای مبتدیان است.همچنین می توانید پلاگین WPForms Lite را برای رایگان دانلود کنید.

شروع کار

ما فرض را بر این می گیریم که شما تاکنون پلاگین Contact Form 7 را نصب کرده اید و اولین فرم ارتباط خود را نیز ساخته اید. قدم بعدی این است که کدی که از فرم ارتباط دارید کپی کنید و در یک پست یا صفحه وردپرس که می خواهید این فرم را به نمایش بگذارید قرار دهید.

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

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

شکل دهی فرم های ارتباط Contact Forms 7 در وردپرس

پلاگین Contact Forms 7 یک کد بسیار کاربردی و استاندارد برای فرم ها می سازد. هر المان در این فرم ID متناسب با خودش و کلاس CSS مرتبط با خودش را دارد. هر فرم ارتباطی از کلاس CSS خاص .wpcf7 استفاده می کند که با آن شما می توانید فرم خود را شکل دهی کنید.

در این مثال ما از فونت مخصوص گوگل یعنی لورا (Lora) در داخل بخش های ورودی استفاده کردیم. برای این که ببینید چگونه می توان فونت های گوگل را به وردپرس اضافه کرد به راهنماهای مخوص آن مراجعه کنید.

۰۱ div.wpcf7 {

۰۲ background-color: #fbefde;

۰۳ border: 1px solid #f28f27;

۰۴ padding:20px;

۰۵ }

۰۶ .wpcf7 input[type=”text”],

۰۷ .wpcf7 input[type=”email”],

۰۸ .wpcf7 textarea {

۰۹ background:#725f4c;

۱۰ color:#FFF;

۱۱ font-family:lora, sans-serif;

۱۲ font-style:italic;

۱۳ }

۱۴ .wpcf7 input[type=”submit”],

۱۵ .wpcf7 input[type=”button”] {

۱۶ background-color:#725f4c;

۱۷ width:100%;

۱۸ text-align:center;

۱۹ text-transform:uppercase;

۲۰ }

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

شکل دهی چندین فرم ارتباطی Contact Form 7

مشکل کار با CSS که در بالا از آن استفاده کردیم این است که این کد برای تمام فرم های ارتباطی Contact Form 7 که در وب سایت شما وجود دارند اعمال می شود. اگر از چندین فرم ارتباطی استفاده می کنید و می خواهید هر کدام را به شکل متفاوت شکل دهی کنید، شما باید از ID ساخته شده توسط contact form 7 برای هر فرم استفاده کنید.

یک صفحه که حاوی فرمی که می خواهید تغییر دهید است را باز کنید. موس خود را بر روی اولین بخش ورودی فرم ببرید و راست کلیک کنید و بر روی Inspect Elements کلیک کنید. صفحه مرورگر تقسیم می شود و شما منبع کد صفحه را خواهید دید. در این منبع کد شما باید خط ابتدایی کد فرم را جایگذاری کنید.

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

<div role=”form” class=”wpcf7″ id=”wpcf7-f201-p203-o1″ lang=”en-US” dir=”ltr”>

این ID به یک مشخص کننده که توسط Contct Form 7 برای این فرم بخصوص ساخته شده است، ارتباط دارد. این کد ترکیبی از ID فرم و ID پستی است که فرم در آن قرار دارد.

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

۰۱ div#wpcf7-f201-p203-o1{

۰۲ background-color: #fbefde;

۰۳ border: 1px solid #f28f27;

۰۴ padding:20px;

۰۵ }

۰۶ #wpcf7-f201-p203-o1 input[type=”text”],

۰۷ #wpcf7-f201-p203-o1 input[type=”email”],

۰۸ #wpcf7-f201-p203-o1 textarea {

۰۹ background:#725f4c;

۱۰ color:#FFF;

۱۱ font-family:lora, “Open Sans”, sans-serif;

۱۲ font-style:italic;

۱۳ }

۱۴ #wpcf7-f201-p203-o1 input[type=”submit”],

۱۵ #wpcf7-f201-p203-o1 input[type=”button”] {

۱۶ background-color:#725f4c;

۱۷ width:100%;

۱۸ text-align:center;

۱۹ text-transform:uppercase;

۲۰ }

شکل دهی فرم های ارتباطی Contact Form 7 با استفاده از CSS Hero

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

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

منبع

مطلب پیشنهادی

چگونه مهلت نظر دادن در وردپرس را برای بعضی پست ها تغییر دهیم

یکی از راه حل هایی که اغلب اوقات برای کاهش میزان نظرات اسپم پیشنهاد می …

پاسخ دهید

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