Hai sobat blogger ...! . Kali ini Semua Tentang Cara akan berbagi tentang " Cara Membuat Formulir Kontak di Halaman Statis " Fungsi dari Formulir Kontak itu sendiri adalah : Sebagai kontak komunikasi kita dengan pengunjung . Agar pengunjung dapat memberi saran masukan , kritikan mungkin juga meminta atau memberi Info pada Blog atau Artikel yang kita suguhkan . Mungkin sobat tertari untuk membuatnya ...? , ikuti langkah langkah di bawah ini :
Baca juga :
Cara Pasang formulir kontak Di widget atau sidebar
Cara Membuat Formulir Kontak di Halaman Statis
Seperi biasa sobat masuk Blogger
- LogIn Blogger
- Klik Template
- Klik Edit HTML
Pastekan kode di bawah ini di atas tag </style> atau ]]></b:skin>
/* CSS Menyembunyikan Formulir Kontak di Sidebar */
#ContactForm1,#ContactForm1 br {display:none!important;}
Letakan kode di bawah ini di atas tag </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>
Selanjut nya beralih ke Laman
- Klik Laman
- Pilih Laman Baru
- Beri judul Di Bagian Entri
Kemudin Salin / copy semua kode di bawah ini , selanjutnya pastekan di bagian LamanHTML ( Bukan Compos )
<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 gt="" id="ContactForm1_contact-form-name" name="name" size="30" span="" style="color: #666666; font-family: "open sans" , "arial" , "helvetica" , sans-serif; font-weight: 700;" type="text" value="" /><i class="fa fa-envelope"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</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" />
Demikianlah Artikek yang bisa saya bagikan , semoga bermanfaat Mohon maaf bila ada kekurangan . Dan Sampai disini dulu , sampai jumpa di artikek berikutnya .