Cara Membuat Form Kontak Blogger Langsung Terkirim ke Email

[Show]

form kontak yang otomatis mengirim ke email pribadi

Ingin pengunjung blog bisa langsung menghubungi kamu tanpa ribet? Berikut panduan cepat membuat form kontak yang otomatis mengirim ke email pribadi menggunakan layanan gratis FormSubmit — tanpa perlu coding backend!

Berikut ini Cara Membuat Form Kontak Blogger Langsung Terkirim ke Email, serta visualisasi layout yang siap kamu salin dan tempel di halaman kontak Blogger:

🔧 Langkah Cepat:

Siapkan alamat email tujuan
Contoh: aladdien77@gmail.com
Buat halaman kontak di Blogger, lalu tempelkan form berikut:

<form action="https://formsubmit.co/emailkamu@email.com" method="POST" class="contact-form">
  <input type="hidden" name="_captcha" value="true">
  <input type="hidden" name="_next" value="https://adinjava.blogspot.com/p/terima-kasih.html">

  <label>Nama</label>
  <input type="text" name="name" placeholder="Nama lengkap..." required>

  <label>Email</label>
  <input type="email" name="email" placeholder="Alamat email aktif..." required>

  <label>Pesan</label>
  <textarea name="message" rows="5" placeholder="Tulis pesan Anda..." required></textarea>

  <button type="submit">Kirim Pesan</button>
</form>

keterangan: ganti email dan link URL warna merah dengan milik sobat

🎨 Tambahkan CSS agar Tampilan Lebih Menarik

Tempelkan kode ini di bagian <style> halaman atau langsung ke dalam widget HTML/Javascript di Blogger:

<style>
.contact-form {
  max-width: 500px;
  margin: 30px auto;
  padding: 25px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  font-family: 'Segoe UI', sans-serif;
}

.contact-form label {
  font-weight: bold;
  display: block;
  margin-top: 15px;
}

.contact-form input, .contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
}

.contact-form button {
  margin-top: 20px;
  padding: 12px 25px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s ease;
}

.contact-form button:hover {
  background: #2980b9;
}
</style>

✅ Bonus Fitur

reCAPTCHA sederhana: Cukup tambahkan <input type="hidden" name="_captcha" value="true">
Redirect setelah sukses kirim: Gunakan _next dengan link halaman /p/terima-kasih.html
Tampilan modern dan responsif: Cocok untuk semua ukuran layar


Form Kontak Blogger dengan FormSubmit dan CSS

📥 Saran Tambahan

Tambahkan Google Maps jika kamu punya toko atau lokasi fisik.
Buat halaman terima-kasih.html yang ramah dan bisa mengarahkan ke artikel unggulanmu.
Pasang tombol WhatsApp atau live chat untuk respon cepat.

🎯 Penutup

Dengan hanya beberapa baris HTML dan CSS, kamu bisa punya form kontak fungsional dan modern di Blogger — tanpa harus mengerti backend atau JavaScript tingkat lanjut.

Jika kamu ingin saya bantu buatkan tampilan yang lebih personal sesuai tema blog kamu, cukup beri tahu warna atau gaya desain yang kamu inginkan. Siap bantu sampai tampil sempurna!