سفارشی کردن فرم ارتباط با ما وردپرس

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

به قسمت تنظیمات این افزونه رفته ( اگر هنوز این افزونه را ندارید می توانید به افزونه های سایت وردپرس رفته دانلود کنید ).سپس کد زیر را در قسمت فرم برای نمایش آن وارد کنید.

<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-۷/includes/css/style.css وارد کنید.

#contact{
font-family: tahoma;
list-style:none;
margin:۰;
}
#contact li{
float: left;
height: ۶۰px;
margin:۰ ۰ ۲۰px;
position: relative;
width: ۵۴۰px;
font-family: tahoma;
}
#contact li .text{
font-family: tahoma;
background: #F۰EFEF;
padding:۱۵px ۱۰px ۱۰px ۰;
position:absolute;
z-index:۱۰۰;
min-width:۸۵px;
border-bottom-right-radius: ۵px;
-moz-border-radius-bottomright:۵px;
-webkit-border-bottom-right-radius:۵px;
border-top-left-radius: ۵px;
-moz-border-radius-topleft:۵px;
-webkit-border-top-left-radius:۵px;
text-indent: ۵px;
}
#contact li .required{
font-family: tahoma;
position:absolute;
right:۱۰px;
top:۱۰px;
z-index:۱۰۰;
}
#contact li .wpcf۷-form-control-wrap{
position: absolute;
font-family: tahoma;
}
#contact li .wpcf۷-form-control-wrap input, #contact li .wpcf۷-form-control-wrap textarea{
background:#fff;
border:solid ۵px #F۰EFEF;
border-radius:۵px;
-moz-border-radius:۵px;
-webkit-border-radius:۵px;
padding:۱۵px ۱۰px ۲۵px;
width: ۵۰۹px;
text-indent:۹۵px;
font-family: tahoma;
z-index:۱۰۰;
margin:۰;
}
#contact li .wpcf۷-form-control-wrap input:focus, #contact li .wpcf۷-form-control-wrap textarea:focus{
background:#F۰EFEF;
font-family: tahoma;
}
#contact li .wpcf۷-form-control-wrap textarea{
line-height: ۲۸px;
padding: ۱۰px;
font-family: tahoma;
height:۲۰۰px;
}
#contact li#message{
min-height:۲۲۰px;
font-family: tahoma;
}
#contact li#submit input{
color:#fff;
font-family: tahoma;
text-decoration:none;
margin:۱۰px ۳۰px ۰ ۰;
background:#۰۹b۲f۳;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#۶۹d۲f۹', endColorstr='#۰۹b۲f۳');
background: -webkit-gradient(linear, ۰% ۰%, ۰% ۱۰۰%, from(#۶۹d۲f۹), to(#۰۹b۲f۳));
background: -moz-linear-gradient(top, #۶۹d۲f۹, #۰۹b۲f۳);
border:none;
-moz-border-radius:۳px;
-webkit-border-radius:۳px;
-۰-border-radius:۳px;
border-radius:۳px;
display:block;
padding:۱۰px ۲۵px;
text-align:center;
text-shadow:۰ ۱px ۰ #۰۹b۲f۳;
text-transform:uppercase;
}
#contact li#submit input:hover{
background:#۶۹d۲f۹;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#۰۹b۲f۳', endColorstr='#۶۹d۲f۹');
background: -webkit-gradient(linear, ۰% ۰%, ۰% ۱۰۰%, from(#۰۹b۲f۳), to(#۶۹d۲f۹));
background: -moz-linear-gradient(top, #۰۹b۲f۳, #۶۹d۲f۹);
-moz-box-shadow:۰ ۱px ۲px rgba(۰,۰,۰,.۵) inset;
-webkit-box-shadow:۰ ۱px ۲px rgba(۰,۰,۰,.۵) inset;
-o-box-shadow:۰ ۱px ۲px rgba(۰,۰,۰,.۵) inset;
box-shadow:۰ ۱px ۲px rgba(۰,۰,۰,.۵) inset;
color:#۰۶۵۰۶c;
text-shadow:۰ ۱px ۰ rgba(۲۵۵,۲۵۵,۲۵۵,.۲۵);
text-transform:uppercase;
cursor:pointer;
font-family: tahoma;
}
div.wpcf۷-validation-errors {
clear: left;
font-family: tahoma;
 
}

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