Cara Membuat Form Kontak untuk Blogger

Table of contents

[Show]

Berikut adalah panduan langkah demi langkah untuk membuat formulir kontak (Contact Form) di Blogger menggunakan fitur bawaan Blogger, tanpa memerlukan layanan pihak ketiga:

---

🛠️ Langkah 1: Tambahkan Widget Formulir Kontak

1. Masuk ke dasbor Blogger Anda.

2. Pilih menu Tata Letak.

3. Klik Tambahkan Gadget pada area sidebar atau area lain yang tersedia.

4. Dalam jendela pop-up, pilih Formulir Kontak.

5. Klik Simpan untuk menambahkan widget ke tata letak blog Anda.

Langkah ini diperlukan untuk mengaktifkan fitur formulir kontak di Blogger. Meskipun widget ini akan disembunyikan nanti, kehadirannya diperlukan agar formulir kontak dapat berfungsi dengan baik. 

---

🎨 Langkah 2: Sembunyikan Widget dari Tampilan

Untuk menampilkan formulir kontak hanya di halaman tertentu dan tidak di sidebar, Anda perlu menyembunyikan widget tersebut:

1. Masuk ke menu Tema.

2. Klik ikon panah di tombol Sesuaikan, lalu pilih Edit HTML.

3. Gunakan kombinasi tombol Ctrl + F untuk mencari kode ]]></b:skin>.

4. Tepat di atas kode tersebut, tambahkan kode CSS berikut:

   .widget.ContactForm, .widget #ContactForm1 {
       display: none !important;
   }
   

5. Klik Simpan Tema untuk menyimpan perubahan.

Kode ini akan menyembunyikan widget formulir kontak dari tampilan sidebar atau area lain di blog Anda.

---

📄 Langkah 3: Buat Halaman "Hubungi Kami"

1. Kembali ke dasbor Blogger, pilih menu Halaman.

2. Klik Halaman Baru untuk membuat halaman statis baru.

3. Beri judul halaman, misalnya "Hubungi Kami" atau "Contact Us".

4. Alihkan editor ke mode HTML (bukan mode Compose).

5. Tempelkan kode HTML berikut ke dalam editor:

   <div class="contact-form-widget">
     <form name="contact-form">
       <p>
         <label>Nama</label><br/>
         <input type="text" name="name" id="ContactForm1_contact-form-name" />
       </p>
       <p>
         <label>Email</label><br/>
         <input type="email" name="email" id="ContactForm1_contact-form-email" />
       </p>
       <p>
         <label>Pesan</label><br/>
         <textarea name="email-message" id="ContactForm1_contact-form-email-message"></textarea>
       </p>
       <p>
         <input type="submit" value="Kirim" id="ContactForm1_contact-form-submit" />
       </p>
       <div id="ContactForm1_contact-form-error-message"></div>
       <div id="ContactForm1_contact-form-success-message"></div>
     </form>
   </div>
   

6. Klik Publikasikan untuk menyimpan dan menerbitkan halaman.

Dengan langkah ini, Anda telah membuat halaman khusus yang menampilkan formulir kontak yang dapat diakses oleh pengunjung blog Anda.

---

✅ Tips Tambahan

• Uji Formulir: Setelah menerbitkan halaman, buka halaman tersebut dan coba kirim pesan melalui formulir untuk memastikan semuanya berfungsi dengan baik.

• Periksa Email: Pastikan Anda memeriksa email yang terhubung dengan akun Blogger Anda untuk menerima pesan yang dikirim melalui formulir.

• Tambahkan ke Menu Navigasi: Untuk memudahkan pengunjung menemukan halaman kontak, tambahkan tautan ke halaman "Hubungi Kami" di menu navigasi blog Anda.

---

Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah menambahkan formulir kontak ke blog Blogger Anda, memungkinkan pengunjung untuk menghubungi Anda secara langsung melalui email.

Berbagi :