» » Cara Mudah Membuat dan Memasang Contact Form di Blog

Cara Mudah Membuat dan Memasang Contact Form di Blog

     Cara Membuat dan Memasang Contact Form ke Blog - Contact Form atau Contact US merupakan sebuah halaman blog yang menyediakan fasilitas berupa kontak form yang diperuntukkan kepada para pengunjung agar dapat menghubungi admin website atau blog yang dia kunjungi. Sebenarnya Contact Form ini hampir sama dengan kotak komentar blog, hanya saja bersifat privasi, yaitu antara admin dan si pengirim pesan saja yang dapat berinteraksi dan mengetahui pesan tersebut.
     Sebagai seseorang yang memiliki website atau blog, Contact Form merupakan hal yang tentunya harus ada pada website atau blog tersebut. Selain agar pengunjung dapat mengirim pesan kepada admin website atau blog, Contact Form juga berfungsi sebagai :
  1. Syarat yang harus dipenuhi untuk mendaftarkan diri menjadi publisher Google Adsense. Jadi, sebelum mendaftar Google Adsense, agan-agan sekalian harus terlebih dahulu memasang Contact Form pada website atau blog agan
  2. Dengan adanya Contact Form, akan membuat wesite atau blog agan menjadi lebih professional
BACA JUGA ARTIKEL TENTANG :
1. Cara Membuat dan Memasang Disclaimer ke Blog
2. Cara Membuat dan Memasang Privacy Policy ke Blog
3. Cara Membuat dan Memasang Term Of Service ke  Blog
4. Cara Membuat dan Memasang Sitemap ke Blog
5. Cara Membuat dan Memasang About Me
     Sebenarnya cara membuat Contact Form dan menghubungkannya pada menu blog sangatlah mudah, namun jika agan berada pada halaman ini, kemungkinan besar agan belum mengerti atau memiliki kendala saat mencoba membuat dan memasang Contact Form pada blog agan. Oleh karena itu, pada kesempatan kali ini, saya akan membahas tentang "Cara Mudah Membuat dan Memasang Contact Form ke Blog". Semoga dengan adanya artikel ini, dapat menyelesaikan permasalahan yang sedang dihadapi oleh agan.

CARA MEMBUAT CONTACT FORM
  1. Copy semua kode yang ada pada kolom di bawah ini
    2. <div id="contact_wrap"> <h3> Hubungi Kami</h3> <form name="contact-form"> <input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" 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="Pesan" rows="5"></textarea> <input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /> <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> </div> <style type="text/css"> /* Menyembunyikan elemen dalam postingan */ #comments, #blog-pager, .breadcrumbs, .post-footer{display:none} </style>
  2. Buka Blogger agan terlebih dahulu
  3. Pilih "Tata Letak" kemudian tambahkan "Gadget" di manapun yang agan inginkan
  4. Pilih "Gadget lainnya", kemudian pilih "Formulir Kontak"
  5. Setelah itu, buatlah laman baru
  6. Kemudian beri judul laman tersebut dengan "Contact Form"
  7. Beralih ke mode "HTML", lalu Copy semua kode yang ada pada kolom di bawah ini
  8. Selanjutnya klik "Pilihan", dan pada menu komentar pembaca pilih "Jangan Bolehkan". Jika sudah klik "Selesai" Lalu "Publikasikan" laman tersebut.

CARA MEMPERCANTIK CONTACT FORM
  1. Copy semua kode yang ada pada kolom di bawah ini
    2.     /* CSS Contact Form Light Theme by BloggerTut.com */
        #ContactForm1{
        display:none;
        }
        #contact_wrap {
        margin: auto;
        width: 321px;
        height: 380px;
        padding: 25px;
        border-radius: 1em;
        border-top:1px solid #dbdbdb;
        border-right:1px solid #b2b2b2;
        border-left:1px solid #dbdbdb;
        border-bottom:1px solid #9d9d9d;
        background-color:#cccccc;
        filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
        background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
        background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
        background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
        background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
        background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
        box-shadow: 1px 1px 5px #ccc;
        }
        #contact_wrap h3{
        color: #e8f3f9;
        font-family:Georgia;
        font-size: 20px;
        font-style:italic;
        font-weight:bold;
        margin: 0 -36px 20px -36px;
        padding: 12px;
        text-align: center;
        text-shadow: 2px 0 0 #1f4962;
        -webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
        -moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
        box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
        background-color: #3689b9;
        position: relative;
        }
        #contact_wrap h3:before {
        content: ' ';
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 10px 0 0 10px;
        border-color: #333 transparent transparent transparent;
        }
        #contact_wrap h3:after {
        content: ' ';
        position: absolute;
        bottom: -10px;
        right: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 10px 10px;
        border-color: transparent transparent transparent #333;
        }
        #ContactForm1_contact-form-name{
        width: 270px;
        height:auto;
        margin: 5px auto;
        padding: 10px 10px 10px 40px;
        background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguihDsMmyiWH3yKGI8aZ29x0MYpuYMAvIYJpBFmlTwNyG9O1oOgy80AR8sVUTfiWiKwekR3ZA5wLPY5-GTosybbibMI-d01vBx9laHJg1t7HDBjEPUQymYILRH11lOgFZWncs3tvV3HEY/s1600/user.png)no-repeat 10px center;
        color:#777;
        border:1px solid #ccc;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
        box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
        }
        #ContactForm1_contact-form-email{
        width: 270px;
        height:auto;
        margin: 5px auto;
        padding: 10px 10px 10px 40px;
        background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbZ91XfhKWmI6qtUqmPcQ1IEZMzu2SUMbAsb6l-2b5uNozXHITzt1gKfhkpHrCKkSv4mdrHTb6iL84tmJhq-iEHs3O5bUufr5HCCTRZxmyLPZenGF9cEoF1OS0cgKYBPuyTW3dAqWbPHk/s1600/pen.png)no-repeat 10px center;
        color:#777;
        border:1px solid #ccc;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
        box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
        }
        #ContactForm1_contact-form-email-message{
        width: 270px;
        height: 150px;
        margin: 5px auto;
        padding: 10px 10px 10px 40px;
        font-family:Arial, sans-serif;
        background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPc8zyly8Om_XgGZ6YrpmijYF2XXbMt9xyLrHa8KG1s5bq2y99OE6KHBpdh3xQmVyjB_-6wNFFd0xU3nuv5u8CXl5Nj-f2WHjK00TRiYFdVy0wwjItus2x3U0DEpnUSgjj1eehozlubiY/s1600/msg2.png)no-repeat 10px 10px;
        color:#777;
        border:1px solid #ccc;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
        -webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
        box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
        }
        #ContactForm1_contact-form-submit {
        width: 95px;
        height: 30px;
        float: right;
        color: #FFF;
        padding: 0;
        cursor:pointer;
        margin: 25px 0 3px 0 0;
        background-color:#005a8a;
        border-radius:4px;
        text-shadow: 1px 0 0 #1f4962;
        -webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
        -moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
        box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
        background-color: #3689b9;
        border:1px solid #194f6d;
        }
        #ContactForm1_contact-form-submit:hover {
        background:#4c9bc9;
        }
        #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
        width: 320px;
        margin-top:35px;
        }
  2. Lalu buka blogger agan
  3. Pilih "Template", kemudian pilih "Edit HTML"
  4. Letakkan kode yang sudah agan Copy, di atas kode ]]></b:skin>
  5. Simpan template

CARA MENGHUBUNGKAN CONTACT FORM KE MENU BLOG

     Biasanya apa bila agan mendownload atau membeli template, maka menu Contact Form telah disediakan oleh si pembuat template. Sehingga kita hanya perlu merubah sedikit pengaturan template tersebut, agar Contact Form dapat berfungsi. Caranya sangat mudah sekali, yaitu :
  1. Jika laman Contact Form sudah di buat, maka klik "Lihat"
  2. Agan akan dibawa ke halaman baru, "Copy" alamat yang ada pada URL Bar dari halaman Contact Form tersebut 
  3. Buka kembali "Blogger" agan
  4. Pilih "Template", lalu pilih "Edit HTML"
  5. Tekan CTRL + F, maka akan muncul kotak kecil. Lalu tulis di kotak kecil tersebut "Contact Form", lalu tekan Enter. Jika ketemu, maka akan ditandai dengan tulisan Contact Form yang berwarna kuning. Pada barisan tersebut, ganti tanda # dengan alamat Contact Form yang sudah agan Copy
  6. Simpan template. Jika semua langkah dilakukan dengan benar, maka hasilnya adalah seperti gambar berikut :

#CATATAN
  • Biasanya masing-masing template tidaklah sama dalam membuat menu ini, biasanya menggunakan Contact US, Hubungi Kami, Contact Form, dan sebagainya. Silahkan sesuaikan dengan template agan masing-masing.
  • Apabila agan menggunakan template dari hasil karya orang lain, entah hasil download atau membeli. Biasanya pada template tersebut telah tersedia menu Contact Form. Dengan adanya kelebihan template tersebut, kita hanya perlu merubah tanda # saja dengan alamat dari Contact Form kita. Namun jika agan masih menggunakan template bawaan dari blogger, maka agan harus terlebih dahulu membuat menu Contact Form tersebut. Jadi demi kemudahan agan, saya merekomendasikan agar agan membeli template atau download template secara gratis terlebih dahulu. Hal ini bertujuan agar agan tidak repot lagi membuat menu Contact Form tersebut. Akan tetapi pilihan tersebut tetap kembali pada agan

#ENDING
  • Demikianlah ulasan mengenai cara membuat dan memasang Contact Form di blogspot. Semoga dengan adanya artikel yang saya tulis ini dapat bermanfaat dan membantu para blogger sekalian yang sedang mencari cara bagaimana membuat dan memasang Contact Form di blog masing-masing
  • Sebelum menutup halaman tentang cara mudah membuat dan memasang Contact Form pada blog, terlebih dahulu klik bagikan agar sahabat blogger yang juga binggung tentang cara membuat dan memasang Contact Form dapat terbantu.
  • Jika artikel ini bermanfaat untuk agan, maka berikanlah like atau jempol sebagai penghargaan kepada saya dan tinggalkanlah komentar atau saran setiap kali agan berkunjung ke blog saya. ^_^
    Share on Facebook
    Share on Twitter
    Share on Google+
    Share on LinkedIn

    Subscribe to receive free email updates:

    1 Response to " Cara Mudah Membuat dan Memasang Contact Form di Blog "

    Saya sangat senang sekali, apabila agan yang sedang berkunjung ke blog saya, memberikan komentar pada setiap artikel yang telah agan baca. Berikanlah komentar dengan bahasa yang mudah dimengerti dan jangan meninggal link hidup atau mati (SPAM)

    Subscribe to: Post Comments ( Atom )