Feedback Form with Popup Style use CSS - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Feedback Form with Popup Style use CSS, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article HTML, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Feedback Form with Popup Style use CSS
link : Feedback Form with Popup Style use CSS

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

Thus articles Feedback Form with Popup Style use CSS

that is all articles Feedback Form with Popup Style use CSS This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Feedback Form with Popup Style use CSS with the link address https://autopostingblogspot.blogspot.com/2014/11/feedback-form-with-popup-style-use-css.html