Cara Membuat Form Contact Me Pada Blog

Hallo sobat blogger, kali ini saya akan membahas tips blogger, yang berjudul "Cara Membuat Form Contact Me Pada Blog". Ya, pada trik ini kita hanya memanfaatkan gadged contact form yang terletak pada menu tata letak, hanya saja kita menyisipkanya di laman yang kita inginkan. Seperti ini sobat

Form Contact Me ini sangat berguna bagi anda yang ingin mendapatkan saran / kritikan terhadap blog anda dari orang ain, atau juga bisa untuk mengkontak dengan keperluan lain

1. Pergi ke menu tata letak, dan pilih tambahkan gadget, pilih pada menu gadget dan klik pada contact form

2. Jika sudah,sekarang kita masuk ke menu template, dan pilih "Edit Html" , lalu hapus bagian kode berikut 

Hapus pada bagian berikut 

1. <b:if cond='data:title != &quot;&quot;'>
2.     <h2 class='title'><data:title/></h2>
3.   </b:if>
4.   <div class='contact-form-widget'>
5.     <div class='form'>
6.       <form name='contact-form'>
7.         <p/>
8.         <data:contactFormNameMsg/>
9.         <br/>
10.         <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text'value=''/>
11.         <p/>
12.         <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
13.         <br/>
14.         <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30'type='text' value=''/>
15.         <p/>
16.         <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
17.         <br/>
18.         <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;'name='email-message' rows='5'/>
19.         <p/>
20.         <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;'expr:value='data:contactFormSendMsg' type='button'/>
21.         <p/>
22.         <div style='text-align: center; max-width: 222px; width: 100%'>
23.           <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
24.           <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
25.         </div>
26.       </form>
27.     </div>
28.   </div>
29.   <b:include name='quickedit'/>

3. Setelah itu, simpan template, lalu pergi ke halaman Laman untuk membuat halaman contact me tersebut

4. Nah sekarang pada kolom editor, pilih bagian HTML lalu sisipkan kode berikut

<div class='widget ContactForm' id='ContactForm1'>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>Name<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-mail *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Message *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Submit'/>
        <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>
      </form>
    </div>
  </div>
</div>

5. Jika sudah, sekarang simpan laman, dan coba dibuka maka hasilnya akan seperti ini

Gimana ? mudah kan? saya harap para sobat blogger dapat mempraktikan ini semua dan pastinya sukses. Yang terpenting sih cuman teliti dalam membaca tutorial ini.. hehe

Demikian postingan saya kali ini, lain waktu nanti saya tambahkan beberapa tips ngeblog lagi. Good luck sob

Related Posts:

Tweet