Cara Membuat Contact Form Di Laman Blogger Dengan Menggunakan Widget
Cara Membuat Contact Form Di Laman Blogger Dengan Menggunakan Widget - Mumpung ada kesempatan nih buat artikel di blog fajriandafiar, kali ini saya ingin menjawab pertanyaan salah satu sahabat saya wacana Bagaimana Cara Membuat Contact Form Di Blogger Menggunakan Widget Tapi Menyimpannya Di Halaman Statis Atau Laman Baru ? Seperti Contoh DEMO Contact Form Saya Ini.
Sebenernya Cara Membuat Contact Form Di Blogger Dengan Mudah, Salah satunya dapat dengan mendaftar di www.123contactform.com , tapi kali ini Tutorialnya Cara Membuat Contact Form Di Laman Blogger Dengan Menggunakan Widget untuk menjawab pertanyaan teman.
Okay eksklusif saja ya.., Oh iya, apakah kalian sudah baca Cara Agar Artikel Atau Postingan Cepat Terindex Google ? Contact Form atau Formulir Kontak bawaan dari blogger atau blogspot, pada awalnya hanya dapat di pasang pada sidebar saja sebagai widget.
Tapi dengan berkembangnya blogger, kita sudah dapat memasang widget contact form blogspot pada halaman statis blogger atau di laman baru.
Fungsi dari Contact Form atau Formulir Kontak sendiri yaitu sebuah layanan untuk mengirim suatu pesan ke email pemilik atau penulis blog.
Baca juga : Cara Menulis Artikel SEO
Cara penggunaanya juga cukup mudah, pengunjung blog yang ingin mengirim pesan tinggal mengetik nama, email dan pesan kemudian klik kirim, kemudian akan hingga ke akun gmail pemilik blog.
menyerupai gambar di bawah ini.
Kaprikornus bagaimana sih cara Menggunakan Widget Contact Form Tapi Menyimpannya Di Halaman Statis Atau Laman Baru ?
Baca juga : Langkah-langkah Optimasi Onpage Pada Blog
Baca perlahan Tutorial Cara Membuat Contact Form DI Blogger berikut ini ya :
PertamaPada langkah awal, kita akan memasang Widget Contact Form atau Formulir Kontak di sidebar blog kita. Sebelumnya kalian masuk dulu di dashboard blog kalian dan pada dashboard,
kalian pilih sajian Tata Letak/Layout
kemudian pada sidebar pilih Tambah Widget
Pilih gadget lainnya kemudian pilih Formulir kontak menyerupai gambar berikut
Jangan lupa kalian tes terlebih dahulu apakah Contact Form atau Formulir Kontak kalian berfungsi dengan baik. silahkan periksa di kotak masuk email kalian yang terhubung dengan akun blog yang ingin kalian pasangkan Contact Form. cek di kotak masuk sosial.
Jika Contact Form atau Formulir Kontak sudah berfungsi dengan baik maka lanjutkan ke langkah kedua.
Kedua
Pada langkah kedua ini kita akan sembunyikan Contact Form atau Formulir Kontak yang tadi kalian pasang pada sidebar.
Dan biar Widget nya tidak kelihatan di sidebar kita memakai Kode CSS berikut,
Silahkan kalian copy dan pastekan arahan di bawah ini sempurna di atas arahan ]]></b:skin> atau </style>.
pada halaman template kalian.
Kode CSS nya
#ContactForm1,#ContactForm1 br{ display:none; visibility:hidden; }
Ketiga
Langkah ketiga atau terakhir, Silahkan kalian buat laman gres pada halaman statis blog kalian.
Pilih pengaturan Tab HTML Pada ( Compose | HTML ) sebelah kiri, kemudian pastekan arahan Script dibawah ini pada laman contact kalian tersebut.
Kode Scriptnya
<div dir="ltr" style="text-align: left;" trbidi="on">
Ada Pertanyaan ? Silahkan lampirkan pesan anda di contact form di bawah ini untuk menghubungi. Jika saya tidak ada kesibukan lain maka saya akan eksklusif membalas pesan anda. Maaf kalau saya membalasnya lama. </div>
<br />
<form id="kontak-fajri" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" /> <br /> <div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message"> </div>
<div id="ContactForm1_contact-form-success-message"> </div> </div> </form>
<style scoped="" type="text/css"> #comments,.post_meta,#blog-pager{display:none} form{color:#666} #kontak-fajri{margin:auto;max-width:250px} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out} #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)} #ContactForm1_contact-form-submit{float:left;background:#95a5a6;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease} #ContactForm1_contact-form-submit:hover{background:#e74c3c;color:#fff;} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px} .contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0} .contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff} img.contact-form-cross{line-height:40px;margin-left:5px} .post-body input{width:initial} @media only screen and (max-width:250px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>
Selesai. Silahkan Klik Publikasikan
Kemudian test apakah sudah berfungsi dengan baik. periksa di kotak email kalian.
Saya harap sukses. dan semoga artikel Cara Membuat Contact Form Di Laman Blogger Dengan Menggunakan Widget ini bermanfaat, Biar lebih bermanfaat, jangan lupa di share ya.. Tanks
