Sep 15, 2012

Cara Membuat Form Kontak Di Blog Dengan Google Docs

Salah satu kelengkapan suatu blog adalah tersedianya alat untik berinteraksi antara admin dengan visitor blog. Dalam membangun hubungan dengan mereka , seorang blogger dapat memilih berbagai cara seperti mencantumkan alamat kontak yang dapat di hubungi misalnya : No telepon, No HP , fax , email dll. Apalagi bagi blogger yang memonitize blognya dengan layanan premium, atau program bisnis online yang lain yang terkadang memerlukan kontak person untuk menindak lanjuti suatu hal misalnya pesanan konfirmasi pembayaran, dll 

Salah satu yang banyak di gunakan oleh blogger adalah form atau formulir yang dapat diisi dengan pesan dan mengirim langsung ke admin blog tersebut. Pada kesempatan ini Smart Bisnis Online menurunkan tutorial cara membuat form dan mengitegrasikan dengan blog anda. Banyak situs layanan penyedia form di internet, baik yang berbayar maupun gratisan. Salah satu di antaranya adalah google documents( google docs ) dari Google yang dapat di gunakan secara gratis. 

Karena penggunaannya yang luas dan di kenal akrab oleh sebagian besar pengguna internet dan blogger, maka tutorial berikut ini dibuat dari google documents. Untuk memulai silahkan log in ke account anda di google. Setelah itu silahkan klik tab Dokuments.

Gbr.1: Google Documents

Setelah itu akan terbuka halaman google document . Untuk mulai membuat form silahkan klik
1. CREATE > form 
Gbr.2: Create form
2. Setelah layar create form terbuka maka selanjutnya tampilannay seperti gambar di bawah ini


Gbr.3: Tombol untuk memilih template
Sebelum anda mulai membuat form, anda dapat memilih template form yang tersediah. Untuk keperluan ini anda harus klik Theme: Plain . Hasilnya seperti tampak pada gambar di bawah ini. 

Gbr.4: Pilihan template
3: Cukup banyak alternative pilihan template yang di sediakan ( 97 item pilihan) 3. Klik salah satu temlete form yang anda sukai 

4. Klik Apply yang ada di sudut kiri atas untuk menerapkan pilihan template tersebut atau Cancel untuk membatalkannya 

Gbr.5:Tampilan awal form dengan tamplate
5. Seperti tampak pada gambar di atas form sudah ada dengan template Gray shadow

6. Pada kotak isian paling atas ( untitle form ) : isi dengan nama form yang akan anda buat. Misalnya Kontak atau Hubungi saya dll. Jika anda member nama form sama dengan nama halaman tempat form ini di tempatkan, makan di halaman itu akan muncul dua nama dengan kata yang sama. Jadi silahkan berkreasi dengan kalimat lain misalnya “ Apakah anda punya pesan untuk saya?” ini akan menjadi judul form yang tidak sama dengan kata di heading 1 ( H1)

7. Kotak isian berikutnya di isi dengan kalimat petunjuk pengisian seperti: lsi form di bawah ini dengan benar…dst 

8. Edit kotak isian Sample question 1 dengan mengklik gambar pensil di sebelah kanan Selanjutnya akan tampil kotak editing form seperti gambar berikut:

Gbr.6: Form yang siap di edit
Setelah semua form diatas selesai di isi selanjutnya ceklis make this a reguired question dan klik Done

 9. jika masih ingin menambah form silahkan klik tombol add+ di sudut kiri atas atau klik gambar dua kotak selingkuh..:D di sebelah kanan gambar pensil. Ikon tersebut fungsinya untuk menduplikasi form yang sudah di buat sebelumnya. Tinggal mengganti question title help text question type ( sama no.8 diatas. 

10. Klik Save di sudut kanan atas untuk menyimpan pengaturan yang telah anda buat pada form ini.

11. Klik tab more action> edit comfirmation untuk membuat pernyataan atau pemberitahuan kepada visitor yang telah selesai mengirim suatu pesan.

Gbr.7: Edit Comfirmasi
12. Isi form edit confirmasi yang tersediah dengan kalimat pemberitahuan. Misalnya Pesan anda telah terkirim. Terima kasih….dst 

13. Ceklis Publish response summary dan Klik Save, atau Cancel jika ingin membatalkannya 

14. Kembali lagi ke tab More action > Embed untuk mendapatkan script form tersebut. 

Gbr.8: Script form
 15. Kopi script form. Selanjutnya masuk di account anda di blogger.com dan buka blog yang akan di beri form. Page > edit page dan buka editor HTML dan silahkan paste script tersebut. 

16. Perhatikan jika lebar form anda terlalu besar silahkan buka kembali script formnya dan edit lebar ( width ). Silahkan kurangi angka depaultnya yaitu”768”. 

17. Untuk melihat jika ada kiriman ke anda atau mau melihat respon dari visitor silahkan cek dengan masuk ke google documents pilih atau klik nama formnya misalnya Kontak . 

Gbr.9:Sheet respons
Saya berharap tutorial ini dapat membantu terutama bagi teman-teman blogger pemula dalam meningkatkan interaksi dan layanan anda ke visitor sehingga apapun program bisnis online anda dapat berkembang demgan baik. 

16 comments:

  1. artikelnya sangat membantu sob

    ReplyDelete
    Replies
    1. @azkaa, trims udah nyaperin Blog Bisnis Online. Saya senang jika artikel di atas bermanfaat bagi pembaca blog.

      Delete
  2. @Mizzyyoo, Terima kasih juga atas kunjungan anda.

    ReplyDelete
  3. mantap gan, akhirnya saya juga bisa membuat form kontak dan patner us di blog saya... terima kasih atas ilmunya. Salam sehat selalu yah

    ReplyDelete
  4. @herlan, terima kasih sudah sampai di Blog Bisnis Online. Selamat, itu artinya pengunjung blog anda sudah dapat menghubungi anda dengan mudah.

    ReplyDelete
  5. makasih tutorialnya mas,,, :)

    ReplyDelete
    Replies
    1. @Linux, semoga info ini bermanfaat bu anda.

      Delete
  6. makasih infonya mas,, saya jadi banyak belajar,, :)

    ReplyDelete
  7. Lumayan dapet ilmu baru buat bikin ontak form

    ReplyDelete
  8. pagi mas..
    bisakah pemberitahuan tentang adanya orang yang menghubungi kita di alihkan ke email..
    terima kasih..

    ReplyDelete
    Replies
    1. @jualan busana, dengan google drive sekarang prosedur membuat form lebih baik. Bahkan di Sahare setting kita dapat mengatur untuk pemberitahuan via email ke owner. Tinggal masukkan email kita. Jadi setiap ada orang yang ngisi form google drive langsung kasih tahu ke kita.
      Coba deh pasti bisa

      Delete
  9. bisa menambahkan foto / gambar gak ?
    klo bisa bagaimana caranya ya ???

    ReplyDelete
  10. Sayangnya tidak ada kode captca nya..jadi rentan spam seperti di http://www.rumahkudibogor.com/

    ReplyDelete
  11. tutorial nya keren nih gan, mau tak coba ahh.. maksih gan? soalnya blog saya yang ini msih kurang oke
    http://zaifratama.blogspot.co.id/

    ReplyDelete

Mari budayakan berkomentar yang membangun. Terima kasih untuk tidak SPAM!