Feedback Form with Popup Style use CSS

Apakah sobat pernah memencet tombol yang bertuliskan complain? Ketika login dan masuk ke dashboard blog, silahkan lihat pojok kanan bawah! Maka akan muncul kotak Google Feedback dengan gaya popup Kesempatan kali sekarang, AA Koben mau berbagi cara membuat CSS3 HTML5 awesome popup contact or feedback form created by Md Ashraf Malik. Sebelum itu tengok dahulu source alakadar seputar feed-back:

• Feedback for blogger.
• HTML form with pop up labels effect.
• Membuat tombol feedback blogger (simple).

Bumbu CSS

.f-button {
height: 35px;
border: solid 3px #444;
background: #F9760B;
width: 100px;
line-height: 32px;
font-weight: 600;
color: white;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
text-align: center;
font-size: 17px;
position: fixed;
right: -40px;
top: 45%;
font-family: Arial, Helvetica, sans-serif;
z-index: 999;
}
.f-button:hover {
background: #EB5200;
}
#form-area {
height: 100%;
width: 100%;
position: fixed;
top: -100%;
left: 0;
background: rgba(0, 0, 0, 0.90);
opacity: .9;
}
#open:checked ~ #form-area {
top: 0;
}
#open:checked ~ #form-area .form-in {
margin-top: 150px;
transition: all .5s .4s;
}
input[type="radio"] {
display: none;
}
label {
cursor: pointer;
padding: 8px 0;
}
.form-in {
height: auto;
width: 20%;
padding: 2% 4%;
border-radius: 5px;
background: #FFF;
margin-left: 36%;
margin-top: -400px;
}
.in, .text {
width: 90%;
margin: 5px;
transition: all .4s .1s;
padding: 9px 7px;
outline: none;
border-radius: 4px;
border: solid 2px #999999;
}
.in:focus:invalid, .text:focus:invalid {
border-color: #930;
}
.in:focus:valid, .text:focus:valid {
border-color: #063;
}
.text {
height: 70px;
}
.sb {
margin: 5px;
padding: 5px 10px;
cursor: pointer;
border-radius: 4px;
border: none;
background: #999;
color: white;
font-size: 16px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.sb:hover {
background: #555;
}
.close {
height: 25px;
width: 35px;
top: -35px;
color: #900;
position: relative;
text-align: center;
margin-left: 99%;
font-weight: bold;
font-size: 25px;
background: #fff;
border-radius: 4px 4px 0 0;
}

Planing HTML

<input type="radio" name="r" id="open" />
<input type="radio" name="r" id="close" />
<div class="f-button"><label for="open">Feedback</label></div>
 <div id="form-area">
  <div class="form-in">
   <div class="close"><label for="close">x</label></div>
 <form action="LINK-TARGET-ADD-HERE" method="get">
  <input type="text" required placeholder="Input Your Name" class="in" /><br />
  <input type="email" required placeholder="Input Your Email" class="in" /><br />
   <textarea placeholder="Your Comment" required class="text"></textarea><br />
  <input type="submit" value="Submit" class="sb" />
 </form>
  </div>
 </div>

Change it LINK-TARGET-ADD-HERE

Untuk beberapa kasus, taging form HTML pada variabel input harus disesuaikan id/class dengan source link target.

Source: developer.mozilla.org/en-US/demos/detail/css3-html5-awesome-popup-contact-or-feedback-form