Yeni Bizimlə Əlaqə Formulu (Contact Form)

Bizimlə Əlaqə Formulu bizə ona görə lazımdır ki sayta daxil olan istifadəçi sizə ər hansı sual vəya təklifi olduqda sizinlə E-Mail vasitəsilə əlaqə saxlasın.Bu formulanı daha gözəl və digər saytlarda olduğu kimi ayrıca səhifədə olmasını istəyirsinizsə aşağıdakıları etmək lazımdı.Bu cəmi 5 dəqiqə çəkəcək və siz daha baxımlı bloga sahib olacaqsınız.Başlayaq...

Layout (Yerleşim)
Gadget ekle
More gadget (Diğer Gadgetler)

Seçirik contack form (İletişim Formu)

Save (Kaydet) edirik

İkinci Hissə. Yuxarıdakıları etdikden sonra indi aşağıdakıları etmək lazımdır.

Menyu >> Pages (Sayfa)

New Page (Yeni Sayfa)

• Indi isə aşağıdakə kodu Yeni Sayfanın (New Page) HTML olan hissəsinə atırıq.

<div class='form'> 

<!-- Custom Contact Form By WG 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='WG-btnLogin' type='reset' value='Clear'/> 

<!-- Send Button -->  

<input class='WG-btnLogin' 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 WG Ends --> 

</div>

• İndi isə Səihəni Publish (Yayınla) edirik.

Bu bizim gördüyümüz işin bir hissəsidir.İndi əsas hissəyə keçirir və CSS kodu əlavə edirik.

Menyu >Template (Şablon)

HTML düzənle

və CTRL+F basıb aşağıdakı kodu axtarırıq.

]]></b:skin>

• Bu kodu tapdıqdan sonra aşağıda verilmiş kodu tapdığın kodun üstünə atırıq.

#ContactForm1 { display: none ! important; }

• İndi isə axtarış edib </head> kodu axtarın.
• Aşağıda verilən kodu </head> üstünə ələvə edirik.

<b:if cond='data:blog.pageType == "static_page"'> <style> #ContactForm1{ display:none!important;} </style> </b:if> <style> /*---- Compatible contact Form by WG -----*/ .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/AVvXsEhz-JN3j_M7RDpfw60nmVnsmURx1xijZ9LN_TlbljxAFcyCZBzmqV0-nrX3gKGuMUn5hU9tmh6C0D6DnWTSfAjXhd_imy-uCEN0bjuMcxOpDPruWl7zyKlv_qE4A34Fu1TqC8swWn80IlM/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/AVvXsEixCIgJH0R2LZZy0mnHYjQsZLUKGBdyvKG1mv0uCHZyvM8v3l0GBHltXlHHux_LXYHFQtsDXcglhSzmLhyphenhyphengFKht9jXLPC7QHrBeHmsqUkhapRQ-adxZURKQ0C1ZMkyhMS588H63OrtH17s/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; } .WG-btnLogin { -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:15px; background:#a1d8f0; background:-moz-linear-gradient(top, #badff3, #7acbed); background:-webkit-gradient(linear, center top, center bottom, from(#badff3), to(#7acbed)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#badff3', EndColorStr='#7acbed')"; border:1px solid #7db0cc !important; cursor: pointer; padding:11px 16px; font:bold 11px/14px Verdana, Tahomma, Geneva; text-shadow:rgba(0,0,0,0.2) 0 1px 0px; color:#fff; -moz-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; -webkit-box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; box-shadow:inset rgba(255,255,255,0.6) 0 1px 1px, rgba(0,0,0,0.1) 0 1px 1px; margin-center:12px; float:center; padding:7px 21px; } .WG-btnLogin:hover, .btnLogin:focus, .btnLogin:active{ background:#a1d8f0; background:-moz-linear-gradient(top, #7acbed, #badff3); background:-webkit-gradient(linear, center top, center bottom, from(#7acbed), to(#badff3)); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#7acbed', EndColorStr='#badff3')"; } .WG-btnLogin:active { text-shadow:rgba(0,0,0,0.3) 0 -1px 0px; } </style> <!--[if IE 9]> <style> .contact-form-name { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz-JN3j_M7RDpfw60nmVnsmURx1xijZ9LN_TlbljxAFcyCZBzmqV0-nrX3gKGuMUn5hU9tmh6C0D6DnWTSfAjXhd_imy-uCEN0bjuMcxOpDPruWl7zyKlv_qE4A34Fu1TqC8swWn80IlM/s320/name.png) no-repeat 7px 0px; } .contact-form-email { background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixCIgJH0R2LZZy0mnHYjQsZLUKGBdyvKG1mv0uCHZyvM8v3l0GBHltXlHHux_LXYHFQtsDXcglhSzmLhyphenhyphengFKht9jXLPC7QHrBeHmsqUkhapRQ-adxZURKQ0C1ZMkyhMS588H63OrtH17s/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/AVvXsEhz-JN3j_M7RDpfw60nmVnsmURx1xijZ9LN_TlbljxAFcyCZBzmqV0-nrX3gKGuMUn5hU9tmh6C0D6DnWTSfAjXhd_imy-uCEN0bjuMcxOpDPruWl7zyKlv_qE4A34Fu1TqC8swWn80IlM/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/AVvXsEixCIgJH0R2LZZy0mnHYjQsZLUKGBdyvKG1mv0uCHZyvM8v3l0GBHltXlHHux_LXYHFQtsDXcglhSzmLhyphenhyphengFKht9jXLPC7QHrBeHmsqUkhapRQ-adxZURKQ0C1ZMkyhMS588H63OrtH17s/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>

• Nəhayək ki hər şey qurtardı. İndi Şablonu kaydet (save) edirik.

Bununlada sizin yeni səhifənizdə Bizimlə Əlaqə Formu ( Contact Form) yeni gözəl formaya çevrildi...