Cara Mudah Membuat Halaman Contact Us Keren di Blog

Halaman Contact Us merupakan halaman yang sangat penting dimiliki sebuah blog atau website. Anda bisa menemukan halaman ini di kebanyakan blog. Namun, Contact Us di setiap blog bisa berbeda-beda dalam penyebutannya. Ada yang menyebutnya Contact, Contact Form, Hubungi Kami, dan sebutan lainnya. Dengan adanya halaman ini, pengunjung dapat dengan mudah menghubungi pemilik blog.

Sebenarnya di setiap postingan blog sudah ada kolom komentar yang bisa digunakan untuk menghubungi pemilik blog. Namun, komentar ini hanya muncul di postingan yang dikomentari saja. Berbeda dengan komentar postingan, pesan lainnya yang dikirim melalui halaman Contact Us biasanya dikirim ke email pemilik blog. Khususnya Contact Us yang dibahas dalam artikel ini.

Selain memudahkan  pengunjung menghubungi pemilik blog, halaman Contact Us juga merupakan sebuah syarat yang harus ada di sebuah blog selain halaman Privacy Policy dan Disclaimer agar blog tersebut bisa diterima oleh Google Adsense. Entah informasi ini benar atau tidak, tapi sangat disarankan ada halaman ini di blog Anda.

Ada dua cara yang bisa Anda terapkan untuk membuat Contact Us di dalam blog Anda, khususnya bagi pengguna blogger, yaitu cara membuat Contact Us berupa halaman seperti halaman Privacy Policy dan cara membuat Contact Us yang berupa widget seperti widget postingan terbaru. 

Cara Membuat Halaman Contact Us Keren di Blogger

Halaman Contact Us adalah sebuah halaman yang bisa digunakan oleh pengunjung untuk menghubungi pemilik blog. Tampilan halaman ini bisa berbeda-beda tergantung bagaimana pemilik blog mendesainnya. Mulai dari yang sederhana, hingga yang tampak keren.

Nah, halaman Contact Us yang akan dijelaskan cara pembuatannya disini adalah halaman yang berupa Formulir Kontak. Contact Us jenis ini banyak diterapkan oleh pemilik blog. Selain penggunaanya yang sangat praktis, tampilan Formulir Kontak ini cukup simpel. Anda bisa melihatnya pada halaman Contact di blog ini.

Gimana? Apakah Anda tertarik untuk membuatnya? Berikut ini cara membuat halaman Contact Us berupa Formulir Kontak di blogger.

1. Buka ke dashboard blogger.

2. Masuk ke menu Halaman.

3. Buat halaman baru. Caranya seperti Anda membuat postingan baru.

4. Masukkan judul sesuai yang Anda inginkan, seperti yang telah dijelaskan di atas.

5. Ubah tampilannya menjadi Tampilan HTML.

6. Salin dan tempelkan semua kode berikut ke dalam halaman tadi.

<div class="contact-form-widget"> <form name="contact-form"> <span class="ctitles">Nama :</span> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" type="text" value="" /> <span class="ctitles">Alamat Email <span class="swajib">*</span> :</span> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" type="text" value="" /> <span class="ctitles">Isi Pesan <span class="swajib">*</span> :</span> <textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" rows="10"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> <br /> <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> </form> </div> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> 

7. Ubah kembali tampilannya menjadi Tampilan Menulis (compose) untuk mengecek hasilnya.

8. Jika sudah, jangan lupa posting halaman tersebut.

Kode Formulir Kontak ini cocok dan responsif digunakan apabila Anda menggunakan tema blogger VioMagz. Namun, belum tentu cocok digunakan di semua template atau tema Blogger. Tapi tidak salahnya Anda mencoba memasang kode ini apabila Anda menggunakan tema blogger selain VioMagz. Barangkali cocok.

Untuk warna background dan teks pada tombol Kirim di Formulir Kontak ini menyesuaikan settingan warna di header tema blog Anda. Warna background tombol Kirim sesuai warna Background Header Blog. Sedangkan warna teks di tombol Kirim sesuai warna Menu Navigasi Blog.

Cara Memasang Widget Halaman Contact Us di Blogger

Setelah halaman Contact Us dibuat, Anda harus memasang widget halaman tersebut ke dalam blog Anda. Caranya sama dengan ketika Anda memasang halaman Privacy Policy di blog Anda. Jika Anda menggunakan template blogger VioMag, begini caranya memasangnya.

1. Buka dashboard blogger.
2. Masuk ke menu Tata Letak.
3. Edit widget Menu Halaman Statis.
4. Pastikan tampilan widget sudah diaktifkan dengan memastikan tombol aktif (berwarna hijau) pada bagian Tampilkan widget ini.
5. Kemudian tekan tombol TAMBAHKAN ITEM BARU atau edit halaman jika sudah ada untuk menambahkan atau mengeditnya.
6. Selanjutnya masukkan nama halaman dan URL halaman sesuai dengan halaman yang sudah dibuat tadi, kemudian tekan Simpan.
7. Selamat! Widget halaman Contact Us sudah selesai dipasang.

Cara Menambahkan Widget Formulir Kontak di Blogger

Berbeda dengan Contact Us yang berupa halaman khusus, Contact Us kali ini berupa widget yang akan muncul di blog Anda. Widget ini akan selalu tampil, baik itu di halaman utama blog maupun di dalam postingan blog seperti halnya widget widget lain.

Widget Contact Us ini tampilan berupa Formulir Kontak (sama dengan yang ada di halaman Contact blog ini). Widget ini bisa menjadi alternatif bagi Anda yang ingin menonaktifkan fitur komentar di setiap postingan blog. Tapi tidak mengapa apabila Anda mengaktifkan keduanya. Namun, hal itu justru akan memberatkan kinerja blog Anda.

Jika Anda tertarik untuk membuat Widget Formulir Kontak di blog Anda, Anda bisa menerapkan cara berikut ini.

1. Buka dashboard blogger.
2. Masuk ke menu Tata Letak.
3. Klik Tambahkan Gadget di posisi yang Anda inginkan.
4. Kemudian pilih Formulir Kontak.
5. Pastikan widget ini sudah Anda aktifkan dengan memastikan tombol aktif (berwarna hijau) pada Tampilan widget ini.
6. Masukkan judul widget sesuai yang Anda inginkan lalu Simpan.
7. Selamat! Widget Formulir Kontak selesai dibuat.

Tidak jauh berbeda dengan yang ada di halaman Contact Us, warna background dan teks pada tombol Kirim di Formulir Kontak ini juga menyesuaikan settingan warna pada header di blog Anda. Warna background tombol Kirim sesuai warna Background Header Blog dan warna teks di tombol Kirim sesuai warna Menu Navigasi Blog. 

Penutup

Itulah tutorial terkait cara membuat halaman Contact Us yang keren di blogger dan cara memasang widget Formulir Kontak di blogger. Anda bisa menerapkan salah satu caranya saja atau kedua-duanya sekaligus, sesuai yang Anda inginkan. Semoga bermanfaat!!!

Sumber kode: Sugeng.id

Ditulis oleh: Syahrul Hanafi

Berbagi :