√ Cara Membuat Contact Form Di Blogger Dengan Menggunakan Widget

wahab

Contact Form, Tutorial Blogger, Widget

2018/02/08

1 Komentar

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 teman saya tentang 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 bisa 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 langsung 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 bisa di pasang pada sidebar saja sebagai widget.

Tapi dengan berkembangnya blogger, kita sudah bisa memasang widget contact form blogspot pada halaman statis blogger atau di laman baru.

Fungsi dari Contact Form atau Formulir Kontak sendiri adalah 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 lalu klik kirim, kemudian akan sampai ke akun gmail pemilik blog.
seperti gambar di bawah ini.

Jadi 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 :

Pertama

Pada 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 menu Tata Letak/Layout
kemudian pada sidebar pilih Tambah Widget
Pilih gadget lainnya lalu pilih Formulir kontak seperti 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 agar Widget nya tidak kelihatan di sidebar kita menggunakan Kode CSS berikut,

Silahkan kalian copy dan pastekan kode di bawah ini tepat di atas kode  ]]></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 baru pada halaman statis blog kalian.

Pilih pengaturan Tab HTML Pada ( Compose | HTML ) sebelah kiri, lalu pastekan kode 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 langsung membalas pesan anda. Maaf jika saya membalasnya lama.&nbsp; </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

Pengelola Blog : ABDUL WAHAB

Judul : √ Cara Membuat Contact Form Di Blogger Dengan Menggunakan Widget
Ditulis oleh :Blog Cressentia Digital pada hari 2018/02/08
Rating Blog : 5 dari 5
Terima kasih sudah membaca artikel tentang √ Cara Membuat Contact Form Di Blogger Dengan Menggunakan Widget
Kalian boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman kalian.
Namun jangan lupa harap memberikan link aktif dofollow ke URL
https://fajriandaviar.blogspot.com/2017/11/cara-membuat-contact-form-di-blogger.html
Dan Terima kasih sekali lagi atas kunjungannya.

Kritik dan saran atau apapun bisa kalian sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak selalu online dikarenakan sibuk.