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

تبليغات شما در داده باران
تبلیغات در داده باران

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

استایل دادن به فرم ارتباط با ما وردپرسReviewed by داده باران on Apr 14Rating:

داده باران | سورس برنامه نویسی ، آموزش

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


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

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

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

<ul id=”contact”>
<li><span class=”text”>نام</span></li>
<li><span class=”text”>ایمیل</span>[email* your-email] </li>
<li><span class=”text”>موضوع</span></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;
}

 

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

حتما بخوانید  آموزش PHP (پی اچ پی) – قسمت نهم
لينك كوتاه اين مطلب : http://www.dadebaran.ir/?p=3233

رمز فايل : DADEBARAN.IR




تبلیغات در داده باران
ارسال دیدگاه

قبل از نوشتن دیدگاه به نکات زیر توجه کنید:
    » نظراتی که با تایپ فارسی نباشند تایید نخواهند شد
    » نظرات تبلیغاتی اسپم محسوب میشوند و IP شخص مسدود خواهد شد.

پاسخ دهید

نکته: نظر شما در انتظار بررسی است و پس از تایید مدیریت در سایت نمایش داده میشود..