Cara Membuat Contact Us Keren di Blogger dan Wordpress

Cara Membuat Contact Us Keren di Blogger dan Wordpress

Halaman contact us merupakan sebuah halaman yang bisa digunakan oleh pengunjung blog untuk berkomunikasi dengan pemilik blog secara privat. Setiap pemilik blog memiliki berbagai cara yang berbeda-beda untuk membuat dan menayangkan contact us di blognya. Mulai dari dengan menuliskan alamat email langsung, memasang nomor telepon dan media sosial hingga memberikan form kontak.

Carapedi sendiri memilih untuk membuat contact us dengan menuliskan format kontak secara manual. Hal ini tentu dengan berbagai pandangan dan alasan.

Namun kebanyakan para blogger membuat contack us dengan menyediakan formulir kontak. Yang maka pengunjung bisa memasukkan dan mengirim pesan kedalam kontak tersebut.

Baik pemilik blog Wordpress maupun Blogspot, keduanya bisa membuat form contack us dengan cara yang sama. Nah di artikel ini akan saya bedah keduanya agar lebih jelas.

Apa sih pentingnya buat contact us?

Halaman contact us, boleh dikatakan sebagai halaman yang penting untuk di buat pada sebuah blog. Dimana melalui halaman inilah para pengunjung blog dapat berinteraksi dengan pemilik blog.

Bahkan jika anda membuat sebuah blog untuk tujuan monetise dengan Google Adsense maka blog tersebut haru memiliki halaman contact us. Beberapa alasan pentingnya layanan contact us diantaranya adalah:

  1. Agar pengunjung dapat menyampaikan pertanyaan terkait dengan informasi yang ada dalam blog
  2. Pengunjung dapat memberikan kritik dan saran melalui kontak form (contact us)
  3. Memudahkan komunikasi orang atau perusahaan yang ingin melakukan kerjasama dengan pemilik blog
  4. Sebagai salah satu syarat untuk pengajuan sebagai publisher Google Adsense

Bagaimana cara membuat contact us?

Membuat kontak form atau contact us tidaklah sulit. Untuk anda pemilik blog Wordpress ataupun pemilik blogspot, anda bisa membuatnya dengan sangat mudah.

Di artikel ini tim carapedi.id sudah mempersiapkan tutorial lengkapnya yang bisa anda gunakan untuk membuat contact us keren di blogspot dan di Wordpress.

Baca juga: Cara bikin halaman privacy di blog

A. Cara membuat contact us di Blogger

Jika anda adalah pemilik blog dengan ekstensi blogspot atau blogger maka anda bisa membuat contact us dengan menggunakan kode html yang bisa anda pasang. Cara pembuatannya sangat mudah kok, berikut adalah langkah-langkahnya:

cara membuat contact us

Membuat halaman contact us di blogger

cara membuat contact us

Mengatur halaman kontak blogspot

<script>
var blogId = 'nomor-ID-blog';//gunakan nomor ID blog kamu
//Kamu juga bisa mengedit pesan di bawah ini, jangan lupa tanda kutipnya
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan sudah terkirim.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat terkirim, coba beberapa saat lagi.';
var contactFormEmptyMessageMsg ='Harap isi kotak pesan.';
var contactFormInvalidEmailMsg = 'Harap isi alamat email yang valid.'
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>
<div class="contact-form">
<form name="contact-form">
<div class="contactf-name">
Nama : <br/>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" placeholder="Nama..."/></div>
<div class="contactf-email">
Email: <em>(harap diisi)</em><br/>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" placeholder="Email..."/></div>
  
<div style="clear:both"></div>
<div class="contactf-message">
Pesan: <em>(harap diisi)</em><br/>
<textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="7" style="height: 149px; margin: 0px;" placeholder="Pesan..."></textarea></div>
<br />
    
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<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>
</div>

CATATAN:
1. Pada baris kedua, silahkan anda ganti 'Nomor-ID-blog' dengan nomor ID blogspot anda, cara melihat ID blogspot, anda tinggal lihat pada URL blogspot yang anda miliki. Setelah kata blogID terdapat nomor ID blogspot anda, copy dan paste kan kode tersebut

2. Sedangkan pada baris ke empat sampai bari ke 8, ada pesan yang akan muncul pada kotak form "contact us" yang akan anda buat. Silahkan anda ganti kata-kata tersebut sesuai dengan keinginan atau anda biarkan saja

cara membuat contact us

cara membuat contact us

Tampilan halaman kontak di blogspot yang sudah selesai dibuat

Baca juga: Cara dapatkan uang dari blog

B. Cara membuat contact us di Wordpress

Selain pemilik Blogger, anda yang memiliki blog dengan platform Wordpress juga bisa membuat contact us dengan sangat mudah sekali. Anda bisa menggunakan berbagai jenis plug in yang tersedia secara berbayar ataupun gratis.

Nah kali ini tim carapedi akan membantu anda untuk membuat contact us Wordpress dengan menggunakan contact form 7. Silahkan simak uraian selengkapnya berikut ini.

1. Install contact form 7

cara membuat contact us

Menginstall plugin contact form 7 untuk membuat halaman contact us di Wordpress

2. Cara membuat kotak saran di Wordpress (contact us)

Jika plugins contact form 7 sudah terinstall di blog atau website anda, selanjutnya tinggal mulai buat kotak saran atau contact us nya.

cara membuat contact us

Formulir contact form 7 untuk contact us

3. Mengatur format email

Pada dasarnya saat pengunjung mengirimkan pesan kepada anda maka anda akan menerima informasi berupa nama, email, kontak dan isi pesan mereka.

Nah format email ini bisa anda rubah di menu "mail" dengan mengubahnya sesuai dengan keinginan anda.

cara membuat contact us

4. Mengatur pesan

Di contact form 7 anda juga bisa mengatur pesan yang akan anda pasang pada blog anda. Anda bisa mengatur pesan yang akan di terima oleh pengunjung yang mengirim pesan melalui form tersebut sesuai dengan yang anda inginkan.

cara membuat contact us

5 Terbitkan form kontak

Setelah anda selesai membuat form ontact us di contact form 7, selanjutnya tinggal anda terbitkan kontak tersebut. Caranya sangat mudah sekali, berikut cara dan tutorial selengkapnya.

cara membuat contact us

cara membuat contact us

cara membuat contact us

cara membuat contact us

cara membuat contact us

Contoh halaman contact Us yang sudah jadi

Nah itulah beberapa langkah cara membuat contact us di blogger (blogspot) dan di Wordpress. Masih banyak cara lain yang bisa digunakan, namun kedua cara ini adalah yang paling mudah digunakan.