Cara membuat CONTACT US di halaman Blogspot

Posted on
 

Kontak form digunakan untuk mengirimkan pesan dari pembaca ke penulis blog. Pada blogspot fasilitas kontak form ini sudah tersedia. 

Secara default kontak form bawaan blogspot dipergunakan untuk widget.  Sehingga jika kita ingin membuat form kontak di halaman static perlu sedikit melakukan modifikasi Nah.. untuk membuat kontak form di blogspot di halaman static (contoh disini) ikuti cara berikut ini

Menambahkan widget Contact form 
Pertama yang harus dilakukan adalah login dulu ke akun blogspot. kemudian tambahkan widget kontak form

Menambahkan widget contact form

Modif kode Widget

Setelah menambahkan widget masuk kebagian templete editor blogspot kemudian cari widget dengan nama Contact Form seperti berikut

========================================================

<b:widget id=’ContactForm1′ locked=’false’ title=’Contact Form’ type=’ContactForm’>
  <b:includable id=’main’>
  <b:if cond=’data:title != &quot;&quot;’>
    <h2 class=’title’><data:title/></h2>
  </b:if>
  <div class=’contact-form-widget’>
    <div class=’form’>
      <form name=’contact-form’>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class=’contact-form-name’ expr:id=’data:widget.instanceId + &quot;_contact-form-name&quot;’ name=’name’ size=’30’ type=’text’ value=”/>
        <p/>
        <data:contactFormEmailMsg/> <span style=’font-weight: bolder;’>*</span>
        <br/>
        <input class=’contact-form-email’ expr:id=’data:widget.instanceId + &quot;_contact-form-email&quot;’ name=’email’ size=’30’ type=’text’ value=”/>
        <p/>
        <data:contactFormMessageMsg/> <span style=’font-weight: bolder;’>*</span>
        <br/>
        <textarea class=’contact-form-email-message’ cols=’25’ expr:id=’data:widget.instanceId + &quot;_contact-form-email-message&quot;’ name=’email-message’ rows=’5’/>
        <p/>
        <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’/>
        <p/>
        <div style=’text-align: center; max-width: 222px; width: 100%’>
          <p class=’contact-form-error-message’ expr:id=’data:widget.instanceId + &quot;_contact-form-error-message&quot;’/>
          <p class=’contact-form-success-message’ expr:id=’data:widget.instanceId + &quot;_contact-form-success-message&quot;’/>
        </div>
      </form>
    </div>
  </div>
  <b:include name=’quickedit’/>
</b:includable>
</b:widget>

========================================================

Langkah selanjutnya hapus  kode yang saya beri warna merah sehingga hasilnya seperti berikut

========================================================
<b:widget id=’ContactForm1′ locked=’false’ title=’Contact Form’ type=’ContactForm’>
  <b:includable id=’main’>

</b:includable>
</b:widget>
========================================================

Buat halaman  kontak 

Langkah selanjutnya masuk ke menu blogger untuk membuat page kemudian masuk ke mode html nya kemudian gunakan 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>

========================================================

lakukan save dan lihat hasilnya


Hasil Contact Form di blogspot

 hasil tampilan untuk kontak form di blogspot seperti berikut ini

Hasil membuat contact form di blogspot
Baca Juga :  Mengatasi visual editor wordpress tidak tampil (visual editor wordpress not showing up)

Uji Contact Form

untuk memastikan sudah berfungsi atau belum coba isi form tersebut dengan benar dan hasil yang di inputkan ke form akan terkirim ke email yang digunakan untuk membuat blog

Hasil dari Contact Form blogspot

Bagaimana kawan, sekarang blog sudah sedikit lebih profesional dengan menggunakan Contact Form yang ada di static page. Semoga sedikit tips ini bermanfaat untuk kawan-kawan.


Sumber : 
http://www.panduaji.net/2014/05/cara-membuat-form-contact-us-di-halaman.html
http://helplogger.blogspot.com/2013/05/new-blogger-widget-contact-form-change.html

Gravatar Image

http://bakhtiyar.bsierad.com/

Leave a Reply