Membuat Form Feedback di bawah halaman

Publish Date : 11-08-2016 , dibaca 9753 kali, Hari ini dibaca : 1 kali ,0 comments

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 :

 Berikut Gambar Sample nya : membuat form di bawah halaman web

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

Diskusi



wa
Close