Cara Membuat Contact Us Keren di Blogger dan WordPress

Diposting pada

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:

  • Silahkan login ke blogger.com
  • Masukkan alamat email dan password blog anda
  • Kemudian klik pada menu “halaman”
  • Klik pada menu “halaman baru”
cara membuat contact us
Membuat halaman contact us di blogger
  • Setelah itu anda beri judul halaman “contact us”
  • Ganti mode penulisan “compose” menjadi “HTML” karena kita akan membuat contact us dengan memasukkan kode html
  • Klik pada menu setelah halaman di samping kanan
  • Silahkan setting “non aktifkan komentar”
  • Klik selesai
cara membuat contact us
Mengatur halaman kontak blogspot
  • Selanjutnya silahkan anda copy kode html berikut dan paste kan pada halaman contact us yang akan anda buat
<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

  • Jika semua sudah selesai, silahkan anda kembalikan mode penulisan dari html ke mode compose
  • Kemudian klik publikasikan
cara membuat contact us
  • Setelah anda klik publikasikan maka tampilan kotak pesan tersebut akan jadi seperti ini:
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

  • Silahkan login ke wp admin situs anda
  • Kemudian klik pada menu plugins, lalu klik tambah baru
  • Cari plugins contact form 7
  • Klik pasang sekarang
  • Jika plugins sudah terpasang silahkan anda klik aktifkan
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.

  • Silahkan anda klik pada menu contact yang ada di menu dashboard blog anda di bagian kiri
  • Lalu pilih dan klik add new
  • Anda akan di bawa ke halaman formulir pembuatan contact us
  • Silahkan masukkan judul pada kolom judul (enter title here…)
  • Pada kolom input, secara otomatis plugins ini sudah membuatkan nya untuk anda
  • Jika anda ingin membuat atau menambahkan label lainnya anda bisa menambahkan dengan memanfaatkan fitur text
  • Pada kolom tersebut anda akan menemukan kolom bertanda bintang (*)
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.

  • Anda klik pada menu mail
  • Silahkan rubah format pesan yang anda inginkan
  • Jika semua sudah selesai klik pada menu save
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.

  • Klik pada menu message
  • Silakan anda rubah pesannya sesuai dengan yang di inginkan
  • Jika sudah selesai klik save
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.

  • Silahkan anda klik pada menu save di samping kanan
  • Setelah itu akan muncul shortcode denga highlight warna biru
  • Silahkan anda copy kode tersebut
cara membuat contact us
  • Selanjutnya anda buat halaman baru, klik pada menu “halaman”
  • Klik tambah baru
  • Buat judul halaman contact Us
  • Klik pada menu plus (+)
cara membuat contact us
  • Pilih post mode shortcode
cara membuat contact us
  • Paste kan kode tadi yang sudah anda copy tadi
cara membuat contact us
  • Jika semua sudah selesai, silahkan anda publikasikan
  • Jika sudah di publish maka hasilnya akan jadi seperti ini:
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.

Gambar Gravatar
Penulis, Blogger dan penikmat film action