Beranda Blogger Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga

Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga

179
0
Cara Membuat Kontak form keren

DUJAA.COM | Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga – Kontak Form atau halaman kontak adalah sebuah halaman atau menu blog yang berisikan isian data untuk menghubungi pemilik blog atau pengelola blog. Didalamnya menyajikan menu isian pesan yang dapat dikirim ke pemiliki blog.

Keberadaan kontak form pada suatu blog sangatlah penting karena kontak form merupakan salah satu syarat dasar kelengkapan blog. Selain itu juga jika anda ingin mendaftarkan blog ke Google Adsense maka kontak form ini wajib dibuat.

Kita flashback sebentar ke syarat dasar agar blog diterima Google Adsense. Salah satu syarat dasar blog yaitu adanya property blog yaitu :

  1. About
  2. Kontak
  3. Disclaimer
  4. Privacy Policy
  5. Sitemap

Sudah pahamkan tentang properti tersebut, nah jika anda ingin membangun sebuah blog maka jangan tinggalkan membuat properti blog yang telah saya sebutkan diatas.

Nah untuk itu saya sengaja membahas Cara Membuat Kontak Form Di Blogspot agar membantu blogger pemula yang ingin mengawali menjadi seorang blogger.

Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga

Baiklah pada kesempatan kali ini saya akan berbagi pengalaman saya tentang Bagaiman Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga.

Maksud Tanpa Aplikasi Pihak Ketiga Apa Mas ?

Maksud dari tanpa aplikasi pihak ketiga yaitu kontak form yang dibuat tidak menggunakan bantuan apilikasi lain. Salah contoh aplikasi pihak ketiga untuk membuat kontak form yaitu 123formbuilder.

Sebenarnya BLOGGER juga sudah menyediakan kontak form tapi perlu optimasi lagi agar menjadi kontak form di halaman Blog. Untuk itu saya manfaatkan fitur bawaan blog tersebut.

Baiklah langsung saja kita mulai langkah – langkah Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga, Terdapat 3 langkah yang harus anda selesaikan yaitu :

Langkah Pertama

1. Buka Dashboard Blogger
2. Klik Layout / Tata Letak
3. Klik Add a Wiget / Tambahkan Widget ( Disini letak wigdet bebas, bisa di sidebar atau footer )
4. Muncul daftar Widget kemudian cari Widget Contact Form / Formulir Kontak
5 .Klik tanda ( + ) untuk menambahkan

Langkah Kedua

1. Klik Theme / Tema
2. Klik Edit HTML
3. Cari kode </head> (Tekan CTRL + F > masukan </head> > Enter)
4. Kemudian Copy kode dibawah ini sebelum atau ditas </head>

<style type=‘text/css’>
#ContactForm1,#ContactForm1 br{display:none}
</style>

5. Klik Save / Simpan

Langkah Ketiga

1. Klik Page / Halaman
2. Ketikkan Judul Kontak
3. Klik Mode HTML
5. Kemudian Copy kode dibawah ini dan paste ke halaman kontak

Silahkan Hubungi saya dengan mengisi form dibawah ini, Apabila saya tidak sibuk atau tidak ada halangan lainnya,  saya akan membalasnya.<br />
<br />
<form id=”contact-form” name=”contact-form”>
<input id=”ContactForm1_contact-form-name” name=”name” placeholder=”Name *” size=”30″ type=”text” value=”” /><br />
<input id=”ContactForm1_contact-form-email” name=”email” placeholder=”Email *” size=”30″ type=”text” value=”” /><br />
<textarea cols=”25″ id=”ContactForm1_contact-form-email-message” name=”email-message” placeholder=”Message *” rows=”5″></textarea> <br />
<input id=”ContactForm1_contact-form-submit” type=”button” value=”Kirim” />  <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}
#contact-form{margin:auto;max-width:640px}
#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:#34495e;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:#3498db;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:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>

6. Klik Publish / Publikasikan

Jika sudah semuanya maka hasilnya seperti ini

Nah sekarang blog anda sudah terpasang kontak form keren tanpa melibatkan web atau aplikasi penyedia kontak form pihak ketiga.

Anda bisa melakukan test kontak form dengan mengisinya sendiri kemudian klik kirim, stelah itu pesan yang ada kirim tadi akan masuk ke email yang anda gunakan untuk login BLOGGER.

Dengan demikian jika ada pengunjung blog ingin menghubungi anda maka bisa klik menu kontak yang sudah anda pasang pada blogger.

Demikian tutorial tentang Cara Membuat Kontak Form Di Blogspot Tanpa Aplikasi Pihak Ketiga. Semoga tutorial ini bermanfaat bagi anda. Jangan lupa share agar lebih bermanfaat. Terima Kasih.

LEAVE A REPLY

Please enter your comment!
Please enter your name here