Buat Formulir Kontak Blogger pada Halaman Statis

Blogger sudah meluncurkan gadget formulir kontaknya sendiri, hal itu masih dianggap sangat tidak memadai. Ini karena gadget resmi hanya akan diimplementasikan pada footer dan sidebar. Kebanyakan blogger lebih memilih memiliki bentuk kontak blogger terpisah yang ditempatkan di halamannya sendiri untuk membuat blog mereka terlihat tersusun dengan baik dan lebih profesional juga.

Memiliki bentuk kontak Blogger yang bagus sangat penting. Ini adalah alat yang dapat digunakan oleh pengunjung untuk menghubungi Anda dan ini adalah fitur wajib bagi setiap blogger. Jika Anda tidak nyaman dengan berbagi alamat email utama Anda secara langsung di blog Anda, maka formulir kontak Blogger menawarkan cara yang efektif untuk orang-orang dengan mudah menghubungi Anda.

Mengapa Anda harus menggunakan Formulir Kontak Blogger?

Jika Anda masih terjebak pada penyedia pihak ketiga, Anda mungkin harus mempertimbangkan untuk beralih ke official formulir kontak resmi untuk Blogger karena memiliki berbagai manfaat unik, seperti:

• Pesan segera dikirim - Sebagai administrator blog, Anda akan segera menerima pesan yang dikirim pengunjung.
• Reliable - Ini adalah bentuk resmi yang dikembangkan oleh Blogger, yang membuatnya lebih dapat dipercaya dan dapat diandalkan untuk melakukan kontak dibandingkan dengan menggunakan layanan pihak ketiga.
• Pertanyaan - Formulir kontak menawarkan sebuah platform bagi pengunjung Anda untuk mengajukan pertanyaan spesifik yang mungkin mereka miliki mengenai blog yang Anda tulis atau bisnis Anda pada umumnya. Ini bisa menjadi cara terbaik untuk menangkap prospek dan bahkan mengarah pada konversi jika Anda menjual produk atau layanan tertentu.
• Umpan Balik - Pengunjung dapat dengan mudah mengomentari blog Anda dengan meninggalkan umpan balik mereka melalui formulir kontak Anda. Umpan balik ini dapat membantu Anda menentukan pos mana yang akan dilakukan selanjutnya atau area mana yang akan ditangani berdasarkan komentar pengunjung.
• Permintaan informasi atau layanan - Bagi mereka yang menggunakan blog sebagai cara memasarkan produk atau layanan, calon klien dapat menggunakan formulir kontak untuk menjangkau dan meminta informasi tambahan.

Cara Menambahkan Gadget Formulir Kontak Blogger

Sebelum menambahkan form kontak Blogger ke halaman statis, kita perlu menambahkan form kontak default di sidebar blog untuk membuatnya berfungsi:

1. Masuk ke dashboard Blogger Anda dan masuk ke "Tata Letak" klik pada link "Tambahkan Gadget" pada area elemen halaman.

2. Pilih "Gadget Lainnya" di bawah tab "Dasar-dasar" dan klik tombol "+" untuk menambahkan Contact Form Gadget.

Menyembunyikan Formulir Kontak Blogger dari Sidebar

Setelah formulir kontak ditambahkan, langkah selanjutnya adalah menyembunyikannya agar hanya muncul di halaman statis.

1. Buka "Tema" dan tekan tombol "Edit HTML". Setelah editor kode terbuka, klik di manapun di dalam area kode dan tekan tombol CTRL + F (atau Command + F untuk mac) untuk membuka kotak pencarian.

2. Ketik atau tempel tag berikut di dalam kotak pencarian dan tekan Enter untuk menemukannya:

]]></b:skin>

Tepat di atas tag ]]></b:skin>, tambahkan kode CSS ini:

#ContactForm1{display: none !important;}

4. Klik tombol "Simpan tema" di sisi kiri atas dan lihat blog Anda. Widget formulir kontak telah hilang.

Menambahkan Formulir Kontak Blogger di Halaman Statis

Akhirnya, setelah mengaktifkan fungsi formulir kontak, mari menambahkan formulir kontak di blog Blogger kita ...

1. Pada dasbhord blogger pilih menu "Halaman" dan klik tombol "Halaman baru".  Atau jika Anda sudah memiliki halaman Contact us, cukup klik link "Edit" di bawah judul halaman.

2. Setelah editor Halaman terbuka, isi judul halaman dengan Contact / Contact Us atau judul yang ingin Anda tampilkan. Dianjurkan melakukan hal ini terlebih dahulu untuk membuat permalink SEO friendly.

3. Klik pada tab HTML karena disana kita akan menambahkan kode untuk membuat form kontak Blogger bekerja. Ubah pengaturan Halaman untuk menyembunyikan komentar ("Jangan bolehkan" atau "Jangan bolehkan, sembunyikan yang ada"), lalu klik tombol "Selesai":

4. Kemudian copy kode dibawah ini, lalu paste di dalam kotak HTML editor halaman Anda:

<style type="text/css">
.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:40px 0}.contactf-name,.contactf-email{float:left;width:48.25%}.contactf-name{margin-right:3.5%}.contact-form-name,.contact-form-email,.contact-form-email-message,.contact-form-name:hover,.contact-form-name:focus,.contact-form-email:hover,.contact-form-email:focus,.contact-form-email-message:hover,.contact-form-email-message:focus{width:100%;max-width:100%;margin:0 0 20px;padding:10px 15px;font-size:12px;letter-spacing:1px;color:#444;background:#F3F3F3;border:medium none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:37px}.contact-form-email-message{height:170px}.contact-form-button-submit,.contact-form-button-submit:hover{width:13%;height:30px;font:normal 12px Arial;letter-spacing:1px;color:#444;display:block;outline:none;margin-bottom:20px;text-align:center;background:#E6E6E6;border:0;cursor:pointer}.contact-form-button-submit:active{outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;height:11px !important;width:11px !important;}
</style>

<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><div class="form"><form name="contact-form"><div class="contactf-name"><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="NAME" onblur='if (this.value == "") {this.value = "NAME";}' onfocus='if (this.value == "NAME") {this.value = "";}'  /></div><div class="contactf-email"><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="EMAIL" onblur='if (this.value == "") {this.value = "EMAIL";}' onfocus='if (this.value == "EMAIL") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message"><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5" value="MESSAGE" onblur='if (this.value == "") {this.value = "MESSAGE";}' onfocus='if (this.value == "MESSAGE") {this.value = "";}'></textarea></div><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND" /><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></form></div></div></div>

Selamat sekarang anda mempunyai formulir kontak blogger pada halaman statis.

Share this post