Bilindiği gibi Blogger yeni bir güncelleme ile iletişim formu özelliği getirmişti. Ancak bu özellik sadece widget olarak kullanılabiliyor ve Blogger kullanıcılarını yeterince tatmin etmiyordu. Hal böyleyken Wordpress bloglarda görmeye alışkın olduğumuz ayrı bir sayfada iletişim formu oluşturma özelliğini de Blogger'da kullanabileceğimizi fark ettim. Yeni gelen iletişim widgetinin kodlarından da faydalanarak bunu bir sayfada göstermeyi başardım.

Bazı bloglarda iletişim formu kodları paylaşılmış ancak bu kodlarda iletişim widgeti eklemeden iletişim formu görünmüyor. Yani mutlaka widget eklemek gerekiyor. Bu makalede vereceğim kodda herhangi bir widget eklemeye gerek kalmayacak. Üstelik tamamen şık bir görünüme sahip iletişim formuna kavuşacaksınız.

Eklentinin Önizlemesi: http://www.masivaname.com/p/iletisim.html

1) Blogger panelinizden sayfalar kısmına gidip iletişim adında "Yeni Sayfa" oluşturun.
2) Editörde HTML düzenine geçerek aşağıdaki kodları yapıştırın ve kaydedin.

<div class='form'>
<!-- Custom Contact Form By MBT Starts -->
<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit MBT-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>
<!-- Validation -->
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
<!-- Custom Contact Form By MBT Ends -->
</div>

3) HTML Şablon düzenlemeye gelip </head> kodunu aratın.
4) Ardından aşağıdaki kodları </head> kodunun altına yapıştırın ve kaydedin.

<style>
/*---- Compatible contact Form by MBT -----*/
.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 220px;
width: 100%;
font-weight:bold;
}
   
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioSN-bvReU9G9LGyHGkzz3TQxlRL200guCuN7Pz1KMxx9ro3zSh2gXZCHbj4TmiGwo3ccfANUhaUu6emZ1y9R5fljcytlnBUUACXxx0ys_UPv7pgSPwzc3vSGzz2xQkKD_r12h8dLQtsY/s320/name.png) no-repeat 7px 8px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}
   
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVt3gIsyfXwFJ1aTBT94x1Xx_B07ltAIwvd3n-DRseAuKxtA6ngY9E8HDtrUkvYtLrZQREbxfUw0rnZD5CL-LeXIHSQnuzGnr8EJYLb_QQSAUj5rKcsrteLu9Nc4UAYbOksFRAm7FrKo4/s320/email.png) no-repeat 7px 10px;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: Arial,sans-serif;
font-size: 12px;
font-weight:bold;
height: 24px;
margin: 0;
margin-top: 5px;
padding: 5px 15px 5px 28px;
vertical-align: top;
}

.contact-form-email:hover, .contact-form-name:hover{
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);

padding: 5px 15px 5px 28px;
}
.contact-form-email-message:hover {
border: 1px solid #bebebe;
box-shadow: 0 1px 2px rgba(5, 95, 255, .1);
padding: 10px;
}
.contact-form-email-message {
background: #FFF;
background-color: #FFF;
border: 1px solid #ddd;
box-sizing: border-box;
color: #A0A0A0;
display: inline-block;
font-family: arial;
font-size: 12px;
margin: 0;
margin-top: 5px;
padding: 10px;
vertical-align: top;
max-width: 350px!important;
height: 150px;
border-radius:4px;
}

.contact-form-button {
cursor:pointer;
height: 32px;
line-height: 28px;
font-weight:bold;
border:none;
}

.contact-form-button {
display: inline-block;
zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
*display: inline;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.contact-form-button:hover {
text-decoration: none;
}
.contact-form-button:active {
position: relative;
top: 1px;
}

.MBT-button-color {
color: #fef4e9;
border: solid 1px #da7c0c;
background: #f78d1d;
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top, #faa51a, #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.MBT-button-color:hover {
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top, #f88e11, #f06015);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
border-color: #F47C20!important;
}
.MBT-button-color:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
background: -moz-linear-gradient(top, #f47a20, #faa51a);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}
</style>

      <!--[if IE 9]>
    <style>
 
.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioSN-bvReU9G9LGyHGkzz3TQxlRL200guCuN7Pz1KMxx9ro3zSh2gXZCHbj4TmiGwo3ccfANUhaUu6emZ1y9R5fljcytlnBUUACXxx0ys_UPv7pgSPwzc3vSGzz2xQkKD_r12h8dLQtsY/s320/name.png) no-repeat 7px 0px;
}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVt3gIsyfXwFJ1aTBT94x1Xx_B07ltAIwvd3n-DRseAuKxtA6ngY9E8HDtrUkvYtLrZQREbxfUw0rnZD5CL-LeXIHSQnuzGnr8EJYLb_QQSAUj5rKcsrteLu9Nc4UAYbOksFRAm7FrKo4/s320/email.png) no-repeat 7px 6px;
}
    </style>
    <![endif]-->
 
    <style>
@media screen and (-webkit-min-device-pixel-ratio:0) {

.contact-form-name {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioSN-bvReU9G9LGyHGkzz3TQxlRL200guCuN7Pz1KMxx9ro3zSh2gXZCHbj4TmiGwo3ccfANUhaUu6emZ1y9R5fljcytlnBUUACXxx0ys_UPv7pgSPwzc3vSGzz2xQkKD_r12h8dLQtsY/s320/name.png) no-repeat 7px 6px;
padding: 15px 15px 15px 28px;

}
.contact-form-email {
background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVt3gIsyfXwFJ1aTBT94x1Xx_B07ltAIwvd3n-DRseAuKxtA6ngY9E8HDtrUkvYtLrZQREbxfUw0rnZD5CL-LeXIHSQnuzGnr8EJYLb_QQSAUj5rKcsrteLu9Nc4UAYbOksFRAm7FrKo4/s320/email.png) no-repeat 7px 8px;
padding: 15px 15px 15px 28px;
}

.contact-form-email:hover, .contact-form-name:hover{
padding: 15px 15px 15px 28px;
}

.contact-form-button {
height: 28px;
}
}
</style>