Ok sobat seocips, berikut ini seocips.com akan membagikan tentang cara membuat Contact Form atau cara membuat Contact US di Blog Blogger. Mengapa saya katakan sederhana? karena untuk memasangnya kita tidak perlu mendaftar ke website pihak ketiga (yang kadang kala widgetnya ada iklannya dan link yang keluar) ke web penyedia widget seperti ini, tapi kita akan menggunakan widget yang telah disediakan oleh pihak Blogger.

Memasang ini di blog merupakan salah satu bagian yang penting dan berfungsi sebagai media korenspondensi formal dan personal. Meskipun sudah ada banyak media lain, namun halaman kontak menjadi pilihan karena menjaga privacy bagi kedua belah pihak, yaitu pemilik blog/website dan visitor/customer.

Membuat Contact Form di Blog

Membuat halaman contact dengan contact form sederhana

Contact form sangatlah penting untuk seocips maupun para pembaca karena jika mereka ingin menyampaikan sesuatu kepada pemiliki blog, mereka dapat menghubungi kita menggunakan widget ini. Biasanya contact form diberi judul "Hubungi Kami" atau "Contact Us" dan disediakan oleh Blogger hanya bisa digunakan untuk widget blog, tapi dengan tutorial ini maka kita dapat memasangnya ke halaman blog kita. Nah berikut adalah cara membuat dan memasang widget ini ke halaman blog.

Memasang Widget Contact Form di Blog

Kita harus menambahkan widget contact form kedalam halaman yang kita buat. Caranya, buka halaman layout > Add gadget > Contact Form. Letakkan di sembarang tempat.

Cara Membuat Contact Form Sederhana di Blogger


Kemudian cari kode seperti dibawah ini dan hapus pada beberapa bagian dan sisakan seperti dibawah ini ( tulisan "hapus bagian ini" itu dihapus juga yah )
  <b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
    <b:includable id='main'>
Hapus bagian ini
</b:includable>
  </b:widget>
</b:section>
Nah sekarang simpan template anda.

Memang kita harus memasang dulu widgetnya kemudian menghapusnya seperti cara di atas, kalau tidak contact formnya tidak akan berfungsi. Jika sudah, sekarang tinggal memasukan kode dibawah ini ke halaman blog kamu.

Membuat Halaman Contact Us

Sekarang lanjutkan untuk membuat halaman "Contact us". Buat laman baru atau bisa juga membuat postingan baru, terserah kamu mau pilih yang mana. Jika sudah siap, letakan kode dibawah ini dengan mode  HTML ( sebelahnya compose ) ke dalam halaman anda.
<div class='seocips-contact-form'>
<div class='form'>
<!-- Custom Contact Form By Seocips start -->
<div class='seocips-contact-title'>
Contact Form
</div>
<form name='contact-form'>
<!-- Name Field -->
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' value="Name" size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}' onfocus='if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}' />
<p></p>
<!-- Email ID Field -->
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' value="Email ID"  size='30' type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}' onfocus='if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}'/>
<p></p>
<!-- Message Field -->
<textarea class='contact-form-email-message'  id='ContactForm1_contact-form-email-message' name='email-message'  value='Leave Your Message..'  onblur='if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}' onfocus='if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}'></textarea>
<p></p>
<!-- Clear Button -->
<input class='contact-form-button contact-form-button-submit seocips-button-color' type='reset' value='Clear'/>
<!-- Send Button -->
<input class='contact-form-button contact-form-button-submit seocips-button-color' id='ContactForm1_contact-form-submit' type='button' value='Send'/>
<p></p>
<!-- Validation -->
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>
<!-- End Custom Contact Form By seocips -->
</div></div>
<style>
.seocips-contact-form { background:#fff; box-shadow:-1px 2px 3px #ddd; font:12px arial; width:100%; max-width:320px; margin:20px auto; padding:15px; border:1px solid #ddd; }
.seocips-contact-title { box-shadow:-1px 2px 3px #ddd; text-shadow:0 1px 1px rgba(0,0,0,.3); margin:0 0 10px 0; font-weight:400; padding:10px 15px; font:16px Arial; cursor:pointer; text-align:center; color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.contact-form-name,.contact-form-email,.contact-form-email-message { max-width:320px; width:100%; font-weight:bold; }
.contact-form-name { background:#f3f3f3 url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 8px; background:#f3f3f3; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; box-shadow:inset -2px 2px 3px #ddd; vertical-align:top; }
.contact-form-email { background:#F2F2F2 url(http://3.bp.blogspot.com/-Wf_IBW4cEts/UZ-li4SsnvI/AAAAAAAAJuw/qYAi9lghY1E/s320/email.png) no-repeat 7px 10px; background-color:#F2F2F2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; vertical-align:top; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-email:hover,.contact-form-name:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:5px 15px 5px 28px; }
.contact-form-email-message:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:10px; }
.contact-form-email-message { background:#FFF; background-color:#f2f2f2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:arial; font-size:13px; margin:0; margin-top:5px; padding:10px; vertical-align:top; max-width:320px !important; height:150px; border-radius:4px; box-shadow:inset -2px 2px 3px #ddd; }
.contact-form-button { cursor:pointer; height:32px; line-height:28px; font-weight:bold; border:none; }
.contact-form-button { display:inline-block; zoom:1; *display:inline; vertical-align:baseline; margin:0 2px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:14px/100% Arial,Helvetica,sans-serif; padding:.5em 2em .55em; text-shadow:0 1px 1px rgba(0,0,0,.3); box-shadow:-1px 2px 3px #ddd; }
.contact-form-button:hover { text-decoration:none; }
.contact-form-button:active { position:relative; top:1px; }
.seocips-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
.seocips-button-color:hover { background:#f47c20; }
.seocips-button-color:active { color:#fcd3a5; }
.contact-form-name { background:#F3F3F3 url(http://2.bp.blogspot.com/-bNZePDihTPU/UZ-lhWAHXqI/AAAAAAAAJuo/aSVVE_A6HpE/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
</style>
Masih dalam mode HTML dan langsung saja pubilkasikan, jika kamu kembail dulu ke mode compose kemudian di publikasikan contact formnya bisa berantakan.



Memang widget diatas tampilannya simple dan sederhana, tapi cukuplah menurut saya. Anda dapat mengujicobanya dengan mengirimakan pesan menggunakan contact form ini dan periksa apakah pesannya muncul di email gmail (email blogger) kamu.
32 Komentar untuk "Cara Membuat Contact Form Sederhana di Blogger"

keren bos semoga saya menambahkan dengan contact form nya benar

ok gan semoga berhasil menambahakan widget cotact formnya.. (o)

nanti pesan masuk nya itu dimana bos , kita buka atau mau melihat pesan masuknya di bagian apa boss

Pesannya akan masuk ke emailnya sobat, kalau gak salah dibagian sosial.., syaratnya widget ini harus terpasang di blognya sobat, kalau di blog aku otomatis pesannya masuk ke email saya. :)

Simple tapi keren ...
kayaknya ini yang aku cari ...
makasih ya gan, mau tak coba ke blog aku lainnya.

Yapp.. mau ditanya akhirnya terjawab sudah.
Soalnya nih mas gak ada input email loh hehe

Makasih mas.. Sederhana itu lebih ^_^

Iya gan, sederhana soalnya di hasilnya mungkin lebih sederhana dari demonya, karena demonya sudah di edit sedikit. Biar lebih keren sobat bisa modif contact formnya misalnya menambahkan bayangan, border dan lain sebagainya.

Wah untunglah jika ini yang sobat cari. Silahkan di coba.

saya mau nya kalau diclick "Contact US" nanti bakalan turun dari atas contact us nya, itu gimana yak? mohon bantuannya

sudah saya pasang mas, sabagai percobaan coba mas brando kontak saya apakah kontak saya berfungsi atau tidak ?

gpangky.blogspot.com

tadi komeng di contac us.. padahal mau kesini komengnya.. mangap komengnya nyasar kesini mbah..

bisa juga akhirnya thanks ya

gan, nanti ketika dipasang di blog, pesan yang masuk ke form kan terlihat di email agan atau email saya?

Kalau contact formnya di pasang di blog, pesan yang masuk ke form akan otomatis ke email pemilik blog.

wah simple dan cepat nih gan ga perlu daftar daftar lagi di situs. makasih gan

lumayan nambah ilmu, udah diterapkan di blog baru saya ilmunya

kereeennn sekaalliii,,, terimakasih banyak

terimakasih artikelnya bermanfaat

Wah usul yang bagus nanti saya buatkan tutorialnya.

Iya, ini widget contact defaulnya Blogger, hanya saja dipindahkan ke halaman dan tampilannya di modif dikit.

Bang, itu kan ada icon orang sama email di kolom nama sama email id. Nah di blog saya gakeliatan, cara munculinnya gimana? Apa musti nambahin bootstrap?

Itu hanya Icon/gambar biasa yang upload dan di jadikan background. Wah, maaf bang saya kurang tahu jika gambar itu tidak muncul.