Lompat ke konten Lompat ke sidebar Lompat ke footer

Memasang Contact Form Blogger Dihalaman Static Template LinkMagz

Memasang Contact Form Blogger Dihalaman Static Template LinkMagz
AksesBlog.com - Sebenarnya artikel ini tidak diharuskan untuk template LinkMagz saja, namun bisa digunakan untuk berbagi template blogger. Namun disini saya lebih spesifik karena saya sendiri menggunakan template LinkMagz.

Ini bertujuan agar pengguna template LinkMagz bisa dengan mudah  menerapkan artikel ini, karena pada artikel ini kita perlu menyesuaikan beberapa widget agar mudah diterapkan.

Menambahkan Widget Contact Form

Tentunya yang pertama kamu hanya perlu menambahkan Widget Contact Form blogger, kalau kamu belum tau caranya :
  1. Login ke akun "Blogger" kamu
  2. Masuk ke menu "Tata Letak" blogger
  3. Tambahkan Gadget "Contact Form" atau "Formulir Kontak"
Memasang Contact Form Blogger Dihalaman Static Template LinkMagz
Menambahkan Formulir Kontak
Secara default formulir kontak itu akan diload diseluruh halaman blog kamu, baik itu di halaman home page, post page, maupun static page. Jadi kita perlu menyesuaikan kodenya agar hanya bisa terload pada halaman staticpage saja, agar tidak memberatkan loading halaman yang lainnya.

Mengatur Widget Di Pengaturan Template

Seperti yang saya kata kan tadi, kamu perlu mengatur widget tersebut agar hanya tampil dihalaman static page saja, masuk ke Tema > Edit HTML dan temukan Widget Formulir Kontaknya. Tambahkan tag kondisional berikut pada Widget tersebut :
cond='data:view.isPage'
Secara keseluruhan akan tampak menjadi seperti berikut :
<b:widget cond='data:view.isPage' id='ContactForm1' locked='false' title='Hubungi Saya' type='ContactForm' visible='true'>
.............................
.......................
.............................
                    </b:widget>
Kode tersebut akan menjadikan Widget itu hanya akan muncul ketika kita akses static page.

Memasang Widget Formulir Kontak Pada Halaman Static

Untuk memasang Widgetnya dihalaman static tentunya kamu harus membuat halaman static yang baru, caranya masuk ke menu "Halaman" terus kamu buat halaman static baru.

Memasang Contact Form Blogger Dihalaman Static Template LinkMagz
Membuat Halaman Static
Setelah itu kamu berikan judul halaman tersebut terserah mau kamu beri nama apa, contact us, contact me, hubungi saya atau lain sebagainya. Setelah itu kamu masuk ke Mode HTML dan copy semua kode berikut :
<form name="contact-form"><span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Nama</span><br />
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  <br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Alamat Email <span style="color: red; font-weight: bolder;">*</span></span> <br />
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  <br />
<br />
<span style="font-family: Helvetica Neue, Arial, Helvetica, sans-serif;">Isi Pesan <span style="color: red; font-weight: bolder;">*</span></span><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> <br />
<input id="ContactForm1_contact-form-submit" type="button" value="KIRIM" />  <br />
<div style="max-width: 222px; text-align: center; width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><style>#ContactForm1{display:none}#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{width:300px;height:auto;margin:10px auto;padding:10px;background:#fdfdfd;color:#666;border:1px dashed #ddd;transition:all .5s ease-in-out}#ContactForm1_contact-form-email-message{width:450px;height:175px;margin:10px auto;padding:10px;background:#fdfdfd;color:#666;font-family:Roboto,sans-serif;border:1px dashed #ddd;transition:all .5s ease-in-out}#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:0 0;border:1px dashed #f8a82a}#ContactForm1_contact-form-submit{font-size:15px;width:101px;height:35px;float:left;color:#fff;padding:0;margin:10px 0 3px 0;cursor:pointer;background:#b15f3e;border:0;border-radius:2px;transition:background .4s linear}#ContactForm1_contact-form-submit:hover{background:#925035}#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:450px;margin-top:35px} </style>
Kode tersebut sudah saya minify agar bisa lebih cepat ketika diakses.

Selanjutnya kamu bisa segera publish halaman tersebut, dan kamu bisa coba hasilnya dengan cara kirim saja pesan sembarangan dan menggunakan email lain agar mengetahui itu sudah bekerja dengan baik atau belum. Selamat mencoba.
Mas Iwan
Mas Iwan Seorang blogger yang kesehariannya didepan laptop, dan hobi bermain game.

4 komentar untuk "Memasang Contact Form Blogger Dihalaman Static Template LinkMagz"

  1. Gan punya linkmagz template ku balas komentarnya gak ada ini blog saya
    www.blogmashuan.com

    BalasHapus
    Balasan
    1. Pakai LinkMagz versi terbaru aja gan, sudah ada di member area mas sugeng itu gan.

      Hapus
  2. saya pakai cara ini kok ga berfungsi ya gan. Pesan yang dikirim via Contact Form ga terkirim.

    BalasHapus
    Balasan
    1. Pasti ada cara yang terlewatkan itu mas, saya coba di blog saya aman kok mas.

      Hapus

Berlangganan via Email