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...

117 komentar

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. :)

Balas

Alhamdulillah kang. . . saya sudah pasang dihalaman statisnya..makasih tutornya kang :D

Balas

Maav kang,mau nanya kalo kontak form disidebar dihapus,bisa gk dipasang kode css diatas..hehe

Balas

ga bisa, di sembunyikan saja.... kalaupun dihapus form masih muncul tapi tidak akan berfungsi

Balas

wkwkwkkw.... nuhun kang, kos kaskus wae ateuh icalan :)

Balas

ohh ternyata pada pilihan di laman postingan banyak pilihan.. cuma saya belum paham cara pemakainnya :) #maklum.

Balas

hehehe... gampang ko jeng.. kan udah ada penjelasannya di atas

Balas

Kalau hanya disembunyikan masih memberatkan loading tidak kang

Balas

Tidak... sangatkeci sekali efeknya ko

Balas

wah ini lengkap banget kang, saya ada rencana mau pasang juga kang, saya simpan dulu tutorialnya, haturnuhun kang...

Balas

ane cba kang haturnuhun tutorna kang

Balas

terimakasih mas tutorial lengkap nyaa nih ,, bisa buat contact person yaa mas untuk ngunjung blog kita.

Balas

sami sami kang.... kade disimpen bisi ku beurit :)

Balas

iya.. bagi yang mau contact kita jadi gampang

Balas

sejenis dengan yang ada di bloggeritems.com :D
sekarang udah make thread comment hack ni.. :-d

Balas

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]

Balas

Kalau gunakan default widget contact formnya masih tetap bagus Kang :)

Balas

terus kang isi pesan terus apakah akan masuk ke inbox email kita ?

Balas

Bang, itu nanti terkirim ke email kita???
Minta tutorial menghilangkan link otomatis dari kotak komentar donk |o|

Balas

Emang bagus ko sob... kan ini hanya opsi, tinggal milih

Balas

iya sob.. email yang dipake blogger

Balas

betul sob.. ditunggu aja tutorialnya :)

Balas

ngapain dihapus, kan udah disembunyiin kang... dihapus juga tetep tampil di Tata Letak :D

Balas

gitu ya sob... belum ngunjungin lagi bloggeritems

Balas

Owh ternyata kalau sudah ada yang ngasih tau tutorna mah jadi serasa mudah ya kang hehe
nhun kang ismet ah

Balas

Mantab kang ismet... saya coba langsung ces pleng....

Balas

pasti sob.. jadi gusah ngacak2 lagi :)

Balas

oke sob... congrats deh kalau berhasil

Balas

betul kang... biar ga ribet, ga usah di hapus

Balas

Mangstab.... cek yang lebih stylish di blog saya

Balas

ini asli keren area komennya

Balas

oke sob... mangstab sekaleeee....

Balas

enyak |o|
tidak bisa mungkin karena unik id nya dah di patok ma blogger kali bos lebar-lebaran tea :-d

Balas

tapi nu ieu mah tiasa pake CSS kang

Balas

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.

Balas

hahahaha..... disimpen terus tutorialnya ya :D

Balas

Mantef kang |o| So Clean.
saya suka :D
BTW, Thread Commentnya keren kang :o

Aqb Blog

Balas

Halaman Statis itu maksudnya apa'-' Homepage?

Balas

bukan, halaman aja sob.. di dashboard ada Laman.. tambah lama, biasanya jadinya seperti ini http://namablog.blogspot.com/p/nama-halaman.html

Balas

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

Balas

Kolom2nya masih standar sob, cuma 3 gitu... Nama, Email, sama pesan... konsepnya sih sama, akan masuk ke Email kita.

Balas

Kalo mau bikin Fomr Online mirip EmailMe, gimana yah Kang ????
kira kira bisa kasih rekomendasi ke saya gk Kang ???

Balas

paling bikin pake php sob... bisa pake hosting googlecode ko

Balas

udah ada tutor dari akang belum ????

Balas

om mau request tutorial dong : gimana cara membuat kode biasa jadi bewarna seperti yang anda di blockquote ?. Secepatnya ya :D

Balas

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

Balas

kalau pake php belum sob, biasanya pake hosting sendiri

Balas

owh begini ya caranya,,kemarin saya coba2 pasang widget tersebut namun cuman bisa di sidebar aja :))

Balas

met siang kang, mf kang ane mau tanya kenapa form commentar di blog akang gk bisa tampil klo di akses lewat opera mini.

Balas

thanks informasinya.. saya belum tau malah... nanti saya liat masalahnya...

Balas

iya jeng... silahkan dicoba

Balas

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?

Balas

coba aja emailnya ngarang kang.... :D

Balas

widgetnya udah dipasang sob? soalnya kalau dihilangkan jadi g ngefek.... saya coba kayaknya blom aktif... biasanya kalo aktif, tanpa isi apapun trus kita klik 'kirim' ada notif sob... 'alamat email harus valid'

Balas

Widgetnya saya pasang seperti tutor di atas atau mungkin karena widged js blogger saya nonaktifkan ya kang (untuk validasi html5) hadeuueueh...

Balas

Kang, saya teh bingung, sebenernya hasil dari kontak itu dikemanain sih? Di email atau ke manain? :(

Balas

Terima kasih kang, sudah saya coba dan berhasil!!! |o|

Balas

Saya mau nanya kang.. Terus misalkan ada yang mengirim. Pesannya terkirim kemana?

Balas

Woyohhh mantep kang tutorial2 disini :D

Salam kenal kang dari http://ompaps.blogspot.com

Balas

sama2 sob... salam kenal juga

Balas

Gan cara menyembunyikan coment di kontak form bgaimana ?

Balas

kang bagaimana cara menyembunyikan jumlah komentar di bawah judul posting di halaman statis ? thx sesebelumnya.

Balas

Kan ada pengaturannya di samping, ketika membuat atau edit halaman

Balas

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>

Balas

Oke nanti ane coba :) kang

Balas

nah pesan yang terkirim itu terkirim kemana ya mas ?
saya cek di gmail gan ada tuh :(

Balas

owya ,setelah cek & ricek cara nambahin mailto di html nya gmn gan??
trims

Balas

paling email penerima ditambah gmailnya sob...soalnya ini default blogger, bukan php

Balas

Tankiyu tutornya Kang Is,ijin sedot ilmunya...yeh....

Balas

gpp lah, saya sudah coba pakai ini, dan hasilnya cukup mewakilkan keinginan saya.
saya juga sudah check di email, langsung masuk di inbox, di TAB Social.
thanks banget tutornya.

Balas

suwun njih Kang , info bermanfaat , izin pakai script nya :D

Balas

masbro, tempat ane ko gak masuk ke inbox mail ya? mohon petunjuk

Balas

coba liat folder jejaring sosial

Balas

ko mas pas`saya pasang di blog saya ga work ya?
saya klik ( kirim ) mlah diem aja ga k kirim..!!

Balas

widget udah dibuat? kalau udah dibuat, dihapus lagi ga?

Balas

udh mas`engga di hapus engga work...!!
udh saya hapus juga tetap tidak work

Balas

Kang..tanya kalo gak ada kode ]]> dari edit HTML Template gimana??
Di tempat sy gak ada...
Pencerahannya gan...

Balas

untuk masukin CSS di atas </style> aja

Balas

kang, saya mau tanya? kalau contact form itu pesan orang masuknya ke mana yah??
[ saya ngak pernah pelajarin contact form ]
- apakah masuknya di Gmail???

Balas

TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo meyambuk tahun baru Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
Ready Stock! Apple iPhone 5 Rp.2,700.000
Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
Ready Stock! Blackberry Curve 9320.Rp.700.000,-
Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000
Ready Stock ! BlackBerry Curve 9360 Apollo Rp.950.000,-

Balas

GEBEAR HARGA PROMO TERPERCAYA DI DINA SHOP
Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
BERMINAT HUB-SMS:085-77966-5033 ATAU KLIK WEBSET RESMI KAMI http://dina-shop7.blogspot.com/.

Ready Stock!
BlackBerry 9380 Orlando - Black.Rp.900.000,-
Ready Stock!
BlackBerry Curve 8520 Gemini.Rp.500.000,-
Ready Stock!
BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
Ready Stock!
Blackberry Curve 9320.Rp.700.000,-
Ready Stock!
Samsung Galaxy Note 10.1.Rp.2,500.000.
Ready Stock!
Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
Ready Stock!
Samsung Galaxy S III Mini.Rp.1.800.000.
Ready Stock!
Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
Ready Stock!
Samsung Galaxy Note N7100.Rp.2.500.000.
Ready Stock!
Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
Ready Stock!
Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000,-
Ready Stock!
Nokia Lumia 800 - Matt Black.Rp.1.700.000,-
Ready Stock!
Nokia Lumia-710-whiteRp. 900.000,-
Ready Stock!
Nokia C2-06 Touch & Type -Dual GSM-Rp.450.000,-
Ready Stock!
Nokia Lumia 710 - Black.Rp. 900.000,-
Ready Stock!
Apple iPhone 4S 16GB (dari XL) - Black.Rp.1.200.000,-
Ready Stock!
Apple iPhone 4S 16GB (dari Telkomsel).Rp.1.200.000,-
Ready Stock!
Apple iPod Touch 4 Gen 8GB.Rp.700.000.
Ready Stock!
APPLE iPod Nano 8GB - Pink.Rp.500.000,-
Ready Stock!
Acer Aspire 4755G Core i5 2430 Linux Blue.Rp 1.700.000.
Ready Stock!
Acer Aspire One AOD270 10.1.-Rp. 1.000.000,-
Ready Stock!
Acer TravelMate TM8481-2462G32.Rp. 1.400.000
Ready Stock!
Acer ICONIA Tab W500 10.1" Tablets Notebook.Rp. 1.100.000,-
Ready Stock!
Nikon D7000 kit 18-105mm.Rp.1.700.000.
Ready Stock!
Nikon D90 Kit 18-105mm Vr.Rp 1.300.000.
Ready Stock!
Nikon Coolpix L 120 Red.Rp. 900.000
Ready Stock!
Nikon Coolpix P 500 Black.Rp 1.000.000

Balas

Cara di atas udah aku coba kang, cuma pingin agar tampilannya center gimana kang? udah di coba oatak atik tp ga sampe ilmunya,hehehe

Balas

jangan promo2 gitu lah mbak .. kalau mau hubungi pemilik situs minta pasang iklan berapa ada paling murah juga mbak

Balas
Komentar ini telah dihapus oleh pengarang.

hadeh udah tau kang ismet banyak aturan
masih aja dilanggar.
nasib loe lah ....
kalo yang ginian gw paling demen koment nya

Balas

terima kasih kang tutorialnya :)

Balas

Thanks Kang, saya sudah coba dan berhasil :)

Balas

ok deh... congrats sob :-bd

Balas

nuhun pisan kang berhasil di blog saya

Balas

Kang, pengaturan CSS di blog ane berantakan yaakk,,, apa yang salah?
http://beli.tipehandphone.com/p/halaman-pemesanan.html

Balas

wah makasih banget kang... buat informasi nya

jgn lupa ke sini yah http://harafimulki.blogspot.com

Balas

Terimakasih kang, tutorialnya bagus,,, ijin share ulang....
http://www.masrud.web.id/

Balas

maap kang.. setelah saya ikuti tutorial nya sampai selesai. kok prosesnya kirimnya ga ada konformasi kalo sudah terkirim..

Balas

Habis di post nanti mereka send messagenya munculnya dimana nih?
btw makasih infonya gan
visit juga ya :)

http://belajaringgrisonlinee.blogspot.com/

Balas

kang saya ikutin cara di atas kaya tidak bekerja kontak form nya tombol kirim tak bekerja

Balas

iya sama saya juga mengalaminya, bagaimana ini solusinya kang
http://www.cahpare.com/p/contact-me.html

Balas

Thanks gan, berfungsi baik :) maju terus gan

Salam,
Denny | http://indonesiajobhunter.blogspot.com/

Balas

Sudah terpasang kang.
Tapi kontak form nya tidak berfungsi. Jika klik tombol kirim tidak ada perubahan.
Mohon pencerahannya kang .

Balas

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 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.

Balas

wah mantap min , udah terlaksana dgn benar :)

Balas

sangat membantu, makasih banget kang... buat informasi nya

jgn lupa kunbalnya yah http://esmartgadget-shopping.blogspot.com

Balas

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

Balas

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

Balas

Infonya sangat bermanfaat gan. saya rasa artikel ini membuat saya lebih tahu dan lebih paham.
oh iya gan perkenalkan saya seorang blogger pemula yang masih belajar tentang blog.
makanya saya semangat cari info-info lain yang mungkin saja bermanfaat buat saya peribadi.
Oh iya berikut ini artikel yang saya bangga-banggakan gan. dibaca ya.
Cara Membuat Blog dengan Blogger
Cara Memasang Animasi Burung Twitter Melayang di Blog
Cara Memasang Widget Alexa Rank di Blog
Cara Membuat About Me Di Blog
Cara Membuat Buku Tamu Tersembunyi Pada Blogger

Semoga semua yang saya tulis bermanfaat buan agan pribadi termasuk pengunjung blog ini.
Kao mw buat buku tamu agan bisa baca di artikel Cara Membuat Buku Tamu Tersembunyi di Blog

Ok gan. terimakasih lagi atas infonya, semoga agan rajin updatenya dan sukses selalu.
salam kenal dari saya.

Balas

Wah udah lama banget nih nyari tutor ini, baru ketemu sekarang.
Hatur nuhun pisan Kang....

Balas

Ah masa? Di blog saya bisa ko Mba...
Coba deh diteliti lagi, kali aja ada yg kelewat...

Balas

Poskan Komentar


×
Chat