Bagaimana Cara Menambahkan Formulir Kontak (Halaman Hubungi Kami) di Blogger?

Diterbitkan: 2020-11-10

Menambahkan formulir hubungi kami di Blogger adalah tugas yang membosankan karena tidak mendukung plugin seperti WordPress.

Apa yang dilakukan sebagian besar blogger Blogspot adalah mencari bantuan dari situs pihak ketiga (foxyform, jotform, 123contactform, dll.).

Halaman Formulir Kontak Blogger Tetapi hari ini, Anda akan belajar bagaimana menambahkan halaman kontak resmi kami di Blogger.

Seperti yang saya katakan sebelumnya, adalah mungkin untuk mendapatkan kode pihak ketiga untuk dimasukkan ke halaman baru seperti berjalan-jalan di taman. Namun, formulir kontak resmi jauh lebih baik daripada itu.

Manfaat Formulir Blogger Resmi

  1. Anda akan mendapatkan pesan tersebut segera setelah seseorang mengirimkannya. Dan, pengirimannya juga 100%.
  2. Antarmuka yang sederhana memudahkan pengunjung untuk menghubungi Anda.
  3. Jika Anda tahu bahasa Cascade Style Sheet (CSS), maka akan mudah bagi Anda untuk menyesuaikan formulir sesuai keinginan Anda.
  4. Seluruh halaman tidak akan dimuat ulang untuk mengirim pesan.

Saya telah membagi tutorial ini menjadi tiga bagian, menambahkan gadget kontak, menyembunyikannya, dan menerapkan kode resmi di halaman baru.

Bagian 1: Menambahkan Gadget Kontak

Ikuti langkah-langkah yang diberikan di bawah ini untuk menambahkan gadget hubungi kami di blog Anda.

Langkah 1 : Kunjungi blogger.com dan masuk ke akun Anda. Jika Anda menjalankan banyak blog, Anda harus memilih blog yang diinginkan dari daftar.

Langkah 2 : Klik Layout dari sidebar kiri untuk mendapatkan opsi untuk menambahkan gadget.

blogger-layout-option
  • Menyimpan

Langkah 3 : Anda dapat melihat tautan Tambahkan Gadget di panel utama di sisi kanan. Mengkliknya akan membawa Anda ke daftar gadget.

blogger-tambahkan-gadget
  • Menyimpan

Langkah 4 : Kemudian, pilih Lebih banyak gadget dari sisi kiri. Sekarang, Anda akan melihat Formulir Kontak . Tambahkan saja yang sama.

Formulir-Kontak-Gadget-Blogger
  • Menyimpan

Bagian 2: Menyembunyikan Gadget

Sekarang, Anda akan mempelajari cara menyembunyikan gadget kontak.

Langkah 1 : Kita perlu bermain-main dengan bagian template di sini. Jadi, klik Template dari menu kiri.

Blogger-Template-Pengaturan
  • Menyimpan

Langkah 2 : Kemudian, klik Edit HTML dan Anda akan diberikan seluruh kode blog Anda di bidang yang besar.

Blogger-Template-Edit-HTML
  • Menyimpan

Langkah 3 : Cari ]]> </ b: skin> dan letakkan kode berikut tepat sebelum itu.

div # ContactForm1 {
display: none! important;
}

Kontak-Formulir-Kode-Blogger
  • Menyimpan

Kemudian, klik Simpan untuk menyimpan perubahan.

Setelah langkah ketiga, Anda tidak akan melihat widget Kontak di blog Anda.

Bagian - 3: Menambahkan Formulir Kontak ke Halaman

Anda akan mendapatkan kode formulir kontak blogger resmi yang disesuaikan di sini untuk ditambahkan untuk ditampilkan di halaman terpisah.

Langkah 1 : Buka Halaman dan klik Halaman baru.

Halaman-Baru-di-Blogger
  • Menyimpan

Langkah 2 : Tempel kode berikut ke editor posting HTML setelah menghapus semua yang ada di dalamnya.

Blogger-Hubungi-Kami-Halaman-Kode
  • Menyimpan

<div id = ”custom_ContactForm1 ″ class =” widget ContactForm ”>
<div class = ”contact-form-widget”>
<p> Hubungi kami dengan mengisi formulir di bawah ini. </p>
<div class = ”form”>
<form name = "contact-form">
<p> </p>
Nama
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” name ”id =” ContactForm1_contact-form-name ”class =” contact-form-name ”>
<p> </p>
Surel
<span style = ”font-weight: bolder;”> * </span>
<br>
<input type = ”text” value = ”” size = ”30 ″ name =” email ”id =” ContactForm1_contact-form-email ”class =” contact-form-email ”>
<p> </p>
Pesan
<span style = ”font-weight: bolder;”> * </span>
<br>
<textarea row = ”5 ″ name =” email-message ”id =” ContactForm1_contact-form-email-message ”cols =” 25 ″ class = ”contact-form-email-message”> </textarei>
<p> </p>
<input type = ”button” value = ”Send” id = ”ContactForm1_contact-form-submit” class = ”contact-form-button contact-form-button-submit”>
<p> </p>
<div style = ”text-align: center; lebar maksimal: 222 piksel; lebar: 100% ”>
<p id = ”ContactForm1_contact-form-error-message” class = ”contact-form-error-message”> </p>
<p id = ”ContactForm1_contact-form-success-message” class = ”contact-form-success-message”> </p>
</div>
</form>
</div>
</div>
<div class = ”clear”> </div>
<span class = ”widget-item-control”>
<span class = ”item-control blog-admin”>
<a title = ”Edit” target = ”configContactForm1 ″ onclick =” return _WidgetManager._PopupConfig (document.getElementById (“ContactForm1 ″));” href = ”// www.blogger.com/rearrange?blogID=8799058979810298021&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1 ″ class =” quickedit ”>
<img width = ”18 ″ height =” 18 ″ src = ”// img1.blogblog.com/img/icon18_wrench_allbkg.png” alt = ””>
</a>
</span>
</span>
<div class = ”clear”> </div>
</div>

Langkah 3: Tambahkan judul (seperti Hubungi Kami) dan kemudian ubah pengaturan yang diberikan tepat seperti yang diberikan di bawah ini.

Hubungi-Kami-Halaman-Blogger
  • Menyimpan

Langkah 4: Terakhir, klik tombol Publikasikan. Itu saja.

Pesan yang dikirim dari formulir kontak ini akan dikirim ke email admin. Jika blog memiliki lebih dari satu admin, semuanya akan mendapatkannya.

➜ Tutorial Blogspot Berguna Lainnya:

  • Bagaimana Cara Menambahkan File Robots.txt Kustom di Blogger?
  • Bagaimana Cara Mengirim Peta Situs Blogger Ke Google Search Console?

Membungkus

Saya harap Anda sekarang tahu cara menambahkan halaman hubungi kami di blogger. Jika Anda menemukan kesulitan seperti pengiriman nol bahkan setelah pesan sukses, saya sarankan untuk menginstal ulang widget Kontak.

Dan ya, jika Anda memiliki banyak pengetahuan dalam menangani cuplikan CSS dan javascript, Anda dapat terus menyesuaikan halaman untuk daya tarik visual yang lebih baik.

Jangan lupa untuk membagikan postingan ini kepada teman-teman blogger Anda.