Cara Membuat Formulir Kontak di Halaman Statis Untuk Blogger



Formulir Kontak

Hai sobat blogger. Kali ini Click and Skip akan membahas tentang "Cara Membuat Formulir Kontak di Halaman Statis Untuk Blogger". Mungkin sobat sudah tahu widget formulir kontak yang biasanya ada di bagian sidebar atau footer. Tetapi, jika kita ingin membuat laman formulir kontak supaya pengunjung blog bisa memberi saran, kita juga membutuhkan formulir kontak di halaman statis. Contohnya seperti: http://clickandskip.blogspot.com/p/form-kontak.html. Nah, jika sobat ingin membuatnya, silahkan ikuti langkah berikut. Walaupun sedikit panjang, tetapi tidak terlalu susah kok. Baca dengan teliti.

1. Log in Blogger
2. Klik Tata Letak> Tambahkan Gadget
3. Klik Gadget Lainnya> Pilih Formulir Kontak
4. Simpan
5. Beralih ke bagian Template> Edit HTML
6. Cari kode </style> dengan Ctrl + F
7. Copy kode di bawah lalu paste di atas kode </style>

/* CSS Menyembunyikan Formulir Kontak di Sidebar */
#ContactForm1,#ContactForm1 br {display:none!important;}


8. Cari kode </body> dengan Ctrl + F
9. Copy kode di bawah lalu paste di atas kode </body>

<script type="text/javascript">
(function() {
var css = document.createElement('link');
css.href = '//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css';
css.rel = 'stylesheet';
css.type = 'text/css';
document.getElementsByTagName('head')[0].appendChild(css);
})();
</script>

Jika di blog sobat sudah ada font awesome 4.3.0, tidak usah ditambahkan.

Untuk font awesome valid css3, bisa kunjungi artikel berikut Cara Membuat Font Awesome Valid CSS3

10. Simpan Template
11. Beralih ke bagian Laman> Laman baru
12. Klik bagian HTML (di bagian kiri lembar kerja)
13. Copy 2 kode di bawah lalu paste di kolom HTML laman

<style scoped="" type="text/css">
#post-wrapper {width:100%;}
#sidebar-wrapper {display:none;}
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
</style>


<form name="contact-form">
<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-user"></i> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> 

<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> 

<span style="color: #666666; font-family: Open Sans,Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />
</form>

15. Jangan lupa beri judul pada laman
16. Publikasikan


Sekian posting tentang Cara Membuat Formulir Kontak di Halaman Statis Untuk Blogger. Semoga bemanfaat :)

Custom Search

6 Responses to "Cara Membuat Formulir Kontak di Halaman Statis Untuk Blogger"

  1. Ko ga berfungsi ya kontak formnya

    ReplyDelete
  2. Terimaksih sudah bisa di pakai tadi salah nyimpen kode css buat nyembunyiin widget bawaannya, kalo punya saya di atas style gak berfungsi, harus di atas penutupan skin

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. saya sudah mencobanya, terima kasih :)

    ReplyDelete
  5. Artikel yang sangat menarik :D
    http://clayton88.blogspot.com | http://bit.ly/1sUU8dl | http://goo.gl/lNMX3D | http://goo.gl/cAQcMp | http://goo.gl/97Yn1s | http://goo.gl/tw2ZtP | http://goo.gl/RkuB4G | http://bit.ly/1Mwgw3U | http://bit.ly/23ABPpR |

    ReplyDelete

Dilarang mengiklan di kolom komentar
Gunakan format www[dot]weblog[dot]com untuk menunjukkan link blog
dan gunakan format email[at]gmail[dot]com untuk menunjukkan email

Back to top