Cara memasang widget Contact Form di halaman statis Blogger

Sekarang tersedia widget baru yaitu Contact Form yang dibuat oleh tim dari Blogger sendiri, berfungsi menambahkan contact form di blog blogspot. Dan karena ini sebuah widget maka sudah sewajarnya kalau kita hanya bisa memasang widget ini di region-region tertentu pada template, misal di sidebar, footer dll.

Lalu bagaimana memasang widget Contact Form ini di halaman statis Blogger? ada bermacam-macam versi cara pemasangannya, misal dengan meng-copy kode html yang dihasilkan oleh widget tersebut kemudian mem-paste di halaman statis, setelah itu menyembunyikan contact form yang terpasang di region dengan CSS, misal:

Code:

.widget.ContactForm {
    display: none;
 }

Tapi dengan cara di atas tidaklah efektif dan bisa saja mengurangi tingkat kegantengan kita menurut Google karena banyak kode html semacam

Code:

<input>

,

Code:

<span>

,

Code:

<div>

tetap ada di region, dan mubazir juga me-render contact form tapi tidak digunakan dan malah disembunyikan.

Berikut langkah-langkah menambahkan widget Contact Form di halaman statis Blogger yang SEO friendly:

1. Pertama tambahkan widget Contact Form Blogger. Masuk ke Setelan -> Tata Letak -> Tambahkan Gadget -> Gadget Lainnya -> Formulir Kontak. Lihat gambar 1:

Spoiler: Gambar 1

2. Buat laman baru atau gunakan laman yang sudah ada dan paste kode berikut (pastikan editornya menggunakan HTML dan bukan Compose):

Spoiler: Code

Code:

<style type="text/css">
.contact-form-name, .contact-form-email, .contact-form-email-message {
  max-width: 65%;
  width: 100%;
}
</style>
<div class="form">
  <form name="contact-form">
    Name
    <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
    <span style="font-size: 86%;"><em>Enter your name.</em></span>

    Email <span style="font-weight: bolder; color: red;">*</span>
    <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
    <span style="font-size: 86%;"><em>A valid e-mail address. The e-mail address will not made public.</em></span>

    Message <span style="font-weight: bolder; color: red;">*</span>
    <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
    <span style="font-size: 86%;"><em>Please write your message clearly.</em></span>

    <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" />

    <div style="max-width: 222px; text-align: center; width: 100%;">
      <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div>
      <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div>
    </div>
  </form>
</div>

Kode diatas bisa dirubah-rubah sesuai selera, saya menambahkan petunjuk pengisian seperti:

Code:

<span style="font-size: 86%;"><em>Enter your name.</em></span>

Saya juga merubah ukuran inputnya dengan inline CSS, ukuran defaultnya 220px.

Code:

<style type="text/css">
.contact-form-name, .contact-form-email, .contact-form-email-message {
  max-width: 65%;
  width: 100%;
}
</style>

3. Sekarang kita akan menghapus kode yang tidak diperlukan di template Blogger. Masuk ke Template -> Edit HTML -> Lompat ke widget -> Pilih ContactForm1. Lihat gambar 2:

Spoiler: Gambar 2

4. Expand tag widgetnya dan seleksi seperti gambar 3 berikut:

Spoiler: Gambar 3

5. Hapus sehingga hanya tersisa seperti kode di bawah ini, dan kemudian simpan template.

Code:

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

Sekarang coba kunjungi blog Anda dan periksa kode yang dihasilkan, yang tersisa di region hanyalah kode berikut:

Code:

<div class="widget ContactForm" id="ContactForm1">
</div>

Kebetulan hari ini membuat contact form di blog saya jadi sekalian ditulis saja. Lihat demonya di sini.

Note: pastikan ketika proses pengeditan gunakan opsi Press "Enter" for line breaks.

 

ada fitur baru ya di blogger,

ada fitur baru ya di blogger, test dulu ah

fitur ini membuat pengunjung lebih mudah untuk menghubungi / bertanya ke author nih

 

Demo contact form-nya ada di

Demo contact form-nya ada di blog saya

Karena ini widget resmi jadi loadingnya cepet dan mudah sekali mengubahnya.

 

Akhirnya ada juga

Setelah sekian lama menanti... hihihih
Akhirnya blogger punya widget form sendiri, jadi semangat lagi nih otak-atik blog.

 

simak aja deh lumayan buat

simak aja deh lumayan buat nambah" ilmu Blogger

 

ada yg baru nih dri blogger,

ada yg baru nih dri blogger, ikutan nyobain dlu, mumpung footer msih bnyk space kosongnya

 

makasih i nfonya bang @dan..

makasih i nfonya bang @dan..

 

baru tahu ternyata ada yang

baru tahu ternyata ada yang baru

 

widget ini memang lebih

widget ini memang lebih ringan, tapi saya masih pake layanan pihak ke 3 karena ada banyak pilihan *crazy*

 

asik triks nya,

asik triks nya,

 

Koment dulu ah, praktek

Koment dulu ah, praktek belakangan kalo ntar pas butuh ngoprek blogspot..

 

Dicoba ah.

Dicoba ah.

 

langsung praktek ah..

langsung praktek ah..

 

cara menambahkan capthca

cara menambahkan capthca gimana nih mas @Dan? biar kayak situs-situs besar lainnya..

 

Boleh dicoba

Boleh dicoba nich juragan @dan, trims infonya

 

Masih baru ya, tapi kurang

Masih baru ya, tapi kurang berguna bagi saya pribadi

 

selama ini sy menggunakan

selama ini sy menggunakan emailme form untuk halaman kontak. Cara di atas akan sy coba

 

saya malah lebih suka pakai

saya malah lebih suka pakai google docs, hehee. selera memang beda-beda

 

Bookmark dulu,

saya sudah pake ask.fm , hehehe