Adanya contact us di halaman blog sangat penting bahkan wajib untuk memudahkan pengunjung terhubung dengan pemilik blog. Oleh sebab itu Anda harus tahu cara membuat contact us di Blogger.
Tujuan contact us bisa untuk:
- Menjalin kerja sama
- Saran dan kritikan
- Pengunjung bertanya
Sederhananya adalah untuk berinteraksi dan melakukan timbal balik antara pengunjung dan pemilik blog. Jadi, bagaimana cara membuat contact us HTML CSS di halaman blog? Simak lebih lanjut.
Mengenal Halaman Contact Us
Contact us merupakan halaman statis pada blog yang berupa nomor telepon, email, akun media sosial, atau berupa form kontak yang otomatis mengirim pesan email. Kontak yang terpasang bisa milik admin atau tim.
Laman Contact Us ini sangat penting bagi situs Anda agar bisa terlibat dengan pengunjung dan pelanggan.
“Contact us adalah alat komunikasi antara pemilik blog dengan pembaca. Ini sebabnya, penting untuk mendesain dan menempatkannya di tempat strategis.”
Ada beberapa penyebutan untuk Contact Us, seperti Contact Form, Contact Me, Contact, atau Hubungi Kami. Namun pada dasarnya hal yang dimaksud sama, yaitu halaman kontak pemilik blog.
Apa saja yang harus ada di dalam form kontak atau halaman hubungi kami?
- Alamat email
- Nomor telepon
- Kontak Admin website
Ini juga termasuk form kontak untuk pengguna, jika Anda menyediakan tempat bagi pengguna untuk menulis tujuan pengguna menghubungi Anda, seperti:
- Kotak email pengguna
- Kotak nama pengguna
- Kotak pesan
Jadi, melalui kotak tersebut, ini akan memudahkan pengguna menyampaikan maksudnya dan Anda juga bisa dengan mudah merespon pesan pengguna sekaligus mengetahui pengguna yang mengirim pesan.
Mengapa Harus Membuat Contact Us di Blog?
Halaman Contact Us adalah salah satu halaman paling berharga di situs web Anda. Dan bagi sebagian besar perusahaan, ini biasanya merupakan salah satu halaman dari situs yang paling banyak dikunjungi.
Ada beberapa alasan sangat penting bagi pemilik blog memiliki halaman khusus untuk contact us. Berikut beberapa alasan Anda harus melakukan cara membuat kontak kami di blogger:
1. Sebagai Alat untuk Berinteraksi dengan Pengunjung
Memiliki Contact Us memudahkan pemilik blog menerima pertanyaan, menjawab, dan merespon permintaan pengunjung. Berinteraksi secara langsung terkait apa yang dibutuhkan pengunjung dan apa yang bisa dilakukan pemilik blog.
2. Terhubung untuk Kerja Sama
Contact Us memungkinkan pemilik blog mendapatkan kesempatan berharga untuk kerja sama atau menjadi rekan bisnis produk dan perusahaan.
Karena tidak sedikit perusahaan yang menawarkan kerja sama untuk content placement atau endorsement dengan penawaran yang sangat menarik.
Seperti membuat ulasan atau menerbitkan artikel yang membahas seputar produk tersebut. Tentu saja ada harga yang bisa Anda dapatkan melalui kerja sama tersebut.
3. Memudahkan Proses Review AdSense
Siapa yang ingin melewatkan kesempatan untuk bisa mendapatkan penghasilan dari blog melalui Google AdSense? Mungkin sekarang tidak, tapi tidak menutup kemungkinan suatu saat Anda tertarik mendaftar Google AdSense.
Karena Anda bisa mendapatkan pemasukan pendapatan dari blog yang Anda buat.
Sementara itu, adanya Contact Us adalah salah satu syarat untuk mendaftar Google AdSense, termasuk halaman About, Disclaimer, Privacy Policy, Term of Service, dan Sitemap.
4. Mudah Menerima Layanan Iklan
Cara mendapatkan penghasilan lainnya dari blog Anda yaitu melalui iklan. Sementara untuk memudahkan Anda mendapatkan penawaran iklan adalah melalui halaman Contact Us yang Anda pasang.
Jadi, perusahaan yang ingin memasang iklan di halaman blog Anda bisa dengan mudah memberitahu Anda melalui contact us.
5. Praktis dan Aman
Fitur widget formulir kontak tergolong lebih praktis dan aman dibandingkan Anda membuat informasi seputar nomor telepon atau alamat email, dan media sosial.
Cara ini juga membuat halaman terlihat lebih rapi dan Anda bisa dengan mudah mengatur tata letak konten yang menarik.
6. Lebih Profesional
Blog Anda akan terlihat lebih profesional ketika dapat menerima dan melakukan timbal balik komunikasi dengan pelanggan melalui email.
Itu mengapa jika Anda ingin membuat blog yang terlihat profesional, sebaiknya buat halaman Contact Us yang langsung mengarah ke email serta nomor telepon atau media sosial Anda.
Dengan demikian maka blog Anda akan terlihat lebih profesional dan tepercaya untuk melakukan kerja sama.
Cara Membuat Halaman Kontak Blogger Sederhana
Setelah mengetahui beberapa keuntungan memiliki contact us, lantas bagaimana cara membuat halaman kontak blogger?
Ikuti beberapa langkah di bawah ini untuk cara membuat contact us HTML:
1. Menambahkan Widget Formulir Kontak
Langkah pertama yaitu memasang widget baru di sidebar Blogger untuk contact form, caranya:
- Masuk ke halaman dashboard blog Anda
- Pergi ke menu Tata Letak
- Klik Tambahkan Gadget di salah satu posisi yang Anda rasa pas untuk menempatkan contact us
- Muncul pop-up dan scroll lalu pilih opsi Contact Form
- Klik Save
Sekarang Anda sudah memiliki tempat untuk menambahkan kontak Anda di blog.
2. Menyembunyikan Widget
Tentu saja widget contact form bisa Anda buat sebagai pintasan untuk ke kontak atau memasangnya di halaman statis. Maka dari itu, Anda harus membuat membuat widget formulir kontak tidak terlihat.
Caranya:
- Buka menu Tema
- Klik tanda panah dan pilih opsi Edit HTML
- Gunakan kombinasi tombol CTRL+F
- Lalu cari kode ]]></b:skin>
- Setelah proses pencarian kode selesai, salin kode ini di atas kode yang Anda temukan.
- Selanjutnya klik Simpan Tema.
3. Menambahkan Halaman Contact Us di Blogger
Cara selanjutnya yaitu pergi ke dashboard blogger dan masuk ke menu Halaman lalu klik Halaman Baru. Sekarang masukkan judul untuk contact us Anda misalnya, Hubungi Kami, contact us, Kontak, dan sebagainya.
- Lalu di bagian Pilihan di sebelah kanan halaman, klik opsi Jangan bolehkan, sembunyikan yang ada.
- Klik tombol Selesai.
- Lalu buat file HTML dengan judul Index.HTML kemudian masukkan kode HTML contact us berikut ini.
<!DOCTYPE html> <!-- Created By CodingLab - www.codinglabweb.com --> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title> Responsive Contact Us Form | CodingLab </title> <link rel="stylesheet" href="style.css"> <!-- Fontawesome CDN Link --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="container"> <div class="content"> <div class="left-side"> <div class="address details"> <i class="fas fa-map-marker-alt"></i> <div class="topic">Address</div> <div class="text-one">Surkhet, NP12</div> <div class="text-two">Birendranagar 06</div> </div> <div class="phone details"> <i class="fas fa-phone-alt"></i> <div class="topic">Phone</div> <div class="text-one">+0098 9893 5647</div> <div class="text-two">+0096 3434 5678</div> </div> <div class="email details"> <i class="fas fa-envelope"></i> <div class="topic">Email</div> <div class="text-one">codinglab@gmail.com</div> <div class="text-two">info.codinglab@gmail.com</div> </div> </div> <div class="right-side"> <div class="topic-text">Send us a message</div> <p>If you have any work from me or any types of quries related to my tutorial, you can send me message from here. It's my pleasure to help you.</p> <form action="#"> <div class="input-box"> <input type="text" placeholder="Enter your name"> </div> <div class="input-box"> <input type="text" placeholder="Enter your email"> </div> <div class="input-box message-box"> </div> <div class="button"> <input type="button" value="Send Now" > </div> </form> </div> </div> </div> </body> </html>
- Selanjutnya buat file CSS dan beri nama Style.CSS
- Lalu ketikkan kode CSS berikut
/* Google Font CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #c8e8e9;
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #3e2093;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #3e2093;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #3e2093;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #5029bc;
}
@media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
@media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}Hasil template contact us HTML kurang lebih akan seperti ini:
4. Contoh Template Contact Form
Beberapa contoh template contact form dengan HTML:
Nah, melalui cara membuat contact us di bBogger, Anda bisa memudahkan pengunjung untuk menghubungi atau sekadar menuliskan pertanyaan, saran, kritikan atau ide konten yang pengunjung inginkan. Selamat mencoba!
