contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Membuat Form Feedback di bawah halaman

Posted in HTML & CSS Life at 11 Agustus 2016 With 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;
}

Artikel Terkait

Diskusi