5 Widget Kontak Formulir Blogger Terbaik

Dulu, menambahkan formulir kontak khusus di blogger merupakan proses yang cukup rumit, dan banyak blogger harus menggunakan situs web pihak ketiga. Namun, meskipun setelah blogger meluncurkan widget formulir kontak sendiri, itupun masih dianggap belum memadai. Karena gadget resmi blogger hanya diimplementasikan di footer sidebar. Sebagian besar blogger lebih suka memiliki kontak formulir blogger yang ditempatkan pada halamannya sendiri agar membuat situs blognya tampak tersusun dengan baik dan lebih profesional.

Memiliki kontak formulir yang ditata dengan baik itu sangat penting. Kontak formulir ini adalah media yang digunakan oleh pengunjung, perusahaan, dan merek untuk menghubungi pemilik situs blog dan oleh karena itu fitur kontak formulir wajib dimiliki setiap blog. Kadang tidak semua pemilik blog nyaman dengan berbagi alamat email utama langsung di situs blognya, maka kontak formulir adalah cara yang efektif agar orang dapat dengan mudah menghubungi pemilik situs blog tersebut.

Mengapa harus menggunakan Kontak Formulir Blogger?

Bila anda masih menggunakan kontak formulir dari pihak ketiga, maka anda harus beralih ke formulir kontak resmi milik blogger karena memiliki berbagai manfaat, seperti:

Pesan langsung dikirim - Sebagai administrator blog, anda akan segera menerima pesan yang dikirim oleh pengunjung.
Dapat diandalkan - Karena ini adalah formulir resmi yang dikembangkan oleh Blogger, maka membuatnya lebih dapat dipercaya dan dapat diandalkan dibandingkan dengan menggunakan layanan dari pihak ketiga.
Pertanyaan - kontak Formulir menawarkan platform bagi pengunjung untuk mengajukan pertanyaan yang lebih spesifik tentang postingan yang anda tulis atau bisnis anda secara umum. Ini bisa menjadi cara yang bagus untuk menangkap prospek dan bahkan mengarah pada konversi jika anda menjual produk atau layanan tertentu.
Umpan Balik - Pengunjung dapat dengan mudah berkomentar di situs blog dengan meninggalkan umpan balik melalui kontak formulir kontak. Umpan balik ini dapat membantu anda menentukan postingan mana yang harus di prioritaskan untuk di benahi dan diupdate berdasarkan komentar pengunjung.
Permintaan informasi atau layanan - Bagi yang menggunakan situs blog untuk memasarkan produk atau layanan, maka calon klien dapat menggunakan kontak formulir meminta informasi tambahan.

Cara Menambahkan Formulir Kontak Blogger

Sebelum menambahkan kontak formulir ke halaman, maka kita perlu menambahkan formulir kontak standar di sidebar situs blog untuk membuatnya berfungsi:

1. Login ke Akun blog anda

2. Klik menu Tata Letak → klik Tambahkan gadget

3. Tambahkan Gadget Formulir Kontak.

Menyembunyikan Formulir Kontak dari Sidebar

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

1. Klik menu Tema Klik → Edit HTML

2. Setelah editor kode terbuka, lakukan pencarian kode berikut dengan tombol CTRL + F

]]></b:skin>

3. Tambahkan kode CSS berikut ini di atas tag ]]></b:skin>

#ContactForm1{display: none !important;}

4. Klik Simpan maka Widget formulir kontak akan hilang.

Menambahkan Formulir Kontak Blogger di Halaman

Untuk mengaktifkan fungsi formulir kontak, maka tambahkan formulir kontak di halaman situs.

Langkahnya sebagai berikut :

1. Klik menu Halaman → Halaman baru. Bila anda sebelumnya sudah memiliki halaman kontak, maka hanya tinggal mengeditnya saja.

2. Buat postingan baru dengan menggunakan mode HTML (bukan Compose)

3. Ubah pengaturan Halaman untuk menyembunyikan ("Jangan izinkan" atau "Jangan izinkan") komentar pembaca, lalu klik Selesai:

4. Tempelkan kode berikut ini pada HTML halaman situs blog.
di bawah ini ada 5 bentuk gaya kontak formulir. silahkan pilih yang anda sukai dan salin kode tersebut ke dalam mode HTML editor halaman.

1. Formulir Kontak Sederhana

Kode CSS Formulir Kontak Sederhana

Formulir kontak dengan warna pelangi

Kode CSS formulir kontak warna pelangi

.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:0}hr{position:relative;height:.75em;border:0;overflow:hidden;margin:0}hr:before{content:"";display:block;position:absolute;top:0;left:0;height:.75em;width:5.1em;background:#C4DD83;box-shadow:5em 0 0 0 #F4FCC9,10em 0 0 0 #FDCD78,15em 0 0 0 #ED786F,20em 0 0 0 #D99DBF,25em 0 0 0 #C39EDC,30em 0 0 0 #679DE2,35em 0 0 0 #62C2E3,40em 0 0 0 #F4FCC9,45em 0 0 0 #FDCD78,50em 0 0 0 #ED786F,55em 0 0 0 #D99DBF,60em 0 0 0 #C39EDC}.contactf-name,.contactf-email{float:left;width:49.25%}.contactf-name{margin-right:1.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:25px 0 0;padding:10px;font-size:15px;color:#ccc;border-color:#E8E8E8;border-width:2px 2px 4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:40px;font-size:15px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,0.25);background:#EE786F;border:0;border-bottom:2px solid #D4685C;outline:none;cursor:pointer;-webkit-box-shadow:inset 0 -2px #D4685C;box-shadow:inset 0 -2px #D4685C}.contact-form-button-submit:active{top:1px;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>

Formulir Kontak Blogger berpita

Kode CSS formulir kontak berpita

.widget.ContactForm{z-index:1}.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px 0;background:#EBEBE3;-webkit-border-radius:2%;-moz-border-radius:2%;border-radius:2%}.contact-form-widget .form{width:91%;margin:0 auto}.ribbon{font:16px Arial;text-transform:capitalize;text-shadow:0 1px 2px rgba(0,0,0,0.25);position:relative;background:#6B5F53;color:#fff;text-align:center;padding:1em 2em;margin:0 -16px}.ribbon:before,.ribbon:after{content:"";position:absolute;display:block;bottom:-1em;border:1.5em solid #584C40;z-index:-1}.ribbon:before{left:-1.7em;border-right-width:1.2em;border-left-color:transparent}.ribbon:after{right:-1.7em;border-left-width:1.2em;border-right-color:transparent}.ribbon .ribbon-content:before,.ribbon .ribbon-content:after{content:"";position:absolute;display:block;border-style:solid;border-color:#42362A transparent transparent;bottom:-1em}.ribbon .ribbon-content:before{left:0;border-width:1em 0 0 1em}.ribbon .ribbon-content:after{right:0;border-width:1em 1em 0 0}.contactf-name,.contactf-email,.contactf-message{text-align:left;margin-top:25px;color:#a1937b;font-size:13px}.contactf-name,.contactf-email{float:left;width:100%}.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:10px 0 0;padding:10px;font-size:12px;color:#aaa;border-color:#DBD6D1;border-width:1px;box-shadow:none;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.contact-form-name,.contact-form-email{height:35px}.contact-form-email-message{height:100px}.contact-form-button-submit,.contact-form-button-submit:hover{margin-top:25px;width:100%;height:37px;font:normal 12px Arial;outline:none;letter-spacing:1px;color:#fff;text-align:center;cursor:pointer;text-shadow:1px 1px 0 #ffe8b2;color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#fed970) to(#febd4b));background:-webkit-linear-gradient(#fed970,#febd4b);background:-moz-linear-gradient(#fed970,#febd4b);background:-ms-linear-gradient(#fed970,#febd4b);background:-o-linear-gradient(#fed970,#febd4b);background:linear-gradient(#fed970,#febd4b);-pie-background:linear-gradient(#fed970,#febd4b)}.contact-form-button-submit:active{color:#7c5d1b;border:1px solid #d6a437;background:#febd4b;background:-webkit-gradient(linear,0 0,0 100%,from(#febd4b) to(#fed970));background:-webkit-linear-gradient(#febd4b,#fed970);background:-moz-linear-gradient(#febd4b,#fed970);background:-ms-linear-gradient(#febd4b,#fed970);background:-o-linear-gradient(#febd4b,#fed970);background:linear-gradient(#febd4b,#fed970);-pie-background:linear-gradient(#febd4b,#fed970)}.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"><h2 class="ribbon"><strong class="ribbon-content">Shoot Me an Email</strong></h2><div class="form"><form name="contact-form"><div class="contactf-name">Your 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">E-mail address *:<input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {this.value = "";}'/></div><div style="clear:both"></div><div class="contactf-message">Message *:<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="Type your message here..." rows="5" value="" placeholder="Type your message here..." value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="SEND MESSAGE" /><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></div></div>

Formulir Kontak Minimal

Kode CSS formulir kontak minimal

.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%;padding:25px;background:#fff}.contact-title{text-align:center;font:41px fantasy;color:#121212;margin-bottom:25px}.contactf-name,.contactf-email{float:left;width:47%}.contactf-name{margin-right:6%}.name-icon img,.email-icon img{background:transparent!important;border:medium none!important;box-shadow:none!important;padding:11px 0!important;width:16px !important;height:16px !important;}.name-icon,.email-icon{position:absolute;z-index:1}.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 25px;padding:10px 10px 10px 25px;font:bold 16px cursive;text-shadow:0 1px 2px #ddd;color:#121212;background:transparent!important;border-color:#121212;border-width:0 0 2.5px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none}.contact-form-name,.contact-form-email{height:40px}.contact-form-email-message,.contact-form-email-message:hover,.contact-form-email-message:focus{padding:10px!important}.contact-form-email-message{height:150px;border-width:2.5px!important}.contact-form-button-submit,.contact-form-button-submit:hover{background:#121212!important;width:30%;height:37px;font:bold 13px "Lucida Grande";letter-spacing:2px;color:#fff;text-align:center;border:medium none;cursor:pointer;display:block;margin:0 auto;outline:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}

</style>

<div class="widget ContactForm" id="ContactForm22"><div class="contact-form-widget"><h2 class="contact-title">Get in touch.</h2><div class="form"><form name="contact-form"><div class="contactf-name"><div class="name-icon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFCaHUFfln8pi0oGhUkEubVHy7tj2rqpVSwjz_PiG3ZaYlDJf6ZaRoTE_MNLyprvdjV2xD5fXkGrcMaghBkB7_f0yDqLKYXwlxxD2zTAZ3kdGzeART0YjPN9Qa27NDpb6k_CwdkMccbesX/s1600/avatar%25281%2529.png" width="16" height="16" /></div><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"><div class="email-icon"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikgdACtct9NS7yIQ02kLGHFzIo1nsbN6f7WNhKEiQNPt-_5gSDnzopbL1agDetFrZKTk241s7TlXMKD_E3rTnHfdVXZBnZfL4j_CsgPebZj1eiP-Nu6w4UQKrwn0QnpH2BJF69urh7U4Fk/s1600/envelope%25281%2529.png" width="16" height="16" /></div><input class="contact-form-email" id="ContactForm1_contact-form-email" name="E-mail address" size="30" type="text" value="E-mail address" onblur='if (this.value == "") {this.value = "E-mail address";}' onfocus='if (this.value == "E-mail address") {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="Type your message here..." rows="5" value="Type your message here..." onblur='if (this.value == "") {this.value = "Type your message here...";}' onfocus='if (this.value == "Type your message here...") {this.value = "";}'></textarea><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></div></form></div></div></div>

Formulir kontak balon

Kode CSS formulir kontak balon

.contact-form-widget{margin-left:auto;margin-right:auto;width:600px;max-width:100%}.contactf-name,.contactf-email{float:left;width:50%}.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 15px;padding:10px;font-size:14px;color:#777;background:#E2DEDB;border:1px solid #CBC7C4;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-name,.contact-form-email{height:33px}.contact-form-email-message{height:130px}.contactf-message{position:relative}.contactf-message:after,.contactf-message:before{border-bottom:50px solid transparent;border-left:80px solid #E2DEDB;bottom:-32px;content:'';position:absolute;right:50%;margin-right:-100px}.contactf-message:before{border-left:80px solid #CBC7C4;bottom:-34px;right:50.3%;margin-right:-101px}.cbluebutton{margin-top:25px;width:30%;height:35px;float:right;font-size:15px;color:#fff;display:inline-block;text-align:center;background:linear-gradient(to bottom,#339ad9 0%,#224bbc 100%);box-shadow:0 1px 1px rgba(34,75,188,0.5);border:0;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.cbluebutton span .contact-form-button-submit{background:linear-gradient(to bottom,#52b1e2 0%,#397fd0 100%);font:bold 16px "Helvetica Neue",sans-serif;height:35px;width:100%;color:#FFF;text-shadow:0 1px 1px #224BBC;display:inline-block;box-shadow:0 1px 1px rgba(255,255,255,0.3) inset;cursor:pointer;outline:none;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px}.contact-form-button-submit:active{top:1px;outline:none;-webkit-box-shadow:none;box-shadow:none}.contact-form-cross{border:medium none!important;box-shadow:none!important;padding:0!important;width:11px !important;height:11px !important;}

</style>

5. Setelah anda menambahkan kode, klik Simpan

Sekarang anda harus dapat melihat formulir kontak langsung di halaman anda. Untuk memastikan semuanya berjalan dengan baik, anda dapat mengetesnya terlebih dulu dengan cara mengirim pesan melalui formulir kontak tersebut. maka pesan akan dikirim ke kotak masuk email anda dalam hitungan detik, anda harus memeriksa email yang anda gunakan yang berkaitan denga situs blogger anda.

Pertanyaan yang Sering Diajukan tentang Formulir Kontak

Ke mana masukknya pesan yang telah dikirim?

Setelah pengunjung mengajukan pertanyaan atau mengirim umpan balik melalui formulir kontak, maka pesan tersebut langsung dikirimkan ke email yang terkait dengan akun situs blog anda. Jika sebuah blog memiliki beberapa administrator, maka semua administrator akan menerima komentar atau pertanyaan yang diajukan oleh pengunjung.

Apa manfaat menggunakan halaman "Hubungi Kami" secara terpisah?

Situs blog anda akan terlihat lebih profesional jika memiliki halaman formulir kontak terpisah dalam blog ada. Ini akan memberi anda kredibilitas dan juga memberikan kesempatan kepada anda untuk menambahkan ajakan bertindak di halaman "Hubungi Kami" yang baru.

Apakah bisa menambah bidang data tambahan?

Sayangnya tidak ada. anda tidak dapat menambahkan data khusus seperti situs web, nomor telepon, atau alamat email karena blogger menggunakan tag khusus untuk mentransfer data. semuanya sudah diatur dengan baik dan akan membantu anda untuk mendapatkan informasi dasar yang anda butuhkan tentang pengunjung Anda.

Saya telah menambahkan formulir kontak, tetapi tidak berfungsi. Apa masalahnya?

Ada beberapa alasan mengapa anda kesulitan mengatur formulir kontak. Cara paling mudah untuk memecahkan masalah adalah dengan memeriksa kembali email yang anda tautkan ke blog dan juga menambahkan ulang formulir kontak lagi.

Dengan menggunakan formulir kontak Blogger yang anda maka akan mengurangi spam karena anda tidak perlu menampilkan email anda di situs blog anda.