contact
WA: 0812-7537-1724
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: 5AB31960
ebsofmail@gmail.com

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

▼ Download Source Code Dibawah 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;
}

Artikel Terkait

Diskusi