 |
| Cara mudah membuat widget Contact Form di halaman Statistik blogger. |
Cara Mudah Membuat Widget Contact Form di Halaman Statistik Blogger
Widget Contact Form adalah salah satu elemen penting yang saya rasa sangat krusial untuk dimiliki di blog. Jika kamu adalah seorang blogger, pasti tahu betapa pentingnya bagi pengunjung untuk dapat menghubungi kita, entah untuk keperluan kolaborasi, pertanyaan, atau bahkan kritik dan saran. Nah, di artikel kali ini saya akan berbagi cara mudah membuat widget Contact Form di halaman statistik Blogger, khususnya untuk halaman Contact Us.
Saya pribadi merasa tidak nyaman jika blog saya tidak memiliki halaman Contact Us. Oleh karena itu, saya menulis artikel ini sebagai catatan pribadi, agar ketika saya membuat blog baru di Blogger dan lupa cara membuat formulir tersebut, saya bisa merujuk ke sini. Selain itu, dengan adanya halaman kontak di blog saya, tentunya pengunjung akan merasa lebih mudah untuk menghubungi saya.
Dengan adanya halaman Contact Us di blog saya, ini juga mempermudah peluang kerja sama atau komunikasi dengan pengunjung yang memiliki minat serupa atau bahkan ingin bekerja sama dengan saya. Mungkin di masa depan ada banyak peluang yang bisa kita eksplorasi bersama, apalagi jika visi dan misi kita sejalan dengan blog saya, blogcepot.com.
Cara Pasang Contact Form di Statistik Halaman Blogspot Saya
Jika kamu juga ingin memiliki halaman Contact Us seperti yang saya buat, ikuti langkah-langkah mudah berikut:
1. Buat Halaman Baru di Blogspot
Masuk ke halaman Blogspot kamu, kemudian buat postingan halaman baru. Setelah itu, ubah ke tampilan HTML untuk mempermudah kamu dalam menambahkan kode. Berikut ini adalah kode HTML yang perlu kamu pasang di halaman tersebut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form WhatsApp</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whatsapp-form">
<h2>Hubungi Kami via WhatsApp</h2>
<form id="formWA">
<input type="text" id="nama" placeholder="Nama Kamu" required>
<input type="email" id="email" placeholder="Email Kamu" required>
<textarea id="pesan" rows="5" placeholder="Tulis pesan kamu..." required></textarea>
<button type="submit">Kirim ke WhatsApp</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
Setelah kamu simpan, lanjutkan ke langkah berikutnya.
2. Pasang Kode CSS di Template Blogger
Masuk ke bagian Template dan buka Edit HTML. Setelah itu, cari tag <head> dan pasang kode CSS berikut ini setelah tag <head>:
.whatsapp-form {
max-width: 500px;
margin: 30px auto;
padding: 20px;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 15px rgba(0,0,0,0.1);
font-family: sans-serif;
}
.whatsapp-form input,
.whatsapp-form textarea {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
}
.whatsapp-form button {
width: 100%;
padding: 12px;
background: #25D366;
color: white;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
}
Simpan perubahan ini di template kamu.
3. Pasang Kode JavaScript
Langkah terakhir, kamu perlu memasang kode JavaScript yang akan menghubungkan formulir yang kamu buat dengan WhatsApp. Pasang kode berikut ini di atas tag </body>:
document.getElementById("formWA").addEventListener("submit", function(e) {
e.preventDefault();
var nama = document.getElementById("nama").value;
var email = document.getElementById("email").value;
var pesan = document.getElementById("pesan").value;
var nomorWA = "6285176719312"; // Ganti dengan nomor kamu
var teks = "Halo, saya *" + nama + "*%0AEmail: " + email + "%0APesan: " + pesan;
var urlWA = "https://wa.me/" + nomorWA + "?text=" + teks;
window.open(urlWA, "_blank");
});
Pastikan untuk mengganti nomor WhatsApp dengan nomor milik kamu. Kode ini akan memungkinkan pengunjung mengirim pesan langsung ke WhatsApp kamu dari halaman contact form yang sudah kamu buat.
4. Selesai!
Sekarang, kamu sudah berhasil membuat halaman Contact Us yang bisa diakses oleh pengunjung blog kamu. Setiap kali ada pengunjung yang mengisi form dan mengirim pesan, kamu akan menerima pesan tersebut langsung ke WhatsApp.
Mengapa Halaman Contact Us Itu Penting?
Menambahkan halaman Contact Us di blog tidak hanya membuat blog kamu terlihat lebih profesional, tetapi juga membuka peluang bagi pengunjung untuk berinteraksi denganmu. Mereka bisa mengirimkan pesan mengenai berbagai hal, mulai dari pertanyaan, saran, hingga kemungkinan kerja sama.
Di samping itu, bagi blogger yang ingin membangun hubungan dengan pengunjung atau calon klien, memiliki kontak yang mudah diakses adalah langkah yang sangat penting. Kamu bisa menggunakan halaman Contact Us ini sebagai jembatan untuk memperkenalkan diri lebih dekat kepada audiensmu.
Demo Kode Formulir WhatsApp Contact Blogger
Untuk melihat seperti apa tampilan dari formulir Contact Us yang sudah kamu buat, berikut adalah demo:
Hubungi Kami via WhatsApp
Hubungi Kami via WhatsApp
Jika kamu mengikuti semua langkah-langkah di atas, seharusnya kamu sudah bisa memasang Contact Form dengan baik di halaman Contact Us Blogger kamu. Jangan lupa untuk mengganti nomor WhatsApp dengan milikmu sendiri agar pesan bisa langsung masuk ke akun WhatsApp kamu.
Sekian artikel tentang Cara Membuat Widget Contact Form di Halaman Statistik Blogger. Semoga bermanfaat dan membantu kamu dalam membangun blog yang lebih profesional. Jika ada pertanyaan, jangan ragu untuk menghubungi saya. Selamat mencoba dan semoga sukses!
