Memasang Contact Form Di Blogspot

 Memasang Contact Form Di Blogspot
Memasang Contact Form Di Blogspot
Hallo Guys Salam Hangat dan salam sejahtera buat kalian semua.  Kali ini saya ingin membahas tentang keuntungan menggunakan Contact Form atau yang sering kita lihat di dalam website,blogspot & Wordpress. Pastinya kalian sudah tau bahwa Contact Form adalah penghubung antara pengunjung dengan pemilik website, Sebelum kalian membuat Contact Form kalian harus menentukan nama Contact Form tersebut yang nantinya akan ada di dalam Web, blog, wordpress kalian. Saya akan merekomendasikan nama-nama yang sering digunakan untuk Contact Form, yaitu :-
.Contact Us
.Kontak
.Hubungi Kami

Kira-kira persisnya seperti itu tergantung kalian mau pakai nama yang mana atau kalian ingin membuat nama sendiri dengan kreasi kalian guys, itu semua tergantung pada kalian.Kenapa sih terkesan wajib & harus memasang Contact form di blog atau web, Jawabannya "Wajib" memang harus guys, apalagi Blog kita sudah banyak pengunjung, jadi sudah semestinya menggunakan Contact Form ini, Memang ada juga sebagian blog atau web yang tidak memasang Contact form karena mungkin alasan tertentu, tanyakan pada rumput yang bergoyang!!

Manfaat menggunakan Contact form, Pengunjung bisa mengirimkan kritik dan saran yang sifatnya pribadi melalui pesan Email yang di kirimkan melalui Contact form dan karena adanya Contact form ini juga akan membuat Blog/Web terlihat jadi lebih profesional loh guys. Pengunjung bisa mengirim kritik atau saran melalui pesan email dengan Cara mengisi kolom Nama, kolom Email tentunya Isi juga Masalah/keluhan atau saran yang mau di tanyakan oleh pemilik Web,

Banyak Layanan di luaran sana yang menyediakan pembuatan Contact form, yang bisa kita desain sendiri,
Terkesan blog jadi tidak terlihat mandiri, Karena menggunakan jasa pihak ke tiga, 

Sedangkan Contact form sendiri pungsinya bisa di bilang sangat rahasia, Contact form sebagai alat penghubung antara pengunjung dan pemilik web,.

Langsung Saja Guys, Cekidot ke Tutorial Pemasangan Contact Us ⤵⤵⤵⤵⤵⤵Pertama Loging Ke blog Dasboard dulu guys,
Memasang Contact Form Di Blogspot

1. Pilih Laman tanda panah warna merah
2. Buat Laman baru,  Setelah itu Pilih modul HTML Gusy, Sebelah Compose
3. Selanjuta Copy Kode yang ada di bawah ini ⬇⬇⬇⬇⬇⬇⬇⬇

<div class="Kreativitas Social-contact-form"><div class="form"><!-- Custom Contact Form By Kreativitas social start --><br /><div<div class="Kreativitas Social-contact-form"><div class="form"><!-- Custom Contact Form By Kreativitas social start --><br /><div class="Kreativitas Social-contact-title">Contact Form</div><form name="contact-form"><!-- Nama Field --><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Name&quot;;}" onfocus="if (this.value == &quot;Name&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Name" /><br /><!-- Email ID Field --><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Email ID&quot;;}" onfocus="if (this.value == &quot;Email ID&quot;) {this.value = &quot;&quot;;}" size="30" type="text" value="Email ID" /><br /><!-- Kirim Field --><textarea class="contact-form-email-message" id="ContactForm1_contact-form-email-message" name="email-message" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Leave Your Message..&quot;;}" onfocus="if (this.value == &quot;Leave Your Message..&quot;) {this.value = &quot;&quot;;}" value="Leave Your Message.."></textarea><br /><!-- Clear Button --><input class="contact-form-button contact-form-button-submit seocips-button-color" type="reset" value="Clear" /><!-- Send Button --><input class="contact-form-button contact-form-button-submit seocips-button-color" id="ContactForm1_contact-form-submit" type="button" value="Send" /><br /><!-- Validation --><br /><div style="max-width: 222px; text-align: center; width: 100%;"><div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></div><div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></div></div></form><!-- End Custom Contact Form By Kreativitas Sc --></div></div><style>.Kreativitas Social-contact-form { background:#fff; box-shadow:-1px 2px 3px #ddd; font:12px arial; width:100%; max-width:320px; margin:20px auto; padding:15px; border:1px solid #ddd; }.Kreativitas Social-contact-title { box-shadow:-1px 2px 3px #ddd; text-shadow:0 1px 1px rgba(0,0,0,.3); margin:0 0 10px 0; font-weight:400; padding:10px 15px; font:16px Arial; cursor:pointer; text-align:center; color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }.contact-form-name,.contact-form-email,.contact-form-email-message { max-width:320px; width:100%; font-weight:bold; }.contact-form-name { background:#f3f3f3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmjwYdvqblJW8rwHB7IYVcRYcURT_4IE8TR5fqjvXv2CUV71i9UCMj6aLGuC15qwKIexzZCJw8msv5jfqGsoS7Wt0_J_hA2B6I6kZJf30SZN5MORntwg-GCvjx7KNWEpq0qIsyM9QIv1s/s320/name.png) no-repeat 7px 8px; background:#f3f3f3; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; box-shadow:inset -2px 2px 3px #ddd; vertical-align:top; }.contact-form-email { background:#F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLlU2SvfNa4tE-Rs_K6jARd6FpInGyBIBeXmz4x1SitzbXzVhLbQYgsCy9XhBbLL8KA963rnF4Chf8_Fh4gktr7o9nkvkPZtwngCcfqCbZGlJSi9xNf1MK0TJOS9ufSeVwBma5r32M9u0/s320/email.png) no-repeat 7px 10px; background-color:#F2F2F2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:Arial,sans-serif; font-size:13px; font-weight:bold; height:35px; margin:0; margin-top:5px; padding:5px 15px 5px 28px; vertical-align:top; box-shadow:inset -2px 2px 3px #ddd; }.contact-form-email:hover,.contact-form-name:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:5px 15px 5px 28px; }.contact-form-email-message:hover { border:1px solid #bebebe; box-shadow:0 1px 2px rgba(5,95,255,.1); padding:10px; }.contact-form-email-message { background:#FFF; background-color:#f2f2f2; border:1px solid #ddd; box-sizing:border-box; color:#A0A0A0; display:inline-block; font-family:arial; font-size:13px; margin:0; margin-top:5px; padding:10px; vertical-align:top; max-width:320px !important; height:150px; border-radius:4px; box-shadow:inset -2px 2px 3px #ddd; }.contact-form-button { cursor:pointer; height:32px; line-height:28px; font-weight:bold; border:none; }.contact-form-button { display:inline-block; zoom:1; *display:inline; vertical-align:baseline; margin:0 2px; outline:none; cursor:pointer; text-align:center; text-decoration:none; font:14px/100% Arial,Helvetica,sans-serif; padding:.5em 2em .55em; text-shadow:0 1px 1px rgba(0,0,0,.3); box-shadow:-1px 2px 3px #ddd; }.contact-form-button:hover { text-decoration:none; }.contact-form-button:active { position:relative; top:1px; }.Kreativitas social-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }.Kreativitas social-button-color:hover { background:#f47c20; }.Kreativitas social-button-color:active { color:#fcd3a5; }.contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmjwYdvqblJW8rwHB7IYVcRYcURT_4IE8TR5fqjvXv2CUV71i9UCMj6aLGuC15qwKIexzZCJw8msv5jfqGsoS7Wt0_J_hA2B6I6kZJf30SZN5MORntwg-GCvjx7KNWEpq0qIsyM9QIv1s/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }</style>

Selanjut Kalian Pastekan di Laman baru HTML yang sudah kalian buat,
Jangan lupa buatkan Judul pada Umum nya dengan Nama
Kontak
Contact Us
Hubungi Kami
Setelah Itu Publikasikan
Lihat hasil nya,  Walaupun tampilan sudah jadi Contact Us belum bisa di gunakan Guys,

Tahap selanjutnya yang harus kalian lakukan Pilih Tata Letak, Tambahkan Widget
Formulir Kontak,
Saran saya untuk penambahan widget nya lebih baik pilih di posisi baagian paling bawah, Untuk memudahkan pencarian kode tahap selanjutnya.
Memasang Contact Form Di Blogspot
Selanjutnya Save/Simpan,
Sebetunya di tahap ini Contact form sudah bisa di gunakan Guys, sayang nya Contact form masih terpampang furgar di tampilan Blog,

Cara untuk menghilangkan tampilan Contact form di blog,
Catatan.
Hanya menghilankan tampilan nya saja Guys, tidak akan merubah pungsi nya,

Yang harus kalian lakukan kembali ke Dasboard, Template  Sesuaikan-Edit HTML
Pilih Edit HTML,

Cari Kode Contact form1, Setelah ketemu hapus bagian yang sudah saya tandai seperti gambar di atas, Sisakan Kode,  
<b:widget id='contactform1 locked=' false'  title='Formulir Kontak'  type='ContactForm ' visible=true '>
<b: incudable id='main'>
kode yang sudah di hapus
       <b: includable> 

Setelah itu Save Template, Dan Langsung saja test Contact form yang sudah kalian buat pada tahap pertama, di bagian Laman baru, dengan mengisi nama, Email, dan teks, Lalu Kirim
Apabila Terkirim dan pesan Email Masuk di Gmail Kita, Itu tandanya Sukses, dan Contact form pun siap di publikasikan di bagian blog Navigasi Link Contact Us' Kontak' Atau Hubungi Kami.

Itu saja Guys Tata cara nya, Semoga bermanfaat,.   Apabila ada salah dalam perkataan, mohon di maafkan.   Untuk kritik dan saran bisa di kirim melalui Contact Us di Atas.

Sekian dan Terima kasih.

Subscribe to receive free email updates:

0 Response to "Memasang Contact Form Di Blogspot"

Post a Comment