Contact Form Blogger di Halaman Statis

Cara mudah memasang Formulir Kontak atau Contact Form pada static page atau halaman statis blogger.

Sebelumnya, saya telah menerbitkan artikel cara memasang Formulir Kontak di Blogger, baca artikel Cara Memasang Formulir Kontak atau Contact Form di Blogger. Formulir kontak blogger ini bisa disesuaikan dengan mudah melalui CSS. Jadi Anda dapat mengganti gaya atau tampilannya sesuai dengan gaya template. Contohnya seperti pada blog ini.

Selain itu Anda juga dapat menambahkan formulir ini ke dalam halaman statis blog sehingga formulir kontak ini tampil pada sebuah halaman khusus bukan pada sidebar. Terdengar keren bukan?

Mula-mula tambahkan Formulir Kontak Untuk Blog Anda. Jika Anda belum tahu caranaya, silahkan baca artikel Cara Memasang Formulir Kontak atau Contact Form di Blogger. Anda harus memiliki gadget ini pada sidebar atau element lainnya (misalnya di footer) sebelum menambahkan widget formulir kontak ini ke halaman statis blog.

Selanjutnya Anda harus sembunyikan widget Formulir Kontak ini dari Sidebar, sehingga nanti widget ini hanya akan tersedia pada halaman kontak situs Anda saja.

Sisipkan CSS berikut ini di atas tag ]]> </ b: skin>

#ContactForm1{
display: none ! important;
}

Simpan template Anda.

Nah, setelah Anda menambahkan widget Formulir Kontak pada sidebar lalu setelah itu menyembunyikannya dari sidebar dan kini saatnya membuat sebuah halaman statis. Halaman statis inilah tempat Anda meletakkan Formulir Kontak.

Buatlah sebuah halaman statis. Anda tentu sudah bisa, kan? Jika belum, Buka dashboard blogger Anda, pilih Laman > Laman baru > Laman kosong lalu beri judul "Contact" atau "Kontak". Klik tab html (di samping tab compose) pada editir post laman lalu copy dan paste-kan kode di bawah ini di dalamnya.

<form name='contact-form'>
<p></p>
Name<br />
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' value='' type='text' />
<p></p>
Email
<span style='font-weight: bolder;'>*</span><br />
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' value='' type='text' />
<p></p>
Message<span style='font-weight: bolder;'>*</span><br />
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' value='Send' type='button' />
<p></p>
<div style='text-align: center; max-width: 222px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

Pratinjau untuk melihat hasil, atau klik Publikasikan untuk menerbitkan halaman. Selesai. Silahkan baca artikel CSS untuk Contact Form Blogger untuk menambahkan gaya Formulir Kontak atau Contact Form blog Anda.

Selamat belajar.

COMMENTS

BLOGGER: 2
  1. gan cara bikin tampilan contact form seperti punya agan gimana

    ReplyDelete
    Replies
    1. Baca tutorialnya di http://jelasinblog.blogspot.com/2014/04/contact-form-blogger-di-halaman-statis.html

      Delete

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Contact Form Blogger di Halaman Statis
Contact Form Blogger di Halaman Statis
Cara mudah memasang Formulir Kontak atau Contact Form pada static page atau halaman statis blogger.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitP5XD93vcL1XVXph-QCQEEXMZDqw2MXBGTb9Ki8XBuqrm4f8kpGaooOd5eBdDIg6HYYPNRsk1kgd3EKVWN-uMqlfzBgR2wRfYw-9Ix9MrFPi3_SJ19c4SZlRsw0rZM5Ji4VDNZkw6QfI/s1600/contact+form+blogger+at+static+page.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitP5XD93vcL1XVXph-QCQEEXMZDqw2MXBGTb9Ki8XBuqrm4f8kpGaooOd5eBdDIg6HYYPNRsk1kgd3EKVWN-uMqlfzBgR2wRfYw-9Ix9MrFPi3_SJ19c4SZlRsw0rZM5Ji4VDNZkw6QfI/s72-c/contact+form+blogger+at+static+page.png
Jelas in Blog
https://jelasinblog.blogspot.com/2014/04/contact-form-blogger-di-halaman-statis.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/04/contact-form-blogger-di-halaman-statis.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content