Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Menciptakan Dan Memasang 5 Widget Contact Form Keren Di Blog

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

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

Memiliki bentuk kontak Blogger yang baik dan menarik sangat penting. Ini ialah alat yang pengunjung, perusahaan, maupun pengiklan sanggup dipakai untuk menghubungi Anda sehingga fitur ini harus dimiliki untuk setiap blogger. Jika Anda tidak nyaman dengan membuatkan alamat email utama Anda eksklusif di blog Anda, maka kebiasaan contact form ini menunjukkan cara yang efektif di mana orang sanggup dengan gampang menghubungi Anda tanpa menampilkan email anda.
Cara menciptakan dan memasang contact form di blog Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog

Mengapa harus memakai Contact Form di Blog?

Jika Anda masih memakai contact form pada penyedia pihak ketiga, Anda niscaya harus mempertimbangkan untuk beralih ke bentuk contact form khusus resmi untuk Blogger alasannya mempunyai aneka macam manfaat yang unik, seperti:
  • Pesan dikirim segera - Sebagai direktur blog, Anda akan mendapatkan pesan segera pengunjung memakai contact form.
  • Terpercaya - Ini ialah gadget bentuk resmi yang dikembangkan oleh Blogger (Google), sehingga lebih sanggup mengemban amanah dan diandalkan untuk memulai kontak dibandingkan dengan memakai jasa pihak ketiga.
  • Pertanyaan - Bentuk kontak menunjukkan platform bagi pengunjung Anda untuk mengajukan pertanyaan spesifik yang mungkin mereka mempunyai mengenai artikel postingan blog Anda atau bisnis Anda secara umum. Hal ini juga sanggup menjadi cara yang sangat baik jikalau Anda menjual produk atau jasa tertentu.
  • Feedback/Umpan balik - Pengunjung sanggup dengan gampang berkomentar di blog Anda dengan meninggalkan umpan balik melalui formulir kontak Anda. Umpan balik ini sanggup membantu Anda memilih apa yang harus dilakukan selanjutnya di blog Anda atau apa penyelesaiannya menurut komentar pengunjung.
  • Informasi atau undangan layanan - Bagi mereka yang memakai blog sebagai cara pemasaran produk atau layanan, klien sanggup memakai formulir kontak khusus untuk Blogger untuk menghubungi anda dan meminta info komplemen 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 ialah 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 menciptakan dan memasang contact form di blog Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog
Setelah itu akan muncul tampilan di bawah ini, klik "Simpan",
Cara menciptakan dan memasang contact form di blog Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog
Widget contact form atau formulir kontak sudah dibuat. Anda sanggup melihat di blog anda untuk tampilannya. Sekarang yang harus anda lakukan ialah 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 ialah untuk menyembunyikannya sehingga akan muncul hanya di halaman statis.

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

2. Ketik isyarat berikut ini di dalam kotak pencarian dan tekan Enter untuk menemukannya:
ContactForm1
3. Jika anda melihat isyarat didalam widget ContactForm1 dibawah ini  
<b:includable id='main'>
 tambahkan isyarat CSS dibawah ini sempurna dibawah isyarat <b:includable id='main'> ,
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
Jangan lupa memasukkan isyarat epilog dibawah ini
</b:if>
sebelum isyarat </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, kini 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 mempunyai laman untuk contact form, cukup klik link "Edit" di bawah judul halaman.

Cara menciptakan dan memasang contact form di blog 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 impian anda.
3. Klik pada tab HTML alasannya kita akan menambahkan isyarat HTML untuk menciptakan contact form aktif. Di situs yang tepat, mengubah pengaturan Halaman "Tafisrkan HTML yang diketik", kemudian klik tombol "Selesai"

Cara menciptakan dan memasang contact form di blog Cara Membuat dan Memasang 5 Widget Contact Form Keren di blog

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



#1 Simple Contact Form

Cara menciptakan dan memasang contact form di blog 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 menciptakan dan memasang contact form di blog 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 menciptakan dan memasang contact form di blog 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 menciptakan dan memasang contact form di blog 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/AVvXsEhsA1KHF_j9b82ivjLQf0P3MWuLIFul4Ubpyn-oFIA030t6fO6xiCysb1W3zSE8j2sAHSFvYomQR9qlB_MYI_VxpOa3jAUNawNV4L5T7QtiV45F9wcTfzNibquklFupDcZ4ZBp3UCJLnDcu/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/AVvXsEg7uN4f0jYgpcwpms8vjKei6TCp9ne5jssremWRjrDGmWo5YqPv5zzDmGwmuaK3hYn2ClBz5ny_xTz5M9uxfRLYCkqcSyR35piwtm1_vRDFTTWPsDVGzUOSj6i4UejXk2xUBXMV0Fzz2gMk/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 menciptakan dan memasang contact form di blog 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 isyarat css, klik "Publikasikan" tombol di sisi kanan atas. Sekarang Anda sanggup melihat formulir kontak Blogger aktif pada halaman page statis Anda. Untuk memastikan bahwa semuanya bekerja dengan baik, Anda sanggup mengirimkan pesan sebagai uji coba. pesan harus dikirim ke kotak masuk Anda dalam hitungan detik, hanya pastikan bahwa Anda menyelidiki email yang Anda gunakan dengan akun Blogger Anda.

Pertanyaan wacana Custom Form Contact untuk Blogger Sering Diajukan

Di mana pesan pergi?

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

Apa manfaat dari memakai terpisah "Hubungi Kami" halaman?

Meskipun semua bermuara pada preferensi pribadi Anda, blog Anda akan terlihat lebih profesional jikalau mempunyai halaman terpisah untuk formulir kontak khusus untuk Blogger. Ini memberi Anda dapat dipercaya dan juga menunjukkan Anda kesempatan untuk menambahkan panggilan khusus untuk beraksi di halaman "Hubungi Kami" baru.

Apakah mungkin untuk menambahkan kolom tambahan?

Sayangnya tidak ada. Anda tidak sanggup menambahkan kolom kustom menyerupai website, nomor telepon atau alamat surat semenjak Blogger memakai tag khusus untuk mentransfer data. Dalam masalah apapun, bidang default meletakkan dengan baik dan akan membantu Anda untuk mendapatkan info dasar yang Anda butuhkan wacana pengunjung Anda.

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

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

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

Pada akhirnya, dengan memakai widget contact form Anda memperoleh konsistensi dalam jenis info yang Anda minta dan juga mengurangi spam alasannya Anda tidak perlu menampilkan email Anda eksklusif di blog.

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