3 Cara Mudah Membuat Form Contact Us Keren di Blog atau Website

Apa itu "Contact us"?
Contact us berasal dari bahasa inggris yang artinya adalah "kontak kami". Halaman contact us ini merupakan sebuah halaman yang diperuntukkan bagi pengunjung blog atau website untuk menghubungi pengelola blog tersebut melalui kotak formulir.

Setiap website atau blog yang professional pasti memiliki halaman 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 semua 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 hubungi 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.

Baca juga :
Kenapa Harus Ngeblog? 10 Alasan Ini Adalah Jawabannya

Bagaimana caranya membuat form contact us?

Sedikitnya ada 3 cara 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". Perhatikan gambar!


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 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 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 = '4385875731244968434'; //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 "Laman" pada dasbor blogger, kemudian klik "Laman baru". Perhatikan gambar!


Berilah sebuah judul halaman, judul ini akan menjadi url atau alamat kontak Anda nantinya. Misalnya: Hubungi Kami, Kontak Kami, Contact Us, dan lain-lain

Setelah itu tempelkan kode script yang sudah Anda salin tadi pada kolom HTML kemudian klik "Publikasikan". Perhatikan gambar!


Nahh.. Sampai pada tahap ini berarti Anda sudah berhasil membuat halaman hubungi kami. Namun supaya lebih perfect lagi, Anda bisa menghilangkan kolom komentar yang ada pada halaman tersebut.

Caranya, klik ikon Gear yang ada di sebelah kanan Anda atau perhatikan tanda panah pada gambar diatas!

Setelah itu pada opsi "komentar pembaca" silahkan pilih "jangan bolehkan, sembunyikan yang ada". Terakhir klik "simpan". Perhatikan gambar!


Sekarang coba Anda buka halaman tersebut dan lihatlah hasilnya.

Baca juga :
Blogger atau Wordpress? Platform Mana yang Paling Bagus?

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 2 website pembuat contact form terpopuler dikalangan blogger, yaitu: 123contactform.com dan proxyform.com

1. Tool 123contactform.com

Untuk membuat formulir kontak kami 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 kemudian tempelkan di blog atau website Anda. Perhatkan gambar!


Buatlah sebuah Laman statis di blog Anda untuk dijadikan halaman contact us, seperti yang sudah saya jelaskan pada cara kedua diatas.

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

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

2. Tool Proxyform.com

Untuk membuat formulir kontak menggunakan tool ini, silahkan buka dulu situs proxyform.com.

Kemudian modifikasi form kontak Anda sesuai selera, centang item yang perlu atau biarkan kosong jika Anda tidak ingin menambahkannya.

Atur warna background, warna tulisan, dan jenis font yang ada pada Advanced settings. Jangan lupa juga untuk mengisi kolom E-mail yang ingin Anda gunakan sebagai kontak, kemudian “centang anti spam protection” lalu klik “Create Formular”. Perhatikan gambar!


Setelah itu akan muncul sebuah kolom yang berisi kode script HTML, salin semua kodenya kemudian tempelkan pada halaman blog Anda.


Buatlah sebuah laman statis di blog Anda dan beri judul "Hubungi Kami", kemudian tempelkan kode HTMLnya, terakhir klik "Publikasikan".

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

Itulah dia 3 cara mudah membuat form contact us 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

2 Responses to "3 Cara Mudah Membuat Form Contact Us Keren di Blog atau Website"

  1. Iya agoes, banyak caranya untuk membuat form contact, namun yang saya tahu cuma 3 cara itu.

    Mungkin diluar sana ada cara lain yg lebih gampang.

    ReplyDelete

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