Membuat Form Feedback di bawah halaman
OK.. pada tutorial kali ini kita akan membuat form komentar / feedback dibawah halaman web .. Form ini berda dibawah halaman web , dan posisinya tetap, bisa menggulung kebawah atau tersimpan dibawah.. sangat dinamis.. cocok untuk web yang profesional, dan mungkin kedepanya suckittrees.com akan membuat form seperti ini.... OK.. untuk membuat form tetap dibawah halaman web silahkan ikuti langkah-langkah berikut ini :
Nah.. Untuk membuat form tersebut , hanya ada 2 step yang kita lalui
1. Membuat Code Form Feedback dengan nama index.html
2. Membuat style untuk form dengan nama style.css
CODE HTML :
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery.js">
<script type="text/javascript">
$(document).ready(function(){
$("#feedback_button").click(function(){
form();
});
});
function form()
{
$("form").slideToggle();
}
</script>
</head>
<body>
<h1>Easy Feedback Form On Page Bottom Using jQuery,HTML And CSS</h1>
<div id="form">
<p id="feedback_button">Feedback</p>
<form method="post" action="">
<input type="text" id="name" placeholder="Name">
<br>
<input type="text" id="email" placeholder="Email">
<br>
<textarea id="feedback" placeholder="Feedback"></textarea>
<br>
<input type="submit" id="submit_feedback" values="Submit">
</form>
</div>
</body>
</html>
Langkah selanjutnya ialah membuat code css untuk mempercantik atau mendesain form nya, berikut kode css yang digunakan
Code CSS style.css
body
{
background-color:#E6E6E6;
font-family:helvetica;
height:2000px;
}
h1
{
text-align:center;
margin-top:150px;
color:#819FF7;
width:600px;
margin-left:200px;
}
#form
{
position: fixed;
bottom: 0px;
left:40%;
width:250px;
border:2px solid green;
padding:0px;
}
#form p
{
margin:0px;
background-color:green;
text-align:center;
color:#CED8F6;
padding:10px;
font-size:20px;
font-style:oblique;
cursor:pointer;
}
form
{
display:none;
}
input[type="text"]
{
width:220px;
margin-left:15px;
height:35px;
margin-top:10px;
padding:5px;
border-radius:5px;
border:2px solid silver;
}
textarea
{
width:220px;
margin-left:15px;
height:100px;
margin-top:10px;
padding:5px;
border-radius:5px;
border:2px solid silver;
font-family:helvetica;
}
#submit_feedback
{
width:120px;
margin-left:65px;
background-color:#A4A4A4;
border:none;
color:white;
height:35px;
font-size:18px;
margin-top:10px;
border-radius:5px;
}
Produk Rekomendasi
Artikel Terkait
- Simple menu vertical dengan CSS
- Cara Menonaktifkan Selection Text atau CRTL+A Dengan CSS
- Cara Menampilkan File PDF di halaman Web HTML
- Simple Tips sticky Footer
- Free Download Template HTML5 CSS3
- Style Pesan notifikasi dengan css3
- Membuat Redirect Halaman Di Website
- Style Judul Sidebar Dengan CSS
- Membuat Alert Box atau Pesan Notifikasi dengan CSS3
- Membuat Garis Batas Background dengan CSS3