Skip to main content
Home Tips dan Trik Cara Gampang Menciptakan Dan Memasang Contact Form Di Blog

Cara Gampang Menciptakan 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 kemudahan berupa kontak form yang diperuntukkan kepada para pengunjung semoga sanggup menghubungi admin website atau blog yang beliau kunjungi. Sebenarnya Contact Form ini hampir sama dengan kotak komentar blog, hanya saja bersifat privasi, yaitu antara admin dan si pengirim pesan saja yang sanggup berinteraksi dan mengetahui pesan tersebut.
     Sebagai seseorang yang mempunyai website atau blog, Contact Form merupakan hal yang tentunya harus ada pada website atau blog tersebut. Selain semoga pengunjung sanggup 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 menciptakan 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 menciptakan Contact Form dan menghubungkannya pada sajian blog sangatlah mudah, namun jikalau agan berada pada halaman ini, kemungkinan besar agan belum mengerti atau mempunyai hambatan dikala mencoba menciptakan dan memasang Contact Form pada blog agan. Oleh alasannya yakni itu, pada kesempatan kali ini, saya akan membahas wacana "Cara Praktis Membuat dan Memasang Contact Form ke Blog". Semoga dengan adanya artikel ini, sanggup menuntaskan permasalahan yang sedang dihadapi oleh agan.

CARA MEMBUAT CONTACT FORM
  1. Copy semua aba-aba 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", kemudian Copy semua aba-aba yang ada pada kolom di bawah ini
  8. Selanjutnya klik "Pilihan", dan pada sajian komentar pembaca pilih "Jangan Bolehkan". Jika sudah klik "Selesai" Lalu "Publikasikan" laman tersebut.

CARA MEMPERCANTIK CONTACT FORM
  1. Copy semua aba-aba 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/AVvXsEji-GqPc5OJZjEAqe4GFRFbe8cUF3YBGMIc-eYB1b6kzfsQvgXOMVrMlDvmOaSG_n5K4F0TBKZ33kVvn-5RbJwckOuWMmjcFak3Ml2LCsU5HapZYMJKB2bv-4NvO4OnhMy-1QdGKnc7l1E/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/AVvXsEjzgABeBXP1ok94CNF-VQi3i1zPjf5GO7q2XW-GVHEqQLHPwLdM7IA4lm5KSVsFPMYmzeyXJYB-21S0ngrc4SCMVpYhXV4o6zastHBDmg1NUsVo3OzKoEgMZ55L5siSAnpS0SG_6Rj49iU/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/AVvXsEjD8KOaf84q_NBlTiHiU9IuEndqUUP21FArbrdtKrGMmkbydh6G7UFeqTsaOHOYBS-CC2LyUVI7gzgZlg7R1QEp4XFgVaq41ouTIHoona1GCtY4tXW-ux17VU1SBteBr8lTUug70aFPzYQ/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 aba-aba yang sudah agan Copy, di atas aba-aba ]]></b:skin>
  5. Simpan template

CARA MENGHUBUNGKAN CONTACT FORM KE MENU BLOG

     Biasanya apa bila agan mendownload atau membeli template, maka sajian Contact Form telah disediakan oleh si pembuat template. Sehingga kita hanya perlu merubah sedikit pengaturan template tersebut, semoga Contact Form sanggup berfungsi. Caranya sangat gampang 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", kemudian pilih "Edit HTML"
  5. Tekan CTRL + F, maka akan muncul kotak kecil. Lalu tulis di kotak kecil tersebut "Contact Form", kemudian tekan Enter. Jika ketemu, maka akan ditandai dengan goresan pena 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 balasannya yakni ibarat gambar berikut :

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

#ENDING
  • Demikianlah ulasan mengenai cara menciptakan dan memasang Contact Form di blogspot. Semoga dengan adanya artikel yang saya tulis ini sanggup bermanfaat dan membantu para blogger sekalian yang sedang mencari cara bagaimana menciptakan dan memasang Contact Form di blog masing-masing
  • Sebelum menutup halaman wacana cara gampang menciptakan dan memasang Contact Form pada blog, terlebih dahulu klik bagikan semoga sobat blogger yang juga binggung wacana cara menciptakan dan memasang Contact Form sanggup 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. ^_^

    You Might Also Like:

    Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
    Buka Komentar
    Tutup Komentar