3 Cara Mudah Membuat "Contact Form" pada Blog/Web

Apa itu "Contact form"?
Contact form berasal dari bahasa inggris yang artinya adalah "formulir kontak". Contact form ini diperuntukkan bagi pengunjung blog atau website untuk menghubungi pengelola blog tersebut melalui kotak formulir.

Setiap website atau blog yang professional pasti memiliki sebuah halaman khusus yang berisi form contact us ini, sehingga tidak jarang kita menemukan link kontak ini pada navigasi website tersebut.

Disamping itu, beberapa website ada yang menamai halaman ini sebagai halaman kontak kami, hubungi kami, kotak saran, dan lain sebagainya.

Akan tetapi pada dasarnya semuanya sama, halaman tersebut berisi sebuah formulir untuk mengirimkan pesan kepada Admin berupa saran, kritik, pertanyaan, dan lain-lain.

Sebagai contoh, Anda bisa membuka halaman Hubungi Kami pada website ini.

Apa fungsi form contact us ini?

Form contact us atau "formulir kontak kami" ini memiliki beberapa fungsi, diantaranya:
  • Pengunjung blog dapat bertanya langsung kepada Anda seputar artikel yang Anda bagikan. Dengan begitu, mereka akan puas karena bisa berkomunikasi dengan Anda.
  • Pengunjung juga bisa mengirimkan beberapa kritik atau saran tentang website Anda. Sehingga Anda dapat membenah dan meningkatkan lagi kualitas blog.
  • Selain itu, formulir kontak ini juga menjadi salah satu persyaratan supaya blog Anda diterima oleh Google Adsense
  • Dan lain-lain.

Bagaimana caranya membuat form contact us?

Sedikitnya ada 3 cara mudah untuk membuat formulir kontak kami pada blog Anda, yaitu: melalui widget blogger, memasang script HTML, dan menggunakan bantuan situs lain. Berikut tutorialnya!

Cara Pertama : Menggunakan widget gratis dari blogger

Cara ini merupakan cara yang paling mudah karena blogspot sendiri memang sudah menyediakan widget contact ini secara gratis.

Silahkan buka menu "Tata letak" yang ada pada dasbor blogger Anda, kemudian klik "Tambahkan gadget" pada posisi yang ingin Anda tambahkan widget contact. Perhatikan gambar!


Setelah itu pilih opsi "Gadget lainnya", dan klik "Formulir kontak". Seperti pada gambar dibawah ini!


Jika sudah, tahap berikutnya berilah judul contact form Anda kemudian klik "Simpan". Perhatikan gambar!


Nahh... Jika sudah sampai ke tahap ini berarti Anda sudah berhasil memasang widget contact us di blog. Silahkan buka blog Anda dan lihatlah hasilnya!


Menggunakan cara diatas kekurangannya adalah formulir kontak Anda akan muncul di setiap halaman website. Rasanya kurang menarik jika Anda tidak membuatnya pada sebuah halaman khusus.

Untuk membuat formulir kontak ini pada sebuah halaman khusus, silahkan gunakan cara kedua atau ketiga.

Cara Kedua : Menggunakan kode script HTML contact form

Supaya terlihat sedikit professional buatlah form contact us ini pada sebuah halaman khusus. Karena selain memudahkan pengunjung untuk mencari formulir kontak, website Anda pun akan terlihat lebih rapi dan lebih berkelas.

Berikut ini adalah 3 langkah mudah untuk membuat form contact us pada sebuah halaman menggunakan kode script :

Langkah 1 :
Pertama, cari dulu ID blog yang ingin Anda pasang formulir kontak. ID blog adalah sederetan angka unik yang dimiliki oleh masing-masing blog. Pada dasarnya setiap blog pasti mempunyai ID yang berbeda-beda.

Bagaimana caranya mengetahui ID sebuah blog?

Caranya cukup mudah, silahkan buka dasbor blogger dan perhatikan url atau alamat web yang ada pada address bar browser Anda. Nahh... Angka yang ada dibelakang blogID adalah ID blog Anda. Perhatikan gambar!


Angka yang saya beri kolom warna merah pada gambar diatas adalah ID blog Anda. Simpan atau salin angka tersebut.

Langkah 2 :
Perhatikan kode script dibawah ini dengan seksama!

<script>
var blogId = 
'8139974615292777012'; 
//this number should be mandatorily edited. 
//The below message 5 Strings can also be edited 
var contactFormMessageSendingMsg ='Mengirim...'; 
var contactFormMessageSentMsg = 'Pesan Anda telah dikirim.'; 
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Silakan coba lagi nanti.'; 
var contactFormEmptyMessageMsg ='Kolom pesan tidak boleh kosong.'; 
var contactFormInvalidEmailMsg = 'Sebuah email yang valid diperlukan.' 

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, 
document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<form name="contact-form">
<div>
Your Name : </div>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />

<div>
Email: </div>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />

<div>
Message: <em>(Maks.500 karakter)</em></div>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea><br/>

<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirimkan" />

<div style="max-width: 450px; text-align: center; width: 100%;">
<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><br/>

Silahkan ganti angka yang berwarna merah pada kode script diatas dengan ID blog Anda. Kemudian salin semua kodenya.

Selain itu, Anda juga bisa memodifikasi sendiri kode tersebut dengan menambahkan properti css untuk mempercantik tampilan form contact us Anda.

Langkah 3 :
Buatlah sebuah halaman baru untuk dijadikan halaman contact us. Buka menu "Halaman" pada dasbor blogger, kemudian klik "Halaman baru". Seperti pada gambar dibawah ini!


Selanjutnya, editlah halaman Anda. Perhatikan gambar berikut!


  • Nomor (1) : Isikan judul halaman kontak yang ingin Anda buat, misalnya: Kontak Kami, Contact Us, Hubungi Kami, dan lain-lain.

    Judul halaman ini juga akan menjadi alamat permalink halaman Anda nantinya.
  • Nomor (2) : Pilih mode penulisan HTML supaya kode scriptnya bisa diterjemahkan oleh browser.
  • Nomor (3) : Paste atau tempelkan kode script contact form yang sudah sudah Anda salin disini.

Terakhir, klik saja "Publikasikan". Sekarang coba Anda buka halaman tersebut dan lihatlah hasilnya.

Cara Ketiga : Memanfaatkan tool gratis pada situs lain

Cara ketiga ini merupakan cara yang paling umum digunakan, terutama oleh website atau blog selain blogspot.

Tool yang akan kita gunakan disini adalah tool yang disediakan oleh website pembuat contact form terpopuler dikalangan blogger, yaitu: 123contactform.com

Untuk membuat formulir kontak melalui tool ini, silahkan ikuti langkah-langkah berikut!

Langkah 1 :
Pertama buka dulu situs 123contactform.com, kemudian cari dan pilih "Sign Up For Free" untuk membuat sebuah akun. Perhatikan gambar!


Setelah itu, akan ada beberapa pilihan jenis akun. Ada yang premium atau berbayar dan ada pula yang gratisan. Pilih jenis akun yang gratis saja, kemudian klik "Sign Up BASIC Free Always". Perhatikan gambar!


Setelah itu akan muncul formulir pendaftaran akun Anda. Isi semua kolom yang disediakan seperti E-mail dan Password, kemudian klik saja "Create". Perhatikan gambar!


Langkah 2 :
Jika sudah selesai mendaftar, maka pada langkah selanjutnya adalah memodifikasi tampilan form contact Anda.

Pada dasarnya, ada beberapa tool yang disediakan situs ini. Namun karena kita ingin membuat formulir kontak, maka pilih saja "contact form". Perhatikan gambar!


Tahap selanjutnya adalah mengedit tampilan form tersebut, Anda bisa menambahkan atau menghapus berberapa item yang dirasa tidak perlu. Buatlah tampilan form yang sesuai dengan selera Anda. Jika sudah, klik saja "Publish Form".


Kemudian akan muncul beberapa pilihan tempat dimana Anda akan mengaplikasikan form contact ini, pilih saja "Blogger".

Setelah itu akan muncul sebuah kolom yang berisi Kode HTML. Salin semua kode tersebut. Perhatikan gambar!


Langkah 3 :
Buatlah sebuah halaman statis di blog Anda untuk dijadikan halaman contact us, seperti yang sudah saya jelaskan pada cara kedua tadi.

Berilah sebuah judul halaman dan tempelkan kode HTML yang sudah Anda salin. Terakhir klik "Publikasikan".

Nahh... Sekarang bukalah halaman tersebut dan lihatlah hasilnya.

Demikianlah 3 cara mudah membuat form contact us atau formulir kontak kami di blog atau website. Setiap pesan yang dikirimkan oleh pengunjung, otomatis akan masuk ke E-mail Anda.

Anda punya cara lain yang lebih mudah? Silahkan share di kolom komentar. Terimakasih

0 Response to "3 Cara Mudah Membuat "Contact Form" pada Blog/Web"

Post a Comment

Kata-kata dan bahasa yang Anda keluarkan adalah gambaran kualitas diri Anda...