Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog

Blogger.com-Cara membuat dan memasang contact form di blog. Di masa lalu, menambahkan formulir kontak kustom untuk Blogger adalah proses yang sangat rumit, dan banyak blogger terpaksa menggunakan situs web pihak ketiga. Namun, bahkan setelah pihak Blogger meluncurkan sendiri formulir kontak gadget, itu masih dianggap sangat tidak memadai. Hal ini karena gadget resmi hanya akan diimplementasikan pada footer atau sidebar.

Kebanyakan blogger lebih suka memiliki formulir kontak blogger yang terpisah dengan halaman utama dan ditempatkan pada page/halaman sendiri untuk membuat blog mereka tampak diatur dengan baik dan kelihatan lebih profesional.

Memiliki bentuk kontak Blogger yang baik dan menarik sangat penting. Ini adalah alat yang pengunjung, perusahaan, maupun pengiklan dapat digunakan untuk menghubungi Anda sehingga fitur ini harus dimiliki untuk setiap blogger. Jika Anda tidak nyaman dengan berbagi alamat email utama Anda langsung di blog Anda, maka kebiasaan contact form ini menawarkan cara yang efektif di mana orang dapat dengan mudah menghubungi Anda tanpa menampilkan email anda.
Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog

Mengapa harus menggunakan Contact Form di Blog?

Jika Anda masih menggunakan contact form pada penyedia pihak ketiga, Anda pasti harus mempertimbangkan untuk beralih ke bentuk contact form khusus resmi untuk Blogger karena memiliki berbagai manfaat yang unik, seperti:
  • Pesan dikirim segera - Sebagai administrator blog, Anda akan menerima pesan segera pengunjung menggunakan contact form.
  • Terpercaya - Ini adalah gadget bentuk resmi yang dikembangkan oleh Blogger (Google), sehingga lebih dapat dipercaya dan diandalkan untuk memulai kontak dibandingkan dengan menggunakan jasa pihak ketiga.
  • Pertanyaan - Bentuk kontak menawarkan platform bagi pengunjung Anda untuk mengajukan pertanyaan spesifik yang mungkin mereka memiliki mengenai artikel postingan blog Anda atau bisnis Anda secara umum. Hal ini juga dapat menjadi cara yang sangat baik jika Anda menjual produk atau jasa tertentu.
  • Feedback/Umpan balik - Pengunjung dapat dengan mudah berkomentar di blog Anda dengan meninggalkan umpan balik melalui formulir kontak Anda. Umpan balik ini dapat membantu Anda menentukan apa yang harus dilakukan selanjutnya di blog Anda atau apa penyelesaiannya berdasarkan komentar pengunjung.
  • Informasi atau permintaan layanan - Bagi mereka yang menggunakan blog sebagai cara pemasaran produk atau layanan, klien dapat menggunakan formulir kontak khusus untuk Blogger untuk menghubungi anda dan meminta informasi tambahan mengenai produk atau layanan anda.

Bagaimana Cara Menambahkan Widget Formulir Kontak di Blog?

Sebelum menambahkan kustom Blogger formulir kontak ke page atau halaman sendiri di blog, kita perlu menambahkan contact form standar di sidebar blog, berikut ini adalah cara membuatnya:

1. Masuk ke dashboard Blogger Anda dan pergi ke "Tata Letak"> klik pada link "Tambahkan gadget" di wilayah sidebar halaman.


2. Pilih "Gadget lainnya" di bawah tab "Dasar-dasar" dan klik "Formulir kontak" atau tombol "+" untuk menambahkan Gadget Formulir Kontak.

Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog
Setelah itu akan muncul tampilan di bawah ini, klik "Simpan",
Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog
Widget contact form atau formulir kontak sudah dibuat. Anda bisa melihat di blog anda untuk tampilannya. Sekarang yang harus anda lakukan adalah menyembunyikan widget tersebut dari sidebar, dan memindahkannya ke page/laman sendiri di blog.

Menyembunyikan Contact Form Blogger dari Sidebar

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

1. Didashboard blog anda, Pergi ke "Template" dan tekan tombol "Edit HTML". Setelah kode editor terbuka, klik di mana saja di dalam area kode dan tekan tombol CTRL + F (atau Command + F untuk mac) untuk membuka kotak pencarian.

2. Ketik kode berikut ini di dalam kotak pencarian dan tekan Enter untuk menemukannya:
ContactForm1
3. Jika anda melihat kode didalam widget ContactForm1 dibawah ini  
<b:includable id='main'>
 tambahkan kode CSS dibawah ini tepat dibawah kode <b:includable id='main'> ,
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
Jangan lupa memasukkan kode penutup dibawah ini
</b:if>
sebelum kode </b:includable>.


4. Klik tombol "Simpan template"  di sisi kiri atas dan lihat blog Anda, widget formulir kontak sudah tidak tampil lagi di sidebar blog anda.

Menambahkan Contact Form di Page/Laman Sendiri di Blog

Akhirnya, sekarang kita aktifkan fungsi dari kontak formulir yang sudah anda buat, mari kita tambahkan bentuk kontak khusus di blog Blogspot anda...

1. Pergi ke "Laman" dan klik tombol "Laman baru". Jika Anda sudah memiliki laman untuk contact form, cukup klik link "Edit" di bawah judul halaman.

Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog


2. Setelah editor laman terbuka, isi judul halaman dengan "Kontak" atau "Contact Us" atau judul apapun yang ingin Anda tampilkan sesuai keinginan anda.
3. Klik pada tab HTML karena kita akan menambahkan kode HTML untuk membuat contact form aktif. Di situs yang tepat, mengubah pengaturan Halaman "Tafisrkan HTML yang diketik", lalu klik tombol "Selesai"

Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog

4. Di bawah ini adalah 5 bentuk gaya contact form. Pilih yang Anda sukai dan salin kode css yang tersedia, kemudian paste kode di dalam kotak HTML editor halaman Anda, seperti gambar diatas.



#1 Simple Contact Form

Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog
<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}
</style>
<div class="widget ContactForm" id="ContactForm1"><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>

#2 Contact form with CSS rainbow divider

Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog

<style type="text/css">
.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;}
</style>
<div class="widget ContactForm" id="ContactForm1"><div class="contact-form-widget"><hr><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="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="email-message" 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 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>

#3 Blogger Contact Form with CSS Ribbon

Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog

<style type="text/css">
.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}
</style>
<div class="widget ContactForm" id="ContactForm1"><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="email" 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="email-message" rows="5" value="" placeholder="Type your message here..."></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>

#4 Minimal Contact Form

Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog

<style type="text/css">
.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}.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}
</style>
<div class="widget ContactForm" id="ContactForm1"><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/AVvXsEiBacD0l0roWScajcSiBpQupSRUb0Vwia0JACx4xSUOFXeXlwaR0a27nKc5aXw99BjSbeqGhLxdpryYu_MBT04gscC1ioVlRnUIz2q45As5UA4HpzSA5EMecRJQCmssl_XYBcaC-Bzjy5ft/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/AVvXsEh41zG8k8SvpgkBqNM8MwMkSDCwfrwMzjx7ZpMYdj5rkCmc31Aoct_NcJlIle7KeYHUv8W1mZpwJMG1AokVulRzOA5_whD8i3YZxSsuPesT75QKJGnsvDOvIjH2JSH6mlbaJrJ5H_Hva3GO/s1600/envelope%25281%2529.png" width="16" height="16" /></div><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" 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="email-message" 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>

#5 Contact form with speech bubble

Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog

<style type="text/css">
.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}
</style>
<div class="widget ContactForm" id="ContactForm1"><div class="contact-form-widget"><div class="form"><form name="contact-form"><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><div class="cbluebutton"><span><input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /></span></div><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="E-mail" onblur='if (this.value == "") {this.value = "E-mail";}' onfocus='if (this.value == "E-mail") {this.value = "";}'/></div><div style="clear:both"></div><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>
5. Setelah Anda menambahkan kode css, klik "Publikasikan" tombol di sisi kanan atas. Sekarang Anda dapat melihat formulir kontak Blogger aktif pada halaman page statis Anda. Untuk memastikan bahwa semuanya bekerja dengan baik, Anda dapat mengirimkan pesan sebagai uji coba. pesan harus dikirim ke kotak masuk Anda dalam hitungan detik, hanya pastikan bahwa Anda memeriksa email yang Anda gunakan dengan akun Blogger Anda.

Pertanyaan tentang Custom Form Contact untuk Blogger Sering Diajukan

Di mana pesan pergi?

Setelah pengunjung mengajukan pertanyaan atau mengirimkan umpan balik melalui formulir kontak Blogger, itu langsung dikirim ke email yang terkait dengan akun Blogger Anda. Jika blog memiliki beberapa administrator, maka semua administrator individu akan menerima komentar atau pertanyaan yang diajukan oleh pengunjung.

Apa manfaat dari menggunakan terpisah "Hubungi Kami" halaman?

Meskipun semua bermuara pada preferensi pribadi Anda, blog Anda akan terlihat lebih profesional jika memiliki halaman terpisah untuk formulir kontak khusus untuk Blogger. Ini memberi Anda kredibilitas dan juga menawarkan Anda kesempatan untuk menambahkan panggilan khusus untuk beraksi di halaman "Hubungi Kami" baru.

Apakah mungkin untuk menambahkan kolom tambahan?

Sayangnya tidak ada. Anda tidak dapat menambahkan kolom kustom seperti website, nomor telepon atau alamat surat sejak Blogger menggunakan tag khusus untuk mentransfer data. Dalam kasus apapun, bidang default meletakkan dengan baik dan akan membantu Anda untuk mendapatkan informasi dasar yang Anda butuhkan tentang pengunjung Anda.

Saya telah menginstal formulir kontak Blogger, tapi itu tidak bekerja. Apa yang bisa menjadi masalah?

Ada beberapa alasan mengapa Anda mungkin akan mengalami kesulitan menyiapkan formulir kontak Anda. Salah satunya adalah karena kesalahan dalam langkah-langkah yang anda lakukan. Coba ulangi kembali. Jika masih tidak bisa silahkan bertanya dikomentar.

Untuk pratinjaunya, bisa anda lihat di halaman contact form blog ini. 

Pada akhirnya, dengan menggunakan widget contact form Anda memperoleh konsistensi dalam jenis informasi yang Anda minta dan juga mengurangi spam karena Anda tidak perlu menampilkan email Anda langsung di blog.

Demikian artikel tentang  5 Widget Contact Form / Formulir Kontak Terbaik untuk Blog di Blogspot.