Cara Tambah Kontak Form (Hubungi Kami Page) di Blogger?

Artikel ini menunjukkan bagaimana untuk menambahkan formulir kontak gadget di Blogger dan menambahkan kode untuk halaman menghubungi kami terpisah dengan tampilan profesional.

A+ A-

Menambahkan kontak kami bentuk di Blogger adalah tugas yang membosankan karena tidak mendukung plugin seperti WordPress.

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

Blogger Kontak Form Page

Tapi hari ini, Anda akan belajar bagaimana menambahkan halaman menghubungi kami resmi di Blogger.

  • Cara Membuat Kebijakan Privasi Halaman untuk Blogger?

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

Manfaat Resmi Blogger Form

  1. Anda akan mendapatkan pesan segera sebagai salah satu mengirimkannya. Dan, deliverability adalah 100% juga.
  2. Antarmuka yang sederhana membuatnya mudah bagi pengunjung untuk menghubungi Anda.
  3. Jika Anda tahu (CSS) bahasa Cascade Style Sheet, maka akan mudah bagi Anda untuk menyesuaikan bentuk 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 berikut untuk menambahkan kontak kami gadget di blog Anda.

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

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

pilihan tata letak blogger

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

blogger menambahkan gadget

Langkah 4: Kemudian, pilih gadget Lebih dari sisi kiri. Sekarang, Anda akan melihat Formulir Kontak. Cukup tambahkan sama.

Hubungi Form Gadget Blogger

Bagian - 2: Menyembunyikan Gadget

Sekarang, Anda akan belajar bagaimana untuk menyembunyikan gadget kontak.

Langkah 1: Kami perlu bermain dengan bagian kerangka di sini. Jadi, klik pada Template dari menu kiri.

Blogger Template Pengaturan

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

Blogger Template Edit HTML

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

div # ContactForm1 {
! display: none penting;
}

Hubungi Form Kode Blogger

Kemudian, klik Simpan untuk mempertahankan perubahan.

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

Bagian - 3: Menambahkan Formulir Kontak untuk Halaman

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

Langkah 1: Buka Pages dan klik pada halaman baru.

Halaman baru di Blogger

Langkah 2: Paste kode berikut ke dalam posting HTML Editor setelah menghapus segala sesuatu di dalamnya.

Blogger Hubungi Kami Kode Halaman

<Div id = "custom_ContactForm1" class = "widget ContactForm">
<Div class = "kontak-bentuk-widget">
<P> Dapatkan berhubungan dengan kami dengan mengisi formulir di bawah ini. </ P>
<Div class = "bentuk">
<Form name = "kontak-bentuk">
<P> </ p>
Nama
Situs
<Input type = "text" value = "" size = "30" name = "nama" id = "ContactForm1_contact-bentuk-nama" class = "kontak-bentuk-nama">
<P> </ p>
E-mail
<Span style = "font-weight: bolder;"> * </ span>
Situs
<Input type = "text" value = "" size = "30" name = "email" id = "ContactForm1_contact-form-email" class = "kontak-bentuk-email">
<P> </ p>
Pesan
<Span style = "font-weight: bolder;"> * </ span>
Situs
<Textarea rows = "5" name = "email-pesan" id = "ContactForm1_contact-form-email-pesan" cols = "25" class = "kontak-bentuk-email-pesan"> </ textarea>
<P> </ p>
<Input type = "button" value = "Kirim" id = "ContactForm1_contact-form-submit" class = "kontak-bentuk-tombol kontak-bentuk-tombol-submit">
<P> </ p>
<Div style = "text-align: center; max-width: 222px; width: 100%">
<P id = "ContactForm1_contact-bentuk-kesalahan-pesan" class = "kontak-bentuk-kesalahan-pesan"> </ p>
<P id = "ContactForm1_contact-bentuk-keberhasilan-pesan" class = "kontak-bentuk-keberhasilan-pesan"> </ p>
</ Div>
</ Form>
</ Div>
</ Div>
<Div class = "jelas"> </ div>
<Span class = "widget-item-control">
<Span class = "item-control blog-admin">
<A title = "Edit" target = "configContactForm1" onclick = "kembali _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 = "jelas"> </ div>
</ Div>

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

Hubungi Kami Halaman Blogger

Langkah 4: Akhirnya, klik tombol Publish. Itu saja.

Pesan kirim dari formulir kontak ini akan dikirimkan ke email admin. Jika blog memiliki lebih dari satu admin, semua dari mereka akan mendapatkannya.

Baca Juga:

  • Luar biasa Blogging Tips - Ambil Blog Anda dari Zero to Hero
  • Tips Gambar Optimasi Ultimate Untuk SEO

Membungkus

Saya harap Anda sekarang tahu cara menambahkan menghubungi kami halaman di blogger. Jika Anda menemukan kesulitan seperti nol deliverability bahkan setelah pesan sukses, saya sarankan menginstal ulang Hubungi widget.

Dan ya, jika Anda memiliki pengetahuan yang cukup dalam berurusan dengan CSS dan javascript potongan, Anda bisa terus menyesuaikan halaman untuk daya tarik visual yang lebih baik.

Jangan lupa untuk berbagi posting ini dengan teman-teman blogger Anda.