/ در آموزش ها, آموزش وردپرس, اشتراک رایگان / توسط
آخرین زمان ویرایش:

استایل دادن به فرم ارتباط با ما وردپرس

(جهت اطلاعات بیشتر به ادامه مطلب مراجعه نمائید)


با سلام و خسته نباشید خدمت  کاربران سایت داده باران

اگر از افزونه پلاگین 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>

 

سپس به 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;
-۰-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;
}

 

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

نوشته های مشابه

دانلود آموزش جامع نرم افزار illustrator Cs5 – قسمت ۹

(جهت دانلود و اطلاعات بیشتر به ادامه مطلب مراجعه نمائید) (بیشتر…)

دانلود طرح لایه باز کارت ویزیت مشاور املاک

(جهت دانلود و اطلاعات بیشتر به ادامه مطلب مراجعه نمائید) (بیشتر…)

 کانال تلگرام داده باران شارژ آنلاین

نظری بدهید

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