Hộp popup gửi email sử dụng tiện ích liên hệ của blog

Hộp popup gửi email sử dụng tiện ích liên hệ của blog

#B1: Thêm tiện ích biểu mẫu liên hệ và làm ẩn nó đi

#B2: Thêm css

.subcribe-content {width: auto;padding: 1em 0}
.blanterinput{float:none;position:relative;margin-bottom:45px;margin-right:10px}
.blanterinput input,.blanterinput textarea{font-size:16px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}
.blanterinput input:focus,.blanterinput textarea:focus{outline:0}.blanterinput label{color:#999;font-size:16px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}
.bar{position:relative;display:block;width:100%}.bar:after,.bar:before{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}
.bar:before{left:50%}
.bar:after{right:50%}
.blanterinput input:focus~.bar:after,.blanterinput input:focus~.bar:before,.blanterinput textarea:focus~.bar:after,.blanterinput textarea:focus~.bar:before{width:50%}
.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}
.blanterinput input:focus~.highlight,.blanterinput textarea:focus~.highlight{animation:inputHighlighter .3s ease}
.blanterinput input:focus~label,.blanterinput input:valid~label,.blanterinput textarea:focus~label,.blanterinput textarea:valid~label{top:-20px;font-size:14px;color:#07ACEC}
input#ContactForm1_contact-form-email-message{height:150px}
input#ContactForm1_contact-form-submit,.buttonBlue{color:#fff!important;background:#07ACEC;padding:7px 20px;border-radius:4px;border:none;outline:0;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left}
input#ContactForm1_contact-form-submit:hover,.buttonBlue:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19)}
#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}
.img-replace{display: inline-block;overflow: hidden;text-indent: 100%;color: transparent;white-space: nowrap}
.btn-nugget-info{text-align: center;position: absolute;width: 100%;height: 50px;line-height: 50px;bottom: 0;left: 0}
.btn-nugget-info a{position: relative;font-size: 14px;color: #5e6e8d;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s}
.no-touch .btn-nugget-info a:hover{opacity: .8;}
.btn-nugget-info span {vertical-align: middle;display: inline-block}
.btn-nugget-info span svg{display: block;}
.btn-nugget-info .btn-nugget-info-arrow{fill: #5e6e8d}
.btn-popup{position: fixed;z-index: 10;left: 0;top: 0;height: 100%;width: 100%;background-color: rgba(94, 110, 141, 0.9);opacity: 0;visibility: hidden;-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;transition: opacity 0.3s 0s, visibility 0s 0.3s}
.btn-popup.is-visible{opacity: 1;visibility: visible;-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;-moz-transition: opacity 0.3s 0s, visibility 0s 0s;transition: opacity 0.3s 0s, visibility 0s 0s;}
.btn-popup-container {position: relative;width: auto;max-width: 500px;height: 480px;margin: 4em auto;background: #fff;text-align: left;padding: 0 20px}
.btn-popup-container h2 {font-size: 18px;text-transform: uppercase;text-align: center;padding-top: 15px}
.btn-popup-container .btn-popup-close {position: absolute;top: 8px;right: 8px;width: 30px;height: 30px;}
.btn-popup-container .btn-popup-close::before, .btn-popup-container .btn-popup-close::after {content: '';position: absolute;top: 12px;width: 14px;height: 2px;background-color: #333}
.btn-popup-container .btn-popup-close::before {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);left: 8px}
.btn-popup-container .btn-popup-close::after{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);right: 8px;}
.is-visible .btn-popup-container{-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);}

#B3: Đặt nút gửi email

<a class='email-popup' href='javascript:void(0);'>Gửi email</a>
<div class='btn-popup' role='alert'>
<div class='btn-popup-container'>
<h2>gửi email cho tác giả</h2><br/><br/>
<form name='contact-form'>
<div class='blanterinput'>
<input class='validate' id='ContactForm1_contact-form-name' name='name' required='' type='text' value=''/> <span class='highlight'/> <span class='bar'/>
<label><i class='fa fa-user'/>&amp;nbsp;&amp;nbsp;Họ tên</label>
</div>
<div class='blanterinput'>
<input class='validate' id='ContactForm1_contact-form-email' name='email' required='' type='email' value=''/> <span class='highlight'/> <span class='bar'/>
<label><i class='fa fa-envelope'/>&amp;nbsp;&amp;nbsp;Email của bạn</label>
</div>
<div class='blanterinput'>
<textarea class='validate' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' required='' rows='5'/> <span class='highlight'/> <span class='bar'/>
<label><i class='fa fa-microphone'/>&amp;nbsp;&amp;nbsp;Nội dung</label>
</div>
<input id='ContactForm1_contact-form-submit' type='button' value='Gửi email'/>
<div id='ContactForm1_contact-form-error-message'> </div>
<div id='ContactForm1_contact-form-success-message'> </div>
</form>
<a class='btn-popup-close img-replace' href='javascript:void(0);'/> 
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(e){e(".email-popup").on("click",function(p){p.preventDefault(),e(".btn-popup").addClass("is-visible")}),e(".btn-popup").on("click",function(p){(e(p.target).is(".btn-popup-close")||e(p.target).is(".btn-popup"))&&(p.preventDefault(),e(this).removeClass("is-visible"))}),e(document).keyup(function(p){"27"==p.which&&e(".btn-popup").removeClass("is-visible")})});
//]]>
</script>