شخصی سازی فرم ارتباط با ما وردپرس

اگر از افزونه پلاگین contact form 7 برای قسمت ارتباط با مای سایتتون استفاده می کنید مثله من ولی ظاهرشو دوست ندارید امروز برای شما استایل و شیوه نامه ارتباط با ما وب سایت خودمو گذاشتم اگر دوست داشتین شما هم ازین قالب برا سایتتون استفاده کنید.به قسمت تنظیمات این افزونه رفته ( اگر هنوز این افزونه را ندارید می توانید به افزونه های سایت وردپرس رفته دانلود کنید ).سپس کد زیر را در قسمت فرم برای نمایش آن وارد کنید.

<ul id="contact">
<li><span class="text">نام</span>text* your-name</li>

<li><span class="text">ایمیل</span>[email* your-email] </li>

<li><span class="text">موضوع</span>text your-subject</li>

<li id="message"><span class="text">پیام</span>[textarea your-message] </li>

<li id="submit">[submit "ارسال"]</li>
</ul>

تصحیح : در خط دوم و چهارم کد دو عبارت >text* your-name و text your-subject را درون [   ]  قرار بدهید.اگر من اینجا بزارم ازم خطا میگیره !

سپس به file manager هاست خود رفته و شیوه نامه ی زیر را کپی کرده و در انتهای  شیوه نامه خود

wp-contents/plugin/contact-form-7/includes/css/style.css

وارد کنید.

#contact{
font-family: tahoma;
list-style:none;
margin:0;
}
#contact li{
float: left;
height: 60px;
margin:0 0 20px;
position: relative;
width: 540px;
font-family: tahoma;
}
#contact li .text{
font-family: tahoma;
background: #F0EFEF;
padding:15px 10px 10px 0;
position:absolute;
z-index:100;
min-width:85px;
border-bottom-right-radius: 5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-right-radius:5px;
border-top-left-radius: 5px;
-moz-border-radius-topleft:5px;
-webkit-border-top-left-radius:5px;
text-indent: 5px;
}
#contact li .required{
font-family: tahoma;
position:absolute;
right:10px;
top:10px;
z-index:100;
}
#contact li .wpcf7-form-control-wrap{
position: absolute;
font-family: tahoma;
}
#contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{
background:#fff;
border:solid 5px #F0EFEF;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding:15px 10px 25px;
width: 509px;
text-indent:95px;
font-family: tahoma;
z-index:100;
margin:0;
}
#contact li .wpcf7-form-control-wrap input:focus, #contact li .wpcf7-form-control-wrap textarea:focus{
background:#F0EFEF;
font-family: tahoma;
}
#contact li .wpcf7-form-control-wrap textarea{
line-height: 28px;
padding: 10px;
font-family: tahoma;
height:200px;
}
#contact li#message{
min-height:220px;
font-family: tahoma;
}
#contact li#submit input{
color:#fff;
font-family: tahoma;
text-decoration:none;
margin:10px 30px 0 0;
background:#09b2f3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#69d2f9', endColorstr='#09b2f3');
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#69d2f9), to(#09b2f3));
background: -moz-linear-gradient(top, #69d2f9, #09b2f3);
border:none;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-0-border-radius:3px;
border-radius:3px;
display:block;
padding:10px 25px;
text-align:center;
text-shadow:0 1px 0 #09b2f3;
text-transform:uppercase;
}
#contact li#submit input:hover{
background:#69d2f9;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#09b2f3', endColorstr='#69d2f9');
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#09b2f3), to(#69d2f9));
background: -moz-linear-gradient(top, #09b2f3, #69d2f9);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
-o-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
color:#06506c;
text-shadow:0 1px 0 rgba(255,255,255,.25);
text-transform:uppercase;
cursor:pointer;
font-family: tahoma;
}
div.wpcf7-validation-errors {
clear: left;
font-family: tahoma;

}

در نهایت فرم ارتباط با ما خیلی خوشگل و باکلاس پیدا می کنید !! امیدوارم به دردتون بخوره ! همچنین شما میتوانید قابلیت پیوست و ضمیمه کردن فایل هم به فرمتون اضافه کنید.