Eğer sizde yazar alımı yapacaksanız web sitenize bu formu ufak ayarlarla anında kullanabilirsiniz. Ancak sadece iletişim olarak kullanacaksanız eklentide istenilen yerleri silerek ve istediğiniz şekilde düzenleyerek kullanabilir ve resimleri değiştirebilirsiniz. Ama bu yazımızda yazar alımı formunun ayarlarını vereceğiz.
Sitedeki görünüm için link: http://www.tekno-logy.com/yazar-ol
Gelen e-posta görünümü
1) CSS leri stil dosyanıza ekleyiniz ( örneğin .FormGonder adında bir css tanımı olmadığına dikkat edin yani sadece . FormGonder için vereceğim diğer tanımlamalar içinde geçerli ama aynısının olacağını sanmıyorum)
/* İletisim formu style */
.Formisim{
background:#FFFFFF url(images/FormUser.png) no-repeat 4px 4px;
padding:4px 4px 4px 30px;
border:1px solid #CCCCCC;
width:230px;
height:25px;
opacity:1;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.Formisim:focus{
background:#FFFFFF url(images/FormUser.png) no-repeat 4px 4px;
padding:4px 4px 4px 30px;
border:1px solid #CCCCCC;
width:230px;
height:25px;
opacity:0.6;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.Formmail{
background:#FFFFFF url(images/Formmail.png) no-repeat 4px 4px;
padding:4px 4px 4px 30px;
border:1px solid #CCCCCC;
width:230px;
height:25px;
}
.Formmail:focus{
background:#FFFFFF url(images/Formmail.png) no-repeat 4px 4px;
padding:4px 4px 4px 30px;
border:1px solid #CCCCCC;
width:230px;
height:25px;
opacity:0.6;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.Formweb{
background:#FFFFFF url(images/FormWeb.png) no-repeat 4px 4px;
padding:4px 4px 4px 30px;
border:1px solid #CCCCCC;
width:230px;
height:25px;
opacity:1;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.Formweb:focus{
background:#FFFFFF url(images/FormWeb.png) no-repeat 4px 4px;
padding:4px 4px 4px 30px;
border:1px solid #CCCCCC;
width:230px;
height:25px;
opacity:0.6;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.FormUzman{
background:#FFFFFF url(images/Formuzman.png) no-repeat 4px 4px;
padding:4px 4px 4px 30px;
border:1px solid #CCCCCC;
width:230px;
height:25px;
opacity:1;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.FormUzman:focus{
background:#FFFFFF url(images/Formuzman.png) no-repeat 4px 4px;
padding:4px 4px 4px 30px;
border:1px solid #CCCCCC;
width:230px;
height:25px;
opacity:0.6;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.FormFacebook{
background:#FFFFFF url(images/FormFace.png) no-repeat 4px 4px;
padding:4px 4px 4px 30px;
border:1px solid #CCCCCC;
width:230px;
height:25px;
opacity:1;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.FormFacebook:focus{
background:#FFFFFF url(images/FormFace.png) no-repeat 4px 4px;
padding:4px 4px 4px 30px;
border:1px solid #CCCCCC;
width:230px;
height:25px;
opacity:0.6;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.FormTwit{
background:#FFFFFF url(images/FormTwit.png) no-repeat 4px 4px;
padding:4px 4px 4px 30px;
border:1px solid #CCCCCC;
width:230px;
height:25px;
opacity:1;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.FormTwit:focus{
background:#FFFFFF url(images/FormTwit.png) no-repeat 4px 4px;
padding:4px 4px 4px 30px;
border:1px solid #CCCCCC;
width:230px;
height:25px;
opacity:0.6;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.FormYazar{
background:#FFFFFF url(images/Formdeneyim.png) no-repeat 4px 4px;
padding:4px 4px 4px 30px;
border:1px solid #CCCCCC;
width:230px;
height:25px;
opacity:1;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.FormYazar:focus{
background:#FFFFFF url(images/Formdeneyim.png) no-repeat 4px 4px;
padding:4px 4px 4px 30px;
border:1px solid #CCCCCC;
width:230px;
height:25px;
opacity:0.6;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.FormGecmis {
background:#FFFFFF url(images/FormGecmis.png) no-repeat 0px 8px;
border: 1px solid #CCCCCC;
width: 250px;
height: 90px;
padding:4px 4px 4px 75px;
vertical-align:center;
opacity:1;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.FormGecmis:focus {
background:#FFFFFF url(images/FormGecmis.png) no-repeat 0px 8px;
border: 1px solid #CCCCCC;
width: 250px;
height: 90px;
padding:4px 4px 4px 75px;
vertical-align:center;
opacity:0.6;
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.FormBot2 {
border: 2px dashed #D1C7AC;
width: 50px;
}
.FormGonder {
background-color: #db6600;
padding-left:6px;
padding-right:6px;
padding-top:3px;
padding-bottom:3px;
color: #ffffff;
border:1px solid #db6600;
background-image: url(images/FormButton.jpg);
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
.FormGonder:hover {
background-color: #000000;
border:1px solid #000000;
background-image: url(images/FormButtonHover.jpg);
-webkit-transition:all 0.5s;
-o-transition:all 0.5s;
-moz-transition:all 0.5s;
}
2)Contact Form7 Form ayarları
İsim Soyisim
[text* text-58 class:Formisim]
E-posta (gerekli)
[email* email-819 class:Formmail]
Yazarın başvuracağı kategori
[text* text-618 class:FormUzman]
Facebook
[text* text-83 class:FormFacebook]
Twitter
[text text-598 class:FormTwit]
Web Site
[text text-562 class:Formweb]
Yazarlık Deneyimi
[text text-327 class:FormYazar]
İnternet ve teknoloji geçmişinizi kısaca anlatın
[textarea* textarea-808 class:FormGecmis]
[captchac captcha-118 class:FormBot size:m]
[captchar captcha-118 class:FormBot2 /4 7/]
[submit class:FormGonder]
3)Contact Form7 E-Posta ayarları
İsim: [text-58] <[email-819]>
Başvuracağı kategori: [text-618]
Web site: [text-562]
Yazarlık deneyimi: [text-327]
İnternet geçmişi: [textarea-808]
İletişim Bilgileri
E-Posta: [email-819]
Facebook: [text-83]
Twitter: [text-598]
--
Bu E-Postawww.tekno-logy.com adresinden yazar başvurusu bilgilendirme formundan gelen postadır.
Kaynak: http://www.tekno-logy.com/contact-form-7-css-kodlamasi-ve-e-posta-ayarlari.html