popupKesempatan 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:
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;
}
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> 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