Cara Pasang Contact Form Di Blogspot Terbaru

Bismillahirrahmanirrahim.. sobat blogger Contact Form adalah sebuah cara atau fungsi bagi para pembaca untuk dapat bisa menghubungi si pemilik Blog atau Website tersebut melalui berbagai jenis baik dengan sms, email, invoice, dan semacamnya dan Contact Form juga berfungsi dapat memudahkan si pembaca dapat bertanya atau pun memberi saran, dan kritik semacamnya sehingga si pembaca akan merasa puas dan mempercayai dengan layanan tersebut bahwa si pemilik blog bukan hanya sharing demi ingin dikunjungi saja ataupun sekedar ingin terindex oleh google tapi juga melayani berbagai keluhan dan masalah terhadap si pembaca tersebut maka dari itu sangat penting juga bagi para sobat blogger untuk memasangnya dan biasanya Contact Form di beri judul "Hubungi kami", "Contact Us" dan sering juga dipasang di bawah footer content ataupun seperti Menu diatas seperti yang saya pasang nah kebetulan kali ini saya akan memberikan Tutorial dan langkah - langkah bagaimana cara memasang Contact Form di blogger. Berikut seperti ini contohnya :
avistauser.blogspot.com

Caranya



1. Langkah awal sobat harus login terlebih dahulu ke blogger sobat dan kemudian setelah sobat selesai login ke akun blogger sobat lalu sobat jangan lupa harus terlebih dahulu memasang widget Contact Form di blog sobat caranya Tata Letak> Add Gadget/Widget> Gadget lainnya/More Gadget> pilih Contact Form bebas sobat mau pasang widget tersebut dimana saja.


2. Setelah selesai langkah pertama sobat tinggal masuk ke menu Theme> Edit/HTML> cari kode Contact Form caranya (Ctrl+F), ketik Contact Form setelah selesai sobat menemukan kata kuncinya sobat akan melihat seperti ini gambarannya :

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'> <b:includable id='main'> Hapus semua kode di area sini </b:includable> </b:widget> </b:section>
Bila sobat kurang mengerti coba sobat perhatikan seperti gambar dibawah ini. "kode yang harus dihapus"
avistauser.blogspot.com

avistauser.blogspot.com

Nah kode yang harus dihapus oleh sobat yaitu kode dari no 2664-2692 nah itu yang dimaksud "Hapus semua kode di area sini"

3. Ok langsung lanjut ke langkah berikutnya yaitu sobat tinggal mensave template sobat.

4. Setelah selesai disave tinggal sobat ceritanya ingin menyimpannya tidak di widget sobat, sobat ingin menyimpannya dilaman Menu seperti gambar saya yang di awal tersebut caranya?

5. Sobat pergi ke Page> New Page> Kasih judul Contact setelah anda buat Page Baru atau Laman baru sobat jangan lupa mode nya ganti ke mode HTML bukan Compose kemudian Copas kode berikut yang saya berikan:
<div class="caraciri-contact-form">
<div class="form">
<!-- Custom Contact Form By Caraciri start -->
    <br />
<div class="caraciri-contact-title">
Isi Formulir
    </div>
<form 0px="" argin:="" nam="" padding:="">
<!-- Name 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 />
<!-- Message 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 caraciri-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 caraciri -->
    </div>
</div>
<style>
    .caraciri-contact-form { background:#fff; box-shadow:-1px 2px 3px #ddd; font:12px arial; width:100%; max-width:320px; margin:20px auto; padding:15px; border:2px solid #ddd; }
    .caraciri-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/AVvXsEgaUg-k-RlgV-xZv9hBoV3oGLT8HwNZ3oh3kuuRCGd-Exz50JSPlZx5PnlucfpcfhbIFVuiiaTi1kfoVO-TUZnL9rAM3RSLMS4sbJYSkr1FJtx3NdqigStfISauSeIrJjaKoZtacELuQ-I/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/AVvXsEjQOWAAMqo5RD0VMZ24KLfaiiJ0WTJytQLEbDgzb2D-P4JOgxcNdagUPCnY7hSWV9lhhq-K2MCxJaTf1wcWGrdmUKuCY_LNHISgxxCmWXrFz8PkvNpqGyWSpSQwmImI7E5gIzO8knqXVO0/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; }
    .caraciri-button-color { color:#fef4e9; border:solid 1px #da7c0c; background:#f78d1d; }
    .caraciri-button-color:hover { background:#f47c20; }
    .caraciri-button-color:active { color:#fcd3a5; }
    .contact-form-name { background:#F3F3F3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaUg-k-RlgV-xZv9hBoV3oGLT8HwNZ3oh3kuuRCGd-Exz50JSPlZx5PnlucfpcfhbIFVuiiaTi1kfoVO-TUZnL9rAM3RSLMS4sbJYSkr1FJtx3NdqigStfISauSeIrJjaKoZtacELuQ-I/s320/name.png) no-repeat 7px 6px; padding:15px 15px 15px 28px; }
    </style>

Saran dari saya ketika sobat mempastekan kode berikut ke dalam mode HTML jangan diganti ke Compose karena kemungkinan akan merusak tampilan Contact Formnya jadi disarankan jangan diganti ke mode Compose ok!

6. Langkah terakhir sobat tinggal publish ke blog sobat dan lihat hasilnya, lalu setelah berhasil, Copas link laman Contact tersebut di EditHtml dan simpan linknya di kode script Menu yang disediakan untuk memasang linknya 

Selesai sudah tutorial sekarang dari saya semoga artikel saya dapat menjadi bermanfaat bagi sobat blogger semua dan juga saya, dan juga mungkin dapat dimengerti dari tutorial yang saya berikan tersebut apabila tidak dimengerti bisa kirim keluhan atau masalahnya di Contact Form yang saya berikan di menu atas header.
Wassalamualaikum Warrahmatullah

Post a Comment

14 Comments

  1. Terima kasih gan informasi nya, saya lagi membutuhkan tutorial seperti ini

    ReplyDelete
  2. mancap banget, makasih gan tutorialnya, ijin bookmark gan

    ReplyDelete
  3. saya bookmark dulu gan, sapa tau butuh :D

    ReplyDelete
  4. yang tulisan cara-cirinya bisa dihilangkan nggak?

    ReplyDelete
    Replies
    1. Terserah agan mau hapus juga gpp tapi kalo ane mhk gaperlu lah, soalnya itu scriptnya dari blog "cara ciri" jadi kalo ane mhk lebih baik menghargai sumber gan :-)

      Delete
  5. Replies
    1. Supaya semua orang dapat bisa ngehubungin web kita, apabila ada saran dan kritikan...

      Delete

Berkomentarlah Dengan Baik

Jangan Berbuat Tidak Sopan

Otomatis Akan Saya Spam

#Dilarang Pasang Link Aktif Apabila Mau Pasang Link Blog Sobat bisa dengan mengubah opsi commentnya ke NAMA/URL kemudian pasang nama dan URL web sobat, yang relevan pasti saya kunjung balik