چجوری برای contact form 7 استایل بدم؟

[Sajjad 11]

سلام این استایل contact form 7 من هست که html شده حالا چجوری باید نمایشش داد؟

}
.contact {
line-height:22px;
}
.contact input,.contact textarea {
background:#f5f5f5;
border:1px solid #d7d7d7;
padding:3px 5px 5px;
border-radius:4px;
width:230px;
}
.contact textarea {
height:100px;
}
.contact input.send {
background:url(images/comment_bg.gif);
border:0;
padding:2px 11px 6px;
border-radius:4px;
direction:ltr;
text-align:left;
margin:8px 0 0 0;
width:auto;
cursor:pointer;
color:#fafafa;
}

[imanfakhar 26231]

منظورتون نمایش دادن فرمه یا استایل؟

استایل را که می تونید به انتهای style.css قالب هم اضافه کنید ولی خود فرم موقع ساخته شدن یک کد شرت کات بهتون می ده که در هنگام ارسال پست یا برگه می تونید قرارش بدید تا فرم قابل مشاهده بشه

[arman100000 1264]

اگه منظورتون رو درست متوجه شده باشم بايد اين كد رو توي فايل css توي اين فلودر بزاريد

http://www.example.com/wp-content/plugins/contact-form-7/includes/css

[Sajjad 11]

فرم تماس من تو وردپرس اینجوریه الان! ( وردپرس )

من میخوام اینجوری نمایش داده بشه استایلش هم بالا هست. ( html )

[Farid 2281]

فرم تماس من تو وردپرس اینجوریه الان! ( وردپرس )

سلام

دوست عزیز فکر کنم شما باید فایل css موجود در پوشه افزونه را مطابق میلتون ویرایش کنید یا اینکه کلاس هایی که به این فرم اختصاص داده شده را به فایل style.css قالب خودتون اضافه کنید .

ویرایش شده آبان 91 توسط f.gh1372

[Sajjad 11]

اگر کسی انجام بده ممنون میشم!

[Sajjad 11]

آقا فکر نکنم ربطی به افزونه داشته باشه اصلامن میخوام به فرم ارسال نظر همین استایل رو بدم چجوری؟

[Morteza 34190]

ببینید فقط تغییر در استایل هست. شما باید css رو یاد بگیرید.

نمونه:

http://jsfiddle.net/man4toman/X67RY/

[ata3929 0]

سلام دوستان من چطوری میتونم تو این فرم خروجی متنی که میده استایل بدم

مثلا مثل این

[Parsa 23463]

کلاسهای پیام

div.wpcf7-mail-sent-ok {
border: 2px solid #398f14 ;
}
div.wpcf7-mail-sent-ng {
border: 2px solid #ff0000;
}

[ata3929 0]

کلاسهای پیام

div.wpcf7-mail-sent-ok {
border: 2px solid #398f14 ;
}
div.wpcf7-mail-sent-ng {
border: 2px solid #ff0000;
}

اینارو تو css سایت قرار بدم؟

این کدها که تو قسمت contact-form-7/includes/css/styles.css

پلاگین ها هست

ویرایش شده آبان 92 توسط ata3929

[Parsa 23463]

یا فایل css افزونه را تغییر دهید

یا کدها را در style.css استفاده کنید

و important کنید

http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

[ata3929 0]

یا فایل css افزونه را تغییر دهید

یا کدها را در style.css استفاده کنید

و important کنید

http://coding.smashi...when-to-use-it/

من کدهای موجود در css پلاگین که در این جا بود

plugins/contact-form-7/includes/css/styles.css

کلا با این کد عوض کردم ولی باز کار نکرد

div.wpcf7 {
margin: 0;
padding: 0;
}

div.wpcf7-response-output {
padding: 0.2em 1em;
}
div.wpcf7-mail-sent-ok {
background: #b6ff99;
float: right;
color: #30801c;
border-radius: 5px;
padding: 15px;
}

div.wpcf7-mail-sent-ng {
border: 2px solid #ff0000;
}
div.wpcf7-spam-blocked {
border: 2px solid #ffa500;
}

div.wpcf7-validation-errors {
background: #ff9999;
float: right;
color: #801c1c;
border-radius: 5px;
padding: 15px;
}
span.wpcf7-form-control-wrap {
position: relative;
}

span.wpcf7-not-valid-tip {
float:left;
top: 20%;
left: 20%;
z-index: 100;
background: #fff;
color:#ff0000;
font-size: 10pt;
width: 280px;
padding: 2px;
}
span.wpcf7-not-valid-tip-no-ajax {
color: #f00;
font-size: 10pt;
display: block;
}

span.wpcf7-list-item {
margin-left: 0.5em;
}
.wpcf7-display-none {
display: none;
}

div.wpcf7 img.ajax-loader {
border: none;
vertical-align: middle;
margin-left: 4px;
}
div.wpcf7 .watermark {
color: #888;
}

div.wpcf7 textarea {
padding:5px ;border:1px solid #ccc; border-radius: 5px
background: #e8e8e8;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 1px 1px 1px #FFF;
font-family: Tahoma,Arial;
}

div.wpcf7 textarea:focus {
background: #F2F2F2;
font-family: Tahoma,Arial;
}

div.wpcf7 input {
padding:5px ;border:1px solid #ccc; border-radius: 5px
background: #e8e8e8;
position: relative;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
font-family: Tahoma,Arial;
}

div.wpcf7 input:focus {
background: #F2F2F2;
font-family: Tahoma,Arial;
text-shadow: 1px 1px 1px #FFF;
}
div.wpcf7 input[type=submit] {
padding:8px 16px ;border:1px solid #6587a2; border-radius: 5px;
}

.wpcf7-submit {

font-family: Tahoma,Arial;
font-size:12px;
border: 1px solid #6587a2;
background: #799db9;
background: -webkit-gradient(linear, left top, left bottom, from(#92b1c8), to(#799db9));
background: -webkit-linear-gradient(top, #92b1c8, #799db9);
background: -moz-linear-gradient(top, #92b1c8, #799db9);
background: -ms-linear-gradient(top, #92b1c8, #799db9);
background: -o-linear-gradient(top, #92b1c8, #799db9);
padding: 8px 16px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #FFF;
text-decoration: none;
vertical-align: middle;
}
.wpcf7-submit:hover {
border-top-color: #799db9 !important;
background: #799db9 !important;
color: #ffffff;
}
.wpcf7-submit:active {
border-top-color: #7094b1 !important;
background: #7094b1 !important;
}

حتی این کدهارو تو css سایت هم گذاشتم ولی باز کار نکرد

[Parsa 23463]

رفرش کنید CTRL + F5

بعد از ارسال

با inspect element مرورگر بررسی کنید . استایل از کجا گرفته میشود

[Alireza Xn 1644]

خوب میتونید یک برگه اختصاصی طراحی کنید و برای اون برگه استایل مخصوص خودتون رو بذارید و بعد کد شورت کارت contanct fourm 7 رو داخل اون برگه بذارید به همین راحتی !!

من خودمم از همین روش استفاده میکردم ...

[ata3929 0]

رفرش کنید CTRL + F5

بعد از ارسال

با inspect element مرورگر بررسی کنید . استایل از کجا گرفته میشود

رفرش میکنم بازم نمیشه

مسیر هم همون فایل css پلاگین هست

[Parsa 23463]

شما اگر همون فایل رو تغییر بدهید مشکل حل میشه

تغییرات اعمال نمیشه؟

http://contactform7.com/styling-contact-form/