Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Memasang Widget Contact Form Blogger pada Halaman Statis

Cara memasang widget Contact Form Blogger pada halaman statis atau postingan.
Widget Contact Form Blogger - Pada artikel sebelumnya saya telah menjelaskan bagaimana Cara Memasang Widget Contact Form Blogger, akan tetapi penempatan Contact Form pada widget ini kayaknya kurang disukai, dan lebih memilih menempatkan contact form pada halaman statis atau halaman posting.menambahkan contact form pada halaman statis

Sekarang saya akan menjelaskan bagaimana memasang Widget Contact Form Blogger ini pada halaman statis atau pada postingan. Penampakan contact form ini seperti screenshoot di bawah ini :

menambahkan contact form pada halaman statis


Langkah 1 : Tambahkan Widget Contact Form Blogger

Untuk menambahkannya, masuk ke Setelan ► Tata Letak ► Tambahkan Gadget ► Gadget Lainnya ► Formulir Kontak

menambahkan contact form pada halaman statis

Untuk sementara biarkan Contact Form ada di widget / sidebar.

Langkah 2 : Tambahkan Halaman

Untuk menambahkannya, masuk ke Laman ► Laman baru ► Laman kosong. Tambahkan kode dibawah ini pada mode HTML bukan Compose
<form name="contact-form">
<p></p>
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<p></p>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Isi Pesan <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<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>

<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Pada Menu Pilihan, pilih Tekan "Enter" untuk baris baru.

menambahkan contact form pada halaman statis

Klik Publikasikan.

Langkah 3 : Meyembunyikan Widget dan Menambahkan CSS

Langkah ini adalah untuk menyembunyikan contact form yang ada di sidebar dan memodifikasi tampilan contact form. Tambahkan kode ini di atas ]]></b:skin>
/* CSS Contact Form */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}

Semoga bermanfaat...

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

112 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. Nah sudah ada tutorial lengkap nya di postingan ini! Saya juga tadinya ngarep pengen bikin contact form nya di page baru dan bukan di sidebar! Nih tutorial si akang bener2 oke punya. Recommended seller dah.. Hehehe | Hatur nuhun kang! Sok lajengkeun ngablog na, sing samangat we. :)
    1. wkwkwkkw.... nuhun kang, kos kaskus wae ateuh icalan :)
  2. Alhamdulillah kang. . . saya sudah pasang dihalaman statisnya..makasih tutornya kang :D
    1. Maav kang,mau nanya kalo kontak form disidebar dihapus,bisa gk dipasang kode css diatas..hehe
    2. ga bisa, di sembunyikan saja.... kalaupun dihapus form masih muncul tapi tidak akan berfungsi
  3. ohh ternyata pada pilihan di laman postingan banyak pilihan.. cuma saya belum paham cara pemakainnya :) #maklum.
    1. hehehe... gampang ko jeng.. kan udah ada penjelasannya di atas
  4. Kalau hanya disembunyikan masih memberatkan loading tidak kang
    1. Tidak... sangatkeci sekali efeknya ko
  5. wah ini lengkap banget kang, saya ada rencana mau pasang juga kang, saya simpan dulu tutorialnya, haturnuhun kang...
    1. sami sami kang.... kade disimpen bisi ku beurit :)
    2. kang muroi kayaknya sudah banyak banget simpanannya yah kang,he...he...saya masih di pelajari dulu kang,nanti kalau sudah bisa saya pasang makasih infonya yah kang.
  6. mantepp ni
  7. ane cba kang haturnuhun tutorna kang
    1. silahkan... sami2
  8. terimakasih mas tutorial lengkap nyaa nih ,, bisa buat contact person yaa mas untuk ngunjung blog kita.
    1. iya.. bagi yang mau contact kita jadi gampang
  9. sejenis dengan yang ada di bloggeritems.com :D
    sekarang udah make thread comment hack ni.. :-d
    1. gitu ya sob... belum ngunjungin lagi bloggeritems
  10. delete sj widget kntak form kayak ginih, ah gmn c baca postingan guena ieu teh =D
    [img]http://3.bp.blogspot.com/-i_aSI_fKS10/UZVKscbjFKI/AAAAAAAACtw/r_9ZgJ4XjDk/s1600/beben-koben.png[/img]
    1. ngapain dihapus, kan udah disembunyiin kang... dihapus juga tetep tampil di Tata Letak :D
  11. Kalau gunakan default widget contact formnya masih tetap bagus Kang :)
    1. Emang bagus ko sob... kan ini hanya opsi, tinggal milih
  12. terus kang isi pesan terus apakah akan masuk ke inbox email kita ?
    1. iya sob.. email yang dipake blogger
  13. Bang, itu nanti terkirim ke email kita???
    Minta tutorial menghilangkan link otomatis dari kotak komentar donk |o|
    1. betul sob.. ditunggu aja tutorialnya :)
  14. Owh ternyata kalau sudah ada yang ngasih tau tutorna mah jadi serasa mudah ya kang hehe
    nhun kang ismet ah
    1. pasti sob.. jadi gusah ngacak2 lagi :)
  15. Mantab kang ismet... saya coba langsung ces pleng....
    1. oke sob... congrats deh kalau berhasil
  16. Mangstab.... cek yang lebih stylish di blog saya
    1. oke sob... mangstab sekaleeee....
  17. ini asli keren area komennya
    1. tengkyu sob... :)
  18. Mantef kang |o| So Clean.
    saya suka :D
    BTW, Thread Commentnya keren kang :o

    Aqb Blog
    1. tengkyu sob... :)
  19. Halaman Statis itu maksudnya apa'-' Homepage?
    1. bukan, halaman aja sob.. di dashboard ada Laman.. tambah lama, biasanya jadinya seperti ini http://namablog.blogspot.com/p/nama-halaman.html
  20. wah, tutor gini ada juga yah di blogspot, biasa nya saja pakai dari EmailMe, tapi klo dari petunjuk akang di atas tadi, bisa gak kita bikin kolom kolom nya sesuai kebutuhan kita kang ??????
    terus itu nanti di terima nya ke email kita ??? mirip model EmailMe gitu kang ????
    mohon pencerrhannya yah kang ???

    salam kenal yah kang
    David Raja
    www.DavidRaja.com
    1. Kolom2nya masih standar sob, cuma 3 gitu... Nama, Email, sama pesan... konsepnya sih sama, akan masuk ke Email kita.
  21. om mau request tutorial dong : gimana cara membuat kode biasa jadi bewarna seperti yang anda di blockquote ?. Secepatnya ya :D
    1. kan udah ada tutorialnya -> http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html dan http://blog.kangismet.net/2013/05/highlightjs-syntaxhighlighter-untuk.html
  22. owh begini ya caranya,,kemarin saya coba2 pasang widget tersebut namun cuman bisa di sidebar aja :))
    1. iya jeng... silahkan dicoba
  23. met siang kang, mf kang ane mau tanya kenapa form commentar di blog akang gk bisa tampil klo di akses lewat opera mini.
    1. thanks informasinya.. saya belum tau malah... nanti saya liat masalahnya...
  24. Akhirnya saya tergoda juga dengan kontak blogger biar lebih ringan dan unlimited hehehe...
    Makasih tutornya kang ...berhasil.
    Tapi kalau dicoba pakai email sendiri atau kita lagi login kok ga ngepek...apa emang begitu kang?
    1. coba aja emailnya ngarang kang.... :D
  25. Kang, saya teh bingung, sebenernya hasil dari kontak itu dikemanain sih? Di email atau ke manain? :(
    1. dikirim ke email kita..
  26. nuhun kang :)
  27. Terima kasih kang, sudah saya coba dan berhasil!!! |o|
    1. congrats deh sob :)
  28. Saya mau nanya kang.. Terus misalkan ada yang mengirim. Pesannya terkirim kemana?
    1. ke email sob...
  29. Woyohhh mantep kang tutorial2 disini :D

    Salam kenal kang dari http://ompaps.blogspot.com
    1. sama2 sob... salam kenal juga
  30. Gan cara menyembunyikan coment di kontak form bgaimana ?
    1. Kan ada pengaturannya di samping, ketika membuat atau edit halaman
  31. kang bagaimana cara menyembunyikan jumlah komentar di bawah judul posting di halaman statis ? thx sesebelumnya.
    1. tergantung template sob... soalnya beda2 kode...
      kalau kode sudah ketemu, gunakan tag kondisional, misalkan kode CSS untuk label, author, dan komentar menggunakan .post-meta, maka penggunaan tag kondisionalnya seperti ini :
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
      <style>
      .post-meta{display:none}
      </style>
      </b:if>
  32. Oke nanti ane coba :) kang
  33. nah pesan yang terkirim itu terkirim kemana ya mas ?
    saya cek di gmail gan ada tuh :(
  34. owya ,setelah cek & ricek cara nambahin mailto di html nya gmn gan??
    trims
    1. paling email penerima ditambah gmailnya sob...soalnya ini default blogger, bukan php
  35. dimana dilihat kalau ada yg masuk
  36. Tankiyu tutornya Kang Is,ijin sedot ilmunya...yeh....
  37. suwun njih Kang , info bermanfaat , izin pakai script nya :D
  38. ko mas pas`saya pasang di blog saya ga work ya?
    saya klik ( kirim ) mlah diem aja ga k kirim..!!
    1. widget udah dibuat? kalau udah dibuat, dihapus lagi ga?
  39. udh mas`engga di hapus engga work...!!
    udh saya hapus juga tetap tidak work
  40. Kang..tanya kalo gak ada kode ]]> dari edit HTML Template gimana??
    Di tempat sy gak ada...
    Pencerahannya gan...
    1. untuk masukin CSS di atas </style> aja
  41. kang, saya mau tanya? kalau contact form itu pesan orang masuknya ke mana yah??
    [ saya ngak pernah pelajarin contact form ]
    - apakah masuknya di Gmail???
  42. kok ga bisa ngirim mas ya ?
  43. Cara di atas udah aku coba kang, cuma pingin agar tampilannya center gimana kang? udah di coba oatak atik tp ga sampe ilmunya,hehehe
  44. terima kasih kang tutorialnya :)
  45. Thanks Kang, saya sudah coba dan berhasil :)
    1. ok deh... congrats sob :-bd
  46. nuhun pisan kang berhasil di blog saya
  47. Kang, pengaturan CSS di blog ane berantakan yaakk,,, apa yang salah?
    http://beli.tipehandphone.com/p/halaman-pemesanan.html
  48. wah makasih banget kang... buat informasi nya

    jgn lupa ke sini yah http://harafimulki.blogspot.com
  49. Terimakasih kang, tutorialnya bagus,,, ijin share ulang....
    http://www.masrud.web.id/
  50. maap kang.. setelah saya ikuti tutorial nya sampai selesai. kok prosesnya kirimnya ga ada konformasi kalo sudah terkirim..
  51. Habis di post nanti mereka send messagenya munculnya dimana nih?
    btw makasih infonya gan
    visit juga ya :)

    http://belajaringgrisonlinee.blogspot.com/
  52. kang saya ikutin cara di atas kaya tidak bekerja kontak form nya tombol kirim tak bekerja
  53. iya sama saya juga mengalaminya, bagaimana ini solusinya kang
    http://www.cahpare.com/p/contact-me.html
  54. Thanks gan, berfungsi baik :) maju terus gan

    Salam,
    Denny | http://indonesiajobhunter.blogspot.com/
  55. Sudah terpasang kang.
    Tapi kontak form nya tidak berfungsi. Jika klik tombol kirim tidak ada perubahan.
    Mohon pencerahannya kang .
  56. Hal yang tidak pernah terbayankan kini menjadi kenyataan dengan keluargaku,,,untuk MBAH.RINGGO kami ucapkan banyak terimakasih karna berkat bantuannya ALHAMDULILLAH keluarga kami bisa lepas dari hutang dan masalah,karna nomor “GHOIB”untuk pasang togel,hasil ritual MBAH RINGGO meman benar2 merubah nasib kami hanya sekejap,dan disitulah aku berkesempatan kumpulkan uang untuk buka usaha kembali,karna baik rumah sudah disita,,warung makan jg sudah bangkrut,,tapi itu semua aku masih tetap bertahan hidup dengan anak istriku,,walau cuma kontrak tapi aku tetap bersabar dan akhirnya MBAH RINGGO lah yang bisa merubah nasib kami..MBAH RINGGO orang paling bersejarah kepada keluarga saya…!!! Kepada teman2 yang di lilit hutang dan ingin merubah nasib baik dari pada sekaran HBG: 0852~0521~3777-MBAH RINGGO,dengan penuh harapan INSYAH ALLAH pasti tercapai dan sudah terbukti.














    Hal yang tidak pernah terbayankan kini menjadi kenyataan dengan keluargaku,,,untuk MBAH.RINGGO kami ucapkan banyak terimakasih ka…
  57. wah mantap min , udah terlaksana dgn benar :)
  58. sangat membantu, makasih banget kang... buat informasi nya

    jgn lupa kunbalnya yah http://esmartgadget-shopping.blogspot.com
  59. tolong gan. saya sudah buat tp kotak isi pesan terlalu ke kanan jadi tidak sejajar dengan yang di atas kotak nama dan nama email, tolong dbalas gan
  60. KAng contact form yang seperti ini kok gak bisa lagi ya, saya coba di blog saya dengan cara ini gak bisa terkirim, di demonya juga gitu kang. Mohon di Update cara lain, thanks
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.