Membuat Form Kontak Di Blogger (How to Make Contact Form Into Blogger)

Ketika kita berkunjung ke sebuah situs profesional penjual product atau jasa, maka disana kita akan menemukan menu contact. Menu "conta...

Ketika kita berkunjung ke sebuah situs profesional penjual product atau jasa, maka disana kita akan menemukan menu contact. Menu "contact" (kontak) tersebut bisa berupa pemberitahuan alamat lengkap situs tersebut baik secara offline ataupun online dengan menyertakan alamat email, tujuannya tentu saja agar pengunjung situs tersebut bisa mencontact atau menghubungi pihak pemilik situs baik dalam rangka pembelian product atau mengirim pesan lainnya.


Dan yang paling memudahkan, kita pun menemukan menu contact yang di dalamnya berisi sebuah form khusus yang tidak hanya menampilkan alamat email yang bisa kita hubungi melainkan form contact yang tinggal kita isi tanpa harus membuka email terlebih dahulu (untuk mengirim pesan). Sangat memudahkan bukan? Bagaimana cara membuatnya di blogger? Nah tips dan tutorial kali ini kita akan membuat form kontak seperti web profesional itu di blogger/blogspot... :)


Sekedar pemberitahuan, Hakimtea.Com Hakimtea.Blogspot.Com sebenarnya telah menggunakan form contact ini sejak posting perdana disini yang launching pada tanggal 16 Januari 2008 lalu, karena berbagai hal saya tidak hadirkan pada list menu di atas. Namun karena sekarang saya menulis tips ini, maka saya hadirkan kembali form kontak saya di list menu di atas sana. Klik saja menu KONTAK saya di atas untuk melihat contoh contact form...:)


Untuk membuat Contact Form ini kita perlu mendaftar di Bravenet.Com karena bravenet merupakan salah satu yang menyediakan jasa contact form ini, tenang saja its free! Gratisan-Dot-Com ko! :). Oke kita langsung saja,


LANGKAH PERTAMA - FIRST STEP (REGISTER/DAFTAR)
  • Masuk ke Bravenet, klik disini (rev).
  • Klik "Email Forms"
  • Klik banner "Get Your Email Forms" (Its Free)
  • Atau kalo ingin melihat dulu preview form contact itu seperti apa klik "View the Email Form Demo" di bawah banner tersebut.
  • Register (daftar) dahulu jika Anda belum terdaftar (Gratis). Klik "join bravenet now" untuk daftar.
  • Isi form pendaftaran yang tersedia.
  • Username: *nama yang akan digunakan ketika login nanti*
  • First Name: *Nama depan*
  • Last Name: *Nama belakang*
  • Email: *email yang aktif*
  • Confirm email: *tuliskan lagi alamat email yg aktif*
  • Password: *ketikan kata sandi, hanya Anda yang tahu*
  • Confirm Password: *Ketikan lagi kata sandi, harus sama dengan kata sandi pertama*
  • Masukan karakter (kode verifikasi) yang ada.
  • Ceklist "I agree to the Bravenet Terms of Service"
  • Klik join bravenet.
  • Tunggu sebentar, proses pendaftaran tengah dimasukan database bravenet.
  • Setelah tampil "Complete Your Bravenet Registration" ada tawaran dari sponshor bravenet, lewati saja, scroll down window ke bawah.
  • Klik tombol "Proceed to Member's Area"
  • Registrasi hampir selesai. Anda akan dikirim email validitas (validation).
  • Login ke email Anda.
  • Cari email dari bravenet dengan title "membernotify - "‎Bravenet Account Confirmation"
  • Email bravenet tersebut mengingatkan username dan password yang Anda gunakan untuk login.
  • Klik link yang ditunjukkan dibawah kalimat, "Please follow the URL..."
  • Tampil windows baru dan ucapan selamat (Congratulations!) Anda telah tergabung menjadi member bravenet.
  • Scrol down window dan klik tombol "Continue to Members Area"
  • "welcome to your account"

LANGKAH KEDUA - SECOND STEP (MEMBUAT FORM KONTAK)

  • Masih di member area bravenet
  • Pada list menu pilih dan klik "web tools"
  • Pada "Unregistered Services" cari "Email Forms" dan klik. (kalo Anda sama sekali belum menggunakan tools dari bravenet, biasanya email forms berada di list kedua baris kedua dibawah Chat Rooms. Ketemu? Oke klik "Email Forms"
  • Klik banner "Get Your Email Forms" (Its Free)
  • Cari "I would like a FREE Email Forms Service" Klik tombol "Continue"
  • Pada "Start with a template" Pilih "Contact Form" (urutan pertama)
  • Keluar kotak dialog, beri nama Form Anda (Kalo tidak diberi nama, bravenet secara otomatis memberi nama "Contact Form" klik Ok jika sudah.
  • Selamat Anda telah mendapatkan "Contact Form" Anda pertama dan cukup sederhana. Biasanya contact form tersebut hanya berisi (1) First and Last Name (2) E-mail Address (3) Message.
  • Klik "I will edit this form"
  • Kita akan menambah pertanyaan (Add a new question), agar ketika pengunjung blog kita telah selesai mengisi contact form dan mengklik submit, mereka di arahkan kembali masuk ke homepage blog kita dan tidak masuk ke homepage bravenet.
  • Oke, klik "Add a new Question"
  • Pada "Add Question" pilih "Question Type - Thank You URL"
  • Masukan URL blog Anda pada form yang disediakan. kalo sudah klik tombol "Add Field".
  • (Question Type - Thank You URL, tidak terlihat pada form Anda karena telah di setting hidden (tersembunyi) oleh bravenet)

Anda bisa mengedit dan menambahi form yang diperlukan, misalnya menambah dengan "Your Blog" dan sebagainya.


Dalam tips ini kita cukupkan dulu sampai disini karena ini hanya sekedar contoh pembuatan Contact Form sederhana, selanjutnya Anda bisa membuat yang lebih dan sesuai keinginan Anda nanti jika tahap latihan pembuatan dan pemasangan form kontak ini telah selesai.



LANGKAH KETIGA - THIRD STEP (MEMASANG FORM KONTAK PADA POSTINGAN)

  • Setelah Contact Form di atas selesai dan berisi tiga form isian dengan satu form hidden (nama, email, pesan dan Thank You URL yang tersembunyi dan mengarahkan kembali ke blog kita)
  • Klik "It's perfect, let's see the code"
  • Copy seluruh code html yang ditunjukkan.
  • Buat postingan dengan judul "Hubungi saya" atau "Kontak"
  • Beri muqodimah, kata-kata sambutan pada postingan Anda, misalkan, "Form kontak ini digunakan bagi Anda yang ingin memesan produk kami bla bla bla..."
  • Paste kode html dari bravenet di bawah muqodimah postingan Anda tersebut.
  • Simpan/Save postingan Anda.
  • Lihat postingan "Kontak" Anda dan silahkan dicoba, diisi dan klik submit!

Selamat Anda sudah mempunyai Contact Form :)


Semoga bermanfaat!


Gambar dari http://www.ontologyworks.com/

_____________

Tips:
  • Ubah tanggal postingan Anda agar tidak tampil di homepage (sebagai postingan baru)
  • Kosongkan label/Kategori karena nantinya kita akan simpan postingan tersebut di list menu (Jika anda menggunakan list menu seperti blog saya)

Note: Selain di postingan, Anda juga bisa memasang form pada element html blog.

PS: Kalo ada masalah jangan sungkan contact saya melalui form Kontak... :)

__________________________________

Klik dan kirim ke:



Jika artikel ini bermanfaat.


Artikel yang berhubungan: Cara Membuat List Menu

COMMENTS

BLOGGER: 10
  1. artikel yang bagus mas... ternyata ada tho yang buat blogger. Baru tahu nih

    ReplyDelete
  2. tutorialnya bagus mas hakim.... tapi kayaknya di blog aku ga "dulu" pake form kontak.... nanti ajah klo dah agak gedean.... :)

    Wassalam,

    ReplyDelete
  3. @ Bizon: dari dulu saya nyari bikin form kontak tapi ga juga nemu blogger yg ngasih solusi mas Bizon... pas daftar bravenet akhir 2007 kemarin eeeh ga sengaja nemu. Jadi biar ga kejadian seperti saya dulu keliling nyari-nyari sampe bingung ya saya tulis disini penemuan saya. Silahkan dicoba... :)

    @ Iman: gede-kecil ga masalah man, patut dicoba, ya lumayanlah biar agak kerenan dikit :)

    ReplyDelete
  4. mas hakim..... caranya ubah tangal posting gmn??

    ReplyDelete
  5. Ketika posting ya man? Saat mau publis dibawah content postingan tuh ada "Pilihan Posting" (sejajar dengan form label/kategori) di klik saja "Pilihan Posting" trus cari disana "Posting tanggal dan waktu " silahkan diubah disana, sesuaikan dengan format yang ada, misalkan 08/03/15 (th/bln/tgl) tergantungan setingan blog Iman. :)

    ReplyDelete
  6. terima kasih mas hakim......
    btw, aku coba yg form komentar kok ga bisa ya?? di step terakhirnya bingung.....

    ReplyDelete
  7. Step terakhir "form komentar" apa "form kontak" postingan ini wa?

    Kalo step terakhir postingan ini (form kontak) setelah semua tahap pembuatan form kontak selesai, Klik "It's perfect, let's see the code" copy seluruh kode html yang diberikan bravenet, paste di postingan kita, usahakan di edit html bukan di compose.

    Met mencoba wa. Goodluck! :)

    ReplyDelete
  8. gw dah coba kim, kebetulan gw juga punya bravenet account, trus notifikasi laporannya lewat mana yah, kalo redirect via email kayanya harus di apgret jadi prof member yah... bayar dong kim... ada yg gratisan ga? loe dah liat di tempat "kongkow" gw kan ada contact form tuh... gw dah testing tapi bingung ngeliat hasilnya dimana :( please help me, ma pren...

    ReplyDelete
  9. Laporannya lewat email yg kita daftarin pertama kali ndi. Nggak usah apgret, masih bisa pake yg gratisan juga... dicoba lagih formnya, terus periksa di email yg kita daftarin pertama kali ke bravenet, ntar biasanya masuk email "servicemail - Bravenet Form Processor" :) gimana pren, coba dulu ah! ^_^

    ReplyDelete
  10. wah mas ini yang selama ini saya cari.. luar biasa nih,, saya coba mas.. terima kasih infonya ya.. mudah-mudahan berhasil

    ReplyDelete
Silakan komentar asal jangan nyepam dan OOT ya :)

Name

1 Left Sidebar,8,1 Right Sidebar,16,2 Column,32,2 Right Sidebar,3,2 Sidebar,1,3 Column,14,3 Column footer,14,4 Column,2,4 Column Footer,5,Ads Ready,12,Adsense,2,Afiiliasi,2,Belajar Teks HTML,1,Berita dan Informasi,11,Bisnis Internet,2,Black,21,Blog HTML,1,Blog Travel,5,Blogger,1,Blogger Template,54,Blogger Tips,24,Blogger Triks,1,Blogger Tutorial,3,Blogger Widget,5,Blogging,2,Blue,9,Bookmark Ready,9,Brown,5,Business,1,Catatan Blogger,32,Catatan Hari Ini,9,Contoh Teks HTML,2,Dunia Kopi,1,eCommerce,1,Facebook Comment,1,Feedburner,1,Fixed,1,Food,1,FoodBlogger,8,Footer Widget Ready,9,Form Kontak,1,Gallery,3,Game Blogger Template,2,Google,1,Google Analytics,1,Gray,8,Green,4,Hotel,1,Info,2,Kesehatan,4,Komputer,3,Kuliner,7,Kutipan,2,Left Right Sidebar,5,Magazine,31,Mario Teguh Quote,2,Microsoft,1,Movie,1,Musik,1,News,1,Online Store,4,Orange,4,Personal,3,Popular Posts,1,Premium,10,Properti,9,Purple,1,Red,6,Related Posts,2,Religi,1,Review,18,Santai,2,Seo,2,SEO Template,4,Shoutbox,2,Sidebar,1,Slider Ready,27,Software,1,Sport,1,Tahu Ngga?,4,Tekno,3,Template Blog,2,Tips,20,Tips Blog,1,Travelog,5,Tutorial,12,Tutorial Blog Pemula,11,Video,1,Website and Internet,1,White,39,Windows,1,Wisata Bandung,1,Wordpress,4,WordPress Convert,18,Yellow,3,
ltr
item
Hakimtea.com | Traveller | Kuliner | Blogger Bandung Indonesia: Membuat Form Kontak Di Blogger (How to Make Contact Form Into Blogger)
Membuat Form Kontak Di Blogger (How to Make Contact Form Into Blogger)
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTkrwaOGJErkFmlkDEQO40h4dhdOIczU_AgZLZ4RzuPwmvt03gR53SKEu-k_zMEmyUADxH1H_4pcx5Nnjtef_SVOPPGrEvVxgaqkOkXnpaQA_LMU5N4cTrzbrjFlnfbHwQ01oknS4rHmU/s200/ContactUs-GetStarted.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTkrwaOGJErkFmlkDEQO40h4dhdOIczU_AgZLZ4RzuPwmvt03gR53SKEu-k_zMEmyUADxH1H_4pcx5Nnjtef_SVOPPGrEvVxgaqkOkXnpaQA_LMU5N4cTrzbrjFlnfbHwQ01oknS4rHmU/s72-c/ContactUs-GetStarted.gif
Hakimtea.com | Traveller | Kuliner | Blogger Bandung Indonesia
https://hakimtea.blogspot.com/2008/03/membuat-form-kontak-di-blogger-how-to.html
https://hakimtea.blogspot.com/
https://hakimtea.blogspot.com/
https://hakimtea.blogspot.com/2008/03/membuat-form-kontak-di-blogger-how-to.html
true
7553029949173842694
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content