5 Widget Formulir Kontak Blogger Kustom Terbaik - Funkysst.com

Wednesday, January 24, 2018

5 Widget Formulir Kontak Blogger Kustom Terbaik

Avertisement
Avertisement
Di masa lalu, menambahkan formulir kontak kustom untuk Blogger cukup proses yang kompleks, dan banyak blogger terpaksa menggunakan situs web pihak ketiga. Namun, bahkan setelah Blogger meluncurkan sendiri formulir kontak gadget , itu masih dianggap sebagai sangat tidak memadai. Hal ini karena gadget resmi hanya akan diimplementasikan pada footer sidebar. Kebanyakan blogger lebih suka memiliki formulir kontak blogger terpisah ditempatkan pada halaman sendiri untuk membuat blog mereka muncul diatur dengan baik dan lebih profesional juga.

Memiliki baik meletakkan-out formulir kontak Blogger sangat penting. Ini adalah alat yang pengunjung, perusahaan, dan merek dapat digunakan untuk menghubungi Anda dan itu hanya fitur harus dimiliki untuk setiap blogger. Jika Anda tidak nyaman dengan berbagi alamat email utama Anda langsung di blog Anda, maka kebiasaan Blogger formulir kontak menawarkan cara yang efektif di mana orang dapat dengan mudah mencapai Anda.
5 Terbaik Kustom Blogger Kontak Form Widget

Mengapa Anda harus menggunakan Blogger Kontak Form?

Jika Anda masih terjebak pada penyedia pihak ketiga, Anda pasti harus mempertimbangkan untuk beralih ke bentuk kontak khusus resmi untuk Blogger karena memiliki berbagai manfaat yang unik, seperti:
  • Pesan dikirim segera - Sebagai administrator blog, Anda akan menerima pesan langsung klik pengunjung kirim.
  • Reliable - Ini adalah bentuk resmi yang dikembangkan oleh Blogger, yang membuat cara yang lebih dapat dipercaya dan diandalkan untuk memulai kontak dibandingkan dengan menggunakan layanan pihak ketiga.
  • Pertanyaan - Bentuk kontak menawarkan platform bagi pengunjung Anda untuk mengajukan pertanyaan spesifik yang mereka mungkin memiliki mengenai blog yang Anda tulis atau bisnis Anda secara umum. Hal ini dapat menjadi cara yang sangat baik menangkap lead dan bahkan menyebabkan konversi jika Anda menjual produk atau jasa tertentu.
  • Feedback - Pengunjung dapat dengan mudah berkomentar di blog Anda dengan meninggalkan umpan balik melalui formulir kontak Anda. Umpan balik ini dapat membantu Anda menentukan pos yang harus dilakukan selanjutnya atau apa daerah ke alamat yang didasarkan pada komentar pengunjung.
  • Informasi atau permintaan layanan - Bagi mereka yang menggunakan blog sebagai cara pemasaran suatu produk atau jasa, klien potensial dapat menggunakan formulir kontak kustom untuk Blogger untuk menjangkau dan meminta informasi tambahan.

Bagaimana Tambahkan Blogger Kontak Form Gadget

Sebelum menambahkan kustom Blogger formulir kontak ke halaman statis, kita perlu menambahkan formulir kontak standar di sidebar blog untuk membuatnya fungsional:

1. Masuk ke dashboard Blogger Anda dan pergi ke "Layout"> klik pada "Tambah gadget" link di wilayah elemen halaman.

2. Pilih "Lebih Gadget" di bawah tab "Dasar-dasar" dan klik tombol "+" untuk menambahkan Formulir Kontak Gadget.

formulir kontak blogger

Menyembunyikan Blogger Contact Form dari Sidebar

Setelah formulir kontak telah ditambahkan, langkah berikutnya adalah untuk menyembunyikannya sehingga akan muncul hanya di halaman statis.

1. Pergi ke "Template" dan tekan tombol "Edit HTML". Setelah kode editor terbuka, klik mana saja di dalam kode area dan tekan tombol CTRL + F (atau Command + F untuk mac) untuk membuka kotak pencarian.

2. Ketik atau tempel tag berikut di dalam kotak pencarian dan tekan Enter untuk menemukannya:
]]> </ B: skin>
3. Tepat di atas]]> </ b: skin> tag, menambahkan kode CSS ini:
# ContactForm1 {display: none! Important;}
4. Klik "Simpan template" tombol di sisi kiri atas dan melihat blog Anda. Formulir kontak widget harus pergi.

Menambahkan Kustom Blogger Contact Form di Halaman Statis

Akhirnya, sekarang kita memungkinkan fungsionalitas dari formulir kontak, mari kita tambahkan bentuk kontak khusus di blog Blogger kami ...

1. Pergi ke "Pages" dan klik tombol "halaman baru". Jika Anda sudah memiliki Contact halaman kami, cukup klik link "Edit" di bawah judul halaman.

2. Setelah Page editor akan terbuka, mengisi judul halaman dengan Hubungi / Contact Us atau gelar apapun yang ingin Anda tampilkan. Hal ini direkomendasikan melakukan hal ini sebelum sesuatu untuk membuat permalink SEO friendly.

3. Klik pada tab HTML karena ada kita akan menambahkan kode untuk membuat kustom Blogger formulir kontak kerja. Di situs yang tepat, mengubah pengaturan Halaman untuk menyembunyikan ( "Jangan biarkan" atau "Jangan biarkan, hide ada") komentar pembaca, maka klik "Selesai" tombol:

kontak halaman statis

4. Berikut adalah 5 kustom bentuk gaya Blogger kontak. Memilih favorit Anda dan salin kode yang disediakan, kemudian paste kode di dalam kotak HTML editor halaman Anda:


Form Kontak sederhana

kustom formulir kontak blogger

<Style type = "text / css">
.contact-bentuk-widget {margin-left: auto; margin-right: auto; width: 600px; max-width: 100%; padding: 40px 0} .contactf-nama, .contactf-email {float: left; width : 48.25%} contactf-nama {margin-right:. 3,5%} kontak-bentuk-nama, .contact-bentuk-email, .contact-bentuk-email-pesan, .contact-bentuk-nama:. hover, .contact -form-nama: fokus, .contact-bentuk-email: hover, .contact-bentuk-email: fokus, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: fokus {width: 100 %; max-width: 100%; margin: 0 0 20px; padding: 10px 15px; font-size: 12px; letter-spacing: 1px; color: # 444; background: # F3F3F3; border: menengah none; -webkit- box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 37px} .contact-bentuk-email-pesan {height: 170px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {width: 13%; height: 30px; font yang: 12px yang normal Arial; letter-spacing: 1px; color: # 444;display: block; outline: none; margin-bottom: 20px; text-align: center; background: # E6E6E6; border: 0; cursor: pointer} .contact-bentuk-tombol-menyerahkan: aktif {outline: none; -webkit -box-shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; height:!! 11px penting; width: 11px !penting;}
</ Style>

<Div class = "widget ContactForm" id = "ContactForm22"> <div class = "kontak-bentuk-widget"> <div class = "bentuk"> <form name = "kontak-bentuk"> <div class = "contactf -name "> <input class =" kontak-bentuk-nama" id = "ContactForm1_contact-bentuk-nama" name = "nama" size = "30" type = "text" value = "NAME" onblur = 'jika (ini .value == "") {this.value = "NAME";}' onfocus = 'jika (this.value == "NAME") {this.value = "";}'/> </ div> <div class = "contactf-email"> <input class = "kontak-bentuk-email" id = "ContactForm1_contact-form-email" name = "email" size = "30" type = "text" value = "eMAIL" onblur = 'jika ini.Nilai == "") {this.value = "EMAIL";}' onfocus = 'jika (this.value == "EMAIL") {this.value = "";}'/> </ div> <div style = "clear: both"> </ div> <div class = "contactf-pesan"> <class textarea = "kontak-bentuk-email-pesan" cols = "25" id = "ContactForm1_contact-bentuk-email-pesan" name = "email-pesan" baris = "5" value = "mESSAGE" onblur = 'jika (this.value == "") {this.value = "mESSAGE";}' onfocus = 'jika (this.value = = "PESAN") {this.value = "";} '> </ textarea> </ div> <input class = "kontak-bentuk-tombol kontak-bentuk-tombol-submit" id = "ContactForm1_contact-bentuk kirimkan "type =" button" value = "KIRIM"/> <div class = "kontak-bentuk-error-pesan" id = "ContactForm1_contact-bentuk-error-message"> </ div> <div class = "kontak-bentuk-sukses-pesan" id = "ContactForm1_contact-bentuk-keberhasilan- pesan "> </ div> </ form> </ div> </ div> </ div>

formulir kontak dengan CSS pelangi pembagi

formulir kontak berwarna-warni untuk Blogger

<Style type = "text / css">
.contact-bentuk-widget {margin-left: auto; margin-right: auto; width: 600px; max-width: 100%; padding: 0} hr {position: relative; height: .75em; border: 0; melimpah : hidden; margin: 0} hr: sebelum {content: ""; display: block; position: absolute; top: 0; left: 0; height: .75em; width: 5.1em; background: # C4DD83; box-shadow : 5em 0 0 0 # F4FCC9,10em 0 0 0 # FDCD78,15em 0 0 0 # ED786F, 20em 0 0 0 # D99DBF, 25em 0 0 0 # C39EDC, 30em 0 0 0 # 679DE2,35em 0 0 0 # 62C2E3, 40em 0 0 0 # F4FCC9,45em 0 0 0 # FDCD78,50em 0 0 0 # ED786F, 55em 0 0 0 # D99DBF, 60em 0 0 0 # C39EDC} .contactf-nama, .contactf-email {float: left; width : 49,25%} contactf-nama {margin-right:. 1,5%} kontak-bentuk-nama, .contact-bentuk-email, .contact-bentuk-email-pesan, .contact-bentuk-nama:. hover, .contact -form-nama: fokus, .contact-bentuk-email: hover, .contact-bentuk-email: fokus, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: fokus {width: 100 %;max-width: 100%; margin: 25px 0 0; padding: 10px; font-size: 15px; color: # ccc; border-color: # E8E8E8; border-width: 2px 2px 4px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact -form-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size: 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow : inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow : none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding:!! 0 penting; height: 11px penting; width: 11px penting;}!100%; margin: 25px 0 0; padding: 10px; font-size: 15px; color: # ccc; border-color: # E8E8E8; border-width: 2px 2px 4px; -webkit-box-shadow: none; -moz -box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol -submit, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size: 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 - 2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none}. kontak-bentuk-lintas {border: sedang tidak penting; box-shadow:!!! tidak penting; padding:! 0 penting; height: 11px penting; width: 11px penting;!}100%; margin: 25px 0 0; padding: 10px; font-size: 15px; color: # ccc; border-color: # E8E8E8; border-width: 2px 2px 4px; -webkit-box-shadow: none; -moz -box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol -submit, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size: 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 - 2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none}. kontak-bentuk-lintas {border: sedang tidak penting; box-shadow:!!! tidak penting; padding:! 0 penting; height: 11px penting; width: 11px penting;!}25px 0 0; padding: 10px; font-size: 15px; color: # ccc; border-color: # E8E8E8; border-width: 2px 2px 4px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact -form-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size: 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA ( 0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; kotak -shadow: inset D4685C 0 -2px #} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; height: 11px penting; width: 11px penting;!}25px 0 0; padding: 10px; font-size: 15px; color: # ccc; border-color: # E8E8E8; border-width: 2px 2px 4px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact -form-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size: 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA ( 0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; kotak -shadow: inset D4685C 0 -2px #} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; height: 11px penting; width: 11px penting;!}15px; color: # ccc; border-color: # E8E8E8; border-width: 2px 2px 4px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk -name, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top : 25px; width: 100%; height: 40px; font-size: 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact -form-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding:!! 0 penting; height: 11px penting; width: 11px penting;}!15px; color: # ccc; border-color: # E8E8E8; border-width: 2px 2px 4px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk -name, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top : 25px; width: 100%; height: 40px; font-size: 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact -form-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding:!! 0 penting; height: 11px penting; width: 11px penting;}!-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size: 15px; color: # fff ; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer ; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-kotak- shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; height: 11px penting; width:!! 11px penting; }-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size: 15px; color: # fff ; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer ; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-kotak- shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; height: 11px penting; width:!! 11px penting; }kontak-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size : 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding:! 0 penting; height: 11px penting! ; width: 11px penting;}!kontak-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 40px; font-size : 15px; color: # fff; text-align: center; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); background: # EE786F; border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding:! 0 penting; height: 11px penting! ; width: 11px penting;}!border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk -tombol kirimkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none}! .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: tidak ada! penting; padding: 0 penting; height: 11px penting; width: 11px penting;}!border: 0; border-bottom: 2px solid # D4685C; outline: none; cursor: pointer; -webkit-box-shadow: inset 0 -2px # D4685C; box-shadow: inset 0 -2px # D4685C} .contact-bentuk -tombol kirimkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none}! .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: tidak ada! penting; padding: 0 penting; height: 11px penting; width: 11px penting;}!
</ Style>
<Div class = "widget ContactForm" id = "ContactForm22"> <div class = "kontak-bentuk-widget"> <hr> <div class = "bentuk"> <form name = "kontak-bentuk"> <div class = "contactf-nama"> <input class = "kontak-bentuk-nama" id = "ContactForm1_contact-bentuk-nama" name = "nama" size = "30" type = "text" value = "nama" onblur =' jika (this.value == "") {this.value = "Nama";}' onfocus = 'jika (this.value == "Nama") {this.value = "";}'/> </ div > <div class = "contactf-email"> <input class = "kontak-bentuk-email" id = "ContactForm1_contact-form-email" name = "alamat E-mail" size = "30" type = "text" value = "alamat E-mail"onblur = 'if (this.value == "") {this.value = "Alamat E-mail";}' onfocus = 'jika (this.value == "Alamat E-mail") {this.value = " ";} '/> </ div> <div style = "clear: both"> </ div> <div class = "contactf-pesan"> <class textarea = "kontak-bentuk-email-pesan" cols =" 25" id = "ContactForm1_contact-bentuk-email-pesan" name = "Ketik pesan Anda di sini ..." baris = "5" type = "text" value = "Ketik pesan Anda di sini ..." onblur = 'if ( == this.value "") {this.value = "Ketik pesan Anda di sini ...";} 'onfocus =' jika (this.value == "Ketik pesan Anda di sini ...") {this.value = "";} '> </ textarea> <input class ="kontak-bentuk-tombol kontak-bentuk-tombol-submit" id = "ContactForm1_contact-form-submit" type = "button" value = "Kirim Pesan"/> <div class = "kontak-bentuk-error-pesan" id = "ContactForm1_contact-bentuk-error-message"> </ div> <div class = "kontak-bentuk-sukses-pesan" id = "ContactForm1_contact-bentuk-sukses-pesan"> </ div> </ div> </ form > </ div> </ div> </ div></ Div> </ div> </ div></ Div> </ div> </ div>

Blogger Kontak Form dengan CSS Ribbon

formulir kontak dengan pita

<Style type = "text / css">
.widget.ContactForm {z-index: 1} .contact-bentuk-widget {margin-left: auto; margin-right: auto; width: 600px; max-width: 100%; padding: 25px 0; background: # EBEBE3 ; -webkit-border-radius: 2%; - moz-border-radius: 2%; border-radius: 2%} kontak-bentuk-widget .form {width: 91%; margin: 0 auto} .ribbon {. Font: 16px Arial; text-transform: memanfaatkan; text-shadow: 0 1px 2px RGBA (0,0,0,0.25); position: relative; background: # 6B5F53; color: # fff; text-align: center; Padding : 1em 2em; margin: 0 -16px} .ribbon: sebelum, .ribbon: setelah {content: ""; position: absolute; display: block; bottom: -1em; border: 1.5em solid # 584C40; z-index: -1} .ribbon: sebelum {kiri: -1.7em; border-right-width: 1.2em; border-kiri-warna: transparan} .ribbon: setelah {kanan: -1.7em; border-kiri-width: 1.2em ; border-kanan-warna: transparan} .ribbon .ribbon-konten: sebelum, .ribbon .ribbon-konten: setelah {content: ""; position: absolute; display: block;border-style: padat; border-color: # 42362A transparan transparan; bottom: -1em} .ribbon .ribbon-konten: sebelum {kiri: 0; border-width: 1em 0 0 1em} .ribbon .ribbon-konten: setelah {kanan: 0; border-width: 1em 1em 0 0} .contactf-nama, .contactf-email, .contactf-pesan {text-align: left; margin-top: 25px; color: # a1937b; font-size: 13px} .contactf-nama, .contactf-email {float: left; width: 100%} kontak-bentuk-nama, .contact-bentuk-email, .contact-bentuk-email-pesan, .contact-bentuk-nama. : hover, .contact-bentuk-nama: fokus, .contact-bentuk-email: hover, .contact-bentuk-email: fokus, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: fokus {width: 100%; max-width: 100%; margin: 10px 0 0; padding: 10px; font-size: 12px; color: #aaa; border-color: # DBD6D1; border-width: 1px; kotak- shadow: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px} .contact-bentuk-nama, .contact-bentuk-email {height: 35px}.kontak-bentuk-email-pesan {height: 100px} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {margin-top: 25px; width: 100%; height: 37px; font yang: normal 12px Arial; outline: none; letter-spacing: 1px; color: # fff; text-align: center; cursor: pointer; text-shadow: 1px 1px 0 # ffe8b2; color: # 7c5d1b; border: 1px solid # d6a437; background: # febd4b; background: -webkit-gradien (linear, 0 0,0 100%, dari (# fed970) ke (# febd4b)); background: -webkit-linear-gradient (# fed970, # febd4b); background : -moz-linear-gradient (# fed970, # febd4b); background: -MS-linear-gradient (# fed970, # febd4b); background: -o-linear-gradient (# fed970, # febd4b); background: linear -gradient (# fed970, # febd4b); - pie-background: linear-gradient (# fed970, # febd4b)} kontak-bentuk-tombol-menyerahkan: aktif {color: # 7c5d1b; border:. 1px solid # d6a437; background : # febd4b; background: -webkit-gradien (linear, 0 0,0 100%, dari (# febd4b) ke (# fed970));background: -webkit-linear-gradient (# febd4b, # fed970); background: -moz-linear-gradient (# febd4b, # fed970); background: -MS-linear-gradient (# febd4b, # fed970); background: -o-linear-gradient (# febd4b, # fed970); background: linear-gradient (# febd4b, # fed970); - pie-background:. linear-gradient (# febd4b, # fed970)} kontak-bentuk-lintas { border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; height:!!! 11px penting; width: 11px penting;}
</ Style>
<Div class = "widget ContactForm" id = "ContactForm22"> <div class = "kontak-bentuk-widget"> <class h2 = "pita"> <strong class = "pita-content"> Shoot Me Email </ strong> </ h2> <div class = "bentuk"> <form name = "kontak-bentuk"> <div class = "contactf-nama"> nama Anda: <input class = "kontak-bentuk-nama" id = "ContactForm1_contact-bentuk-nama" name = "nama" size = "30" type = "text" value = "nama" onblur = 'if (== this.value "") {this.value = "nama";} 'onfocus =' jika (this.value == "Nama") {this.value = "";}'/> </ div> <div class = "contactf-email"> alamat E-mail *: <input class = "kontak-bentuk-email" id ="ContactForm1_contact-form-email" name = "Alamat E-mail" size = "30" type = "text" value = "Alamat E-mail" onblur = 'jika (this.value == "") {this.value = "alamat E-mail";}' onfocus = 'jika (this.value == "alamat E-mail") {this.value = "";}'/> </ div> <div style = "clear: both "> </ div> <div class =" contactf-pesan "> pesan *: <class textarea =" kontak-bentuk-email-pesan" cols = "25" id = "ContactForm1_contact-bentuk-email-pesan" name = "Ketik pesan Anda di sini ..." baris = "5" value = "" placeholder = "Ketik pesan Anda di sini ..." value = "Ketik pesan Anda di sini ..." onblur = 'jika (this.value == "") {this.value = "Ketik pesan Anda di sini ...";}' Onfocus = 'jika (this.value == "Ketik pesan Anda di sini ...") {this.value = "";}'> </ textarea> <input class = "kontak-bentuk-tombol kontak-bentuk -tombol-submit "id = "ContactForm1_contact-form-submit" type = "button" value = "KIRIM pESAN"/> <div class = "kontak-bentuk-error-pesan" id =" ContactForm1_contact-bentuk-error-message "> </ div> <div class =" kontak-bentuk-sukses-pesan" id = "ContactForm1_contact-bentuk-sukses-pesan"> </ div> </ div> </ form> </ div> </ div > </ div>ContactForm1_contact-form-submit" type = "button" value = "KIRIM PESAN"/> <div class = "kontak-bentuk-error-pesan" id = "ContactForm1_contact-bentuk-error-message"> </ div> <div class = "kontak-bentuk-sukses-pesan" id = "ContactForm1_contact-bentuk-sukses-pesan"> </ div> </ div> </ form> </ div> </ div> </ div>ContactForm1_contact-form-submit" type = "button" value = "KIRIM PESAN"/> <div class = "kontak-bentuk-error-pesan" id = "ContactForm1_contact-bentuk-error-message"> </ div> <div class = "kontak-bentuk-sukses-pesan" id = "ContactForm1_contact-bentuk-sukses-pesan"> </ div> </ div> </ form> </ div> </ div> </ div>

Form Kontak Minimal

formulir kontak minimal untuk Blogger

<Style type = "text / css">
.contact-bentuk-widget {margin-left: auto; margin-right: auto; width: 600px; max-width: 100%; padding: 25px; background: # fff} .contact-title {text-align: center; Font: 41px fantasi; color: # 121212; margin-bottom: 25px} .contactf-nama, .contactf-email {float: left; width:.. 47%} contactf-nama {margin-right: 6%} nama- ikon img, .email-icon img {background: transparent penting; border: sedang tidak penting; box-shadow:!!! tidak penting; padding: 11px 0 penting; width:!!! 16px penting; height: 16px penting;} .name-icon, .email-icon {position: absolute; z-index: 1} .contact-bentuk-nama, .contact-bentuk-email, .contact-bentuk-email-pesan, .contact-bentuk-nama: hover, .contact-bentuk-nama: fokus, .contact-bentuk-email: hover, .contact-bentuk-email: fokus, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: fokus {width: 100%; max-width: 100%; margin: 0 0 25px; padding: 10px 10px 10px 25px; font yang: bold 16px kursif;text-shadow: 0 1px 2px #ddd; color: # 121212; background:! transparan penting; border-color: # 121212; border-width: 0 0 2.5px; -webkit-box-shadow: none; -moz-box -shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan, .contact-bentuk-email-pesan: hover ,. hubungi-form-email-pesan: focus {padding: 10px penting!} .contact-bentuk-email-pesan {height: 150px; border-width:! 2.5px penting} .contact-bentuk-tombol kirimkan, .contact- bentuk tombol-mengirimkan-: hover {background: # 121212 penting; width:! 30%; height: 37px; font yang: bold 13px "Lucida Grande"; letter-spacing: 2px; color: # fff; text-align: center; border: menengah none; cursor: pointer; display: block; margin: 0 auto; outline: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow:!!! tidak penting; padding: 0 penting; ! width: 11px penting; height: 11px penting;}!# 121212; background:! Transparan penting; border-color: # 121212; border-width: 0 0 2.5px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none}. hubungi-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: focus {padding: ! 10px penting} .contact-bentuk-email-pesan {height: 150px; border-width:! 2.5px penting} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 ! penting; width: 30%; height: 37px; font yang: bold 13px "Lucida Grande"; letter-spacing: 2px; color: # fff; text-align: center; border: menengah none; cursor: pointer; display: block ; margin: 0 auto; outline: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; width:! 11px penting; height:!! 11px penting; }# 121212; background:! Transparan penting; border-color: # 121212; border-width: 0 0 2.5px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none}. hubungi-bentuk-nama, .contact-bentuk-email {height: 40px} .contact-bentuk-email-pesan, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: focus {padding: ! 10px penting} .contact-bentuk-email-pesan {height: 150px; border-width:! 2.5px penting} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 ! penting; width: 30%; height: 37px; font yang: bold 13px "Lucida Grande"; letter-spacing: 2px; color: # fff; text-align: center; border: menengah none; cursor: pointer; display: block ; margin: 0 auto; outline: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding: 0 penting; width:! 11px penting; height:!! 11px penting; }# 121212; border-width: 0 0 2.5px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email { height: 40px} .contact-bentuk-email-pesan, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: fokus {padding: 10px penting} .contact-bentuk-email-pesan { height: 150px; border-width:! 2.5px penting} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 penting; width:! 30%; height: 37px; font yang : bold 13px "Lucida Grande"; letter-spacing: 2px; color: # fff; text-align: center; border: menengah none; cursor: pointer; display: block; margin: 0 auto; outline: none} .contact- bentuk-lintas {border: sedang tidak penting; box-shadow:!!! tidak penting; padding:! 0 penting; width: 11px penting; height: 11px penting;!}# 121212; border-width: 0 0 2.5px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none} .contact-bentuk-nama, .contact-bentuk-email { height: 40px} .contact-bentuk-email-pesan, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: fokus {padding: 10px penting} .contact-bentuk-email-pesan { height: 150px; border-width:! 2.5px penting} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 penting; width:! 30%; height: 37px; font yang : bold 13px "Lucida Grande"; letter-spacing: 2px; color: # fff; text-align: center; border: menengah none; cursor: pointer; display: block; margin: 0 auto; outline: none} .contact- bentuk-lintas {border: sedang tidak penting; box-shadow:!!! tidak penting; padding:! 0 penting; width: 11px penting; height: 11px penting;!}kontak-bentuk-email {height: 40px} .contact-bentuk-email-pesan, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: Fokus {padding: 10px penting} .contact- form-email-pesan {height: 150px; border-width:! 2.5px penting} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 penting; width: 30% ; height: 37px; font yang: bold 13px "Lucida Grande"; letter-spacing: 2px; color: # fff; text-align: center; border: menengah none; cursor: pointer; display: block; margin: 0 auto; outline : none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding:!! 0 penting; width: 11px penting; height: 11px penting;}!kontak-bentuk-email {height: 40px} .contact-bentuk-email-pesan, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: Fokus {padding: 10px penting} .contact- form-email-pesan {height: 150px; border-width:! 2.5px penting} .contact-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 penting; width: 30% ; height: 37px; font yang: bold 13px "Lucida Grande"; letter-spacing: 2px; color: # fff; text-align: center; border: menengah none; cursor: pointer; display: block; margin: 0 auto; outline : none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow: none! important; padding:!! 0 penting; width: 11px penting; height: 11px penting;}!hubungi-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 penting; width:! 30%; height: 37px; font yang: bold 13px "Lucida Grande"; letter-spacing: 2px; warna: # fff; text-align: center; border: menengah none; cursor: pointer; display: block; margin: 0 auto; outline: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow : none! important; padding:! 0 penting; width: 11px penting; height: 11px penting;}!hubungi-bentuk-tombol kirimkan, .contact-bentuk-tombol-menyerahkan: hover {background: # 121212 penting; width:! 30%; height: 37px; font yang: bold 13px "Lucida Grande"; letter-spacing: 2px; warna: # fff; text-align: center; border: menengah none; cursor: pointer; display: block; margin: 0 auto; outline: none} .contact-bentuk-lintas {border: sedang tidak penting; box-shadow : none! important; padding:! 0 penting; width: 11px penting; height: 11px penting;}!
</ Style>
<Div class = "widget ContactForm" id = "ContactForm22"> <div class = "kontak-bentuk-widget"> <class h2 = "kontak-title"> Dapatkan berhubungan. </ H2> <div class = "bentuk "> <form name =" kontak-bentuk "> <div class =" contactf-nama "> <div class =" nama-icon "> <img src =" https://3.bp.blogspot.com/- TgreeOjV9hc / WC8lF19LbaI / AAAAAAAABq4 / E5U-ahjjFcYBpgZd49O1BwTLelkqVGhgQCLcB / S1600 / avatar% 25.281% 2529.png "width = "16" height = "16"/> </ div> <input class = "kontak-bentuk-nama" id =" ContactForm1_contact-bentuk-nama" name = "nama" size = "30" type = "text" value = "nama" onblur = 'if (== this.value "") {this.value = "nama";}' onfocus = 'jika (ini.Nilai == "Nama") {this.value = "";}'/> </ div> <div class = "contactf-email"> <div class = "email-icon"> <img src = "https: //4.bp.blogspot.com/-AuOlsNet-oA/WC8lCTFCY_I/AAAAAAAABq0/7eKfEB9TINkHQ_-ug5oqM7LTl9YBXjevQCLcB/s1600/envelope%25281%2529.png" width = "16" height = "16"/> </ div> < class input = "kontak-bentuk-email" id = "ContactForm1_contact-form-email" name = "alamat E-mail" size = "30" type = "text" value = "alamat E-mail" onblur = 'if ( this.value == "") {this.value = "alamat E-mail";}' onfocus = 'jika (this.value == "alamat E-mail") {this.value = "";}'/ > </ div> <div style = "clear: both"> </ div> <div class ="contactf-pesan "> <class textarea =" kontak-bentuk-email-pesan" cols = "25" id = "ContactForm1_contact-bentuk-email-pesan" name = "Ketik pesan Anda di sini ..." baris = "5" value = "Ketik pesan Anda di sini ..." onblur = 'jika (this.value == "") {this.value = "Ketik pesan Anda di sini ...";}' onfocus = 'jika (this.value = = "Ketik pesan Anda di sini ...") {this.value = "";} '> </ textarea> <input class = "kontak-bentuk-tombol kontak-bentuk-tombol-submit" id = "ContactForm1_contact-bentuk -submit "type = "button" value = "KIRIM"/> <div class = "kontak-bentuk-error-pesan" id = "ContactForm1_contact-bentuk-error-message"> </ div> <div class =" kontak -form-sukses-pesan "id ="ContactForm1_contact-bentuk-sukses-pesan "> </ div> </ div> </ form> </ div> </ div> </ div>

formulir kontak dengan pidato gelembung



<Style type = "text / css">
.contact-bentuk-widget {margin-left: auto; margin-right:; width auto: 600px; max-width: 100%}. contactf-nama, .contactf-email {float: left; width: 50%}. hubungi-bentuk-nama, .contact-bentuk-email, .contact-bentuk-email-pesan, .contact-bentuk-nama: hover, .contact-bentuk-nama: fokus, .contact-bentuk-email: hover ,. hubungi-form-email: fokus, .contact-bentuk-email-pesan: hover, .contact-bentuk-email-pesan: fokus {width: 100%; max-width: 100%; margin: 0 0 15px; padding: 10px; font-size: 14px; color: # 777; background: # E2DEDB; border: 1px solid # CBC7C4; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; - webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px} .contact-bentuk-nama, .contact-bentuk-email {height: 33px} .contact-bentuk-email-pesan { height: 130px} .contactf-pesan {position: relative} .contactf-pesan: setelah, .contactf-pesan: sebelum {border-bottom: 50px padat transparan; border-left:80px solid # E2DEDB; bottom: -32px; konten: ''; position: absolute; kanan: 50%; margin-right: -100px} .contactf-pesan: sebelum {border-left: 80px solid # CBC7C4; bottom: - 34px; kanan: 50,3%; margin-right: -101px} .cbluebutton {margin-top: 25px; width: 30%; height: 35px; float: right; font-size: 15px; color: # fff; display: inline -block; text-align: center; background: linear-gradient (ke bawah, # 339ad9 0%, # 224bbc 100%); box-shadow: 0 1px 1px RGBA (34,75,188,0.5); border: 0; - webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px} .cbluebutton rentang .contact-bentuk-tombol-mengirimkan {background: linear-gradient (ke bawah, # 52b1e2 0%, # 397fd0 100%); font yang: bold 16px "Helvetica Neue", sans-serif; height: 35px; width: 100%; color: # fff; text-shadow: 0 1px 1px # 224BBC; display: inline-block; kotak- shadow: 0 1px 1px RGBA (255,255,255,0.3) inset; kursor: pointer; outline: none; -webkit-border-radius: 20px;-moz-border-radius: 20px; border-radius: 20px} .contact-bentuk-tombol-menyerahkan: aktif {top: 1px; outline: none; -webkit-box-shadow: none; box-shadow: none}. kontak-bentuk-lintas {border: sedang tidak penting; box-shadow:!!! tidak penting; padding:! 0 penting; width: 11px penting; height: 11px penting;!}
</ Style>
<Div class = "widget ContactForm" id = "ContactForm22"> <div class = "kontak-bentuk-widget"> <div class = "bentuk"> <form name = "kontak-bentuk"> <div class = "contactf -message "> <class textarea =" kontak-bentuk-email-pesan" cols = "25" id = "ContactForm1_contact-bentuk-email-pesan" name = "pesan" baris = "5" value = "pesan" onblur = 'jika (this.value == "") {this.value = "Pesan";}' onfocus = 'jika (this.value == "Pesan") {this.value = "";}'> </ textarea > </ div> <div class = "cbluebutton"> <span> <input class = "kontak-bentuk-tombol kontak-bentuk-tombol-submit" id = "ContactForm1_contact-form-submit" type = "button"value = "Kirim" /> </ span> </ div> <div class = "contactf-nama"> <input class = "kontak-bentuk-nama" id = "ContactForm1_contact-bentuk-nama" name = "nama" size = "30" type = "text" value = "Nama" onblur = 'jika (this.value == "") {this.value = "Nama";}' onfocus = 'jika (this.value == " nama ") {this.value = "";}'/> </ div> <div class = "contactf-email"> <input class = "kontak-bentuk-email" id = "ContactForm1_contact-form-email" nama = "email" size = "30" type = "text" value = "E-mail" onblur = 'jika (this.value == "") {this.value = "E-mail";}' onfocus =' jika (this.value == "E-mail") {this.value = "";} '/></ Div> <div style = "clear: both"> </ div> <div class = "kontak-bentuk-error-pesan" id = "ContactForm1_contact-bentuk-error-message"> </ div> <div class = "kontak-bentuk-sukses-pesan" id = "ContactForm1_contact-bentuk-sukses-pesan"> </ div> </ div> </ form> </ div> </ div>

5. Setelah Anda menambahkan kode, klik "Publikasikan" tombol di sisi kanan atas. Sekarang Anda harus dapat melihat formulir kontak Blogger hidup pada halaman statis Anda. Untuk memastikan bahwa semuanya bekerja dengan baik, Anda dapat mengirimkan pesan sebagai ujian. pesan harus dikirim ke kotak masuk Anda dalam hitungan detik, hanya pastikan bahwa Anda memeriksa email yang Anda gunakan dengan akun Blogger Anda.

Pertanyaan tentang Custom Form Kontak untuk Blogger yang Sering Diajukan

Di mana pesan pergi?

Setelah pengunjung mengajukan pertanyaan atau mengirim umpan balik melalui form kontak Blogger , itu langsung dikirim ke email yang terkait dengan akun Blogger Anda. Jika sebuah blog memiliki beberapa administrator, maka semua administrator individu akan menerima komentar atau pertanyaan yang diajukan oleh pengunjung.

Apa manfaat dari menggunakan terpisah "Hubungi Kami" halaman?

Meskipun semua bermuara pada preferensi pribadi Anda, blog Anda akan terlihat lebih profesional jika memiliki halaman terpisah untuk formulir kontak kustom untuk Blogger. Ini memberi Anda kredibilitas dan juga menawarkan Anda kesempatan untuk menambahkan panggilan khusus untuk beraksi di halaman "Hubungi Kami" baru.

Apakah mungkin untuk menambahkan bidang tambahan?

Sayangnya tidak ada. Anda tidak dapat menambahkan kolom kustom seperti website, nomor telepon atau alamat surat sejak Blogger menggunakan tag khusus untuk mentransfer data. Dalam kasus apapun, bidang default diletakkan-out dengan baik dan akan membantu Anda untuk mendapatkan informasi dasar yang Anda butuhkan tentang pengunjung Anda.

Saya telah menginstal formulir kontak Blogger, tapi itu tidak bekerja. Apa yang bisa menjadi masalah?

Ada beberapa alasan mengapa Anda mungkin akan mengalami kesulitan menyiapkan formulir kontak Anda. Cara paling sederhana untuk memecahkan masalah adalah dengan pemeriksaan ulangan email Anda terkait dengan blog dan juga menginstal ulang formulir lagi.

Pada akhirnya, dengan menggunakan adat Blogger formulir kontak yang Anda dapatkan dari konsistensi dalam jenis informasi yang Anda meminta dan juga mengurangi spam karena Anda tidak perlu menampilkan email Anda langsung di blog.

Makasih.
Avertisement
Comments


EmoticonEmoticon