Đây là mẫu Contact Form được thiết kế sử dụng css kết hợp giữa Material Design và Bootstrap, mẫu form có giao diện đẹp, chuyên nghiệp và được nhúng form liên hệ của Google, như vậy có thể nói đây là mẫu kết hợp của 3 yếu tố chính mà cái hay ở đây mình đã lọc các yếu tố đó để thiết kế ra được mẫu form này.
Cách làm cũng tương đối phức tạp nếu bạn đọc xong mà thấy không phù hợp thì cũng không nên thêm vào Blog mình làm gì mà chỉ tham khảo thôi. Cách thực hiện như sau:
1. Code Css
.card{background-color:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;overflow:hidden;position:relative;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 2px 0 -2px rgba(0,0,0,0.2),0 0 2px 0 rgba(0,0,0,0.12);-moz-box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 2px 0 -2px rgba(0,0,0,0.2),0 0 2px 0 rgba(0,0,0,0.12);box-shadow:0 2px 2px 0 rgba(0,0,0,0.14),0 2px 0 -2px rgba(0,0,0,0.2),0 0 2px 0 rgba(0,0,0,0.12);-webkit-transition:box-shadow 0.25s;-moz-transition:box-shadow 0.25s;-ms-transition:box-shadow 0.25s;-o-transition:box-shadow 0.25s;transition:box-shadow 0.25s}
.row{margin-right:-15px;margin-left:-15px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}
.col-lg-4,.col-lg-8,.col-md-6,.col-md-12{position:relative;width:100%;padding-right:15px;padding-left:15px}
@media (min-width:768px){.col-lg-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-lg-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}
.card-body{-ms-flex:1 1 auto;flex:1 1 auto;padding:1.25rem}
.mb-0,.my-0{margin-bottom:0!important}
.md-form{position:relative;margin-top:1.5rem}
.md-form input[type=email],.md-form input[type=text],.md-form textarea.md-textarea{font-family:Roboto,Arial,sans-serif;-webkit-transition:border-color .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;-o-transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out,-webkit-box-shadow .15s ease-in-out;outline:0;-webkit-box-shadow:none;box-shadow:none;border:none;border-bottom:1px solid #ced4da;-webkit-border-radius:0;border-radius:0;-webkit-box-sizing:content-box;box-sizing:content-box;background-color:transparent}
.md-form textarea.md-textarea{overflow-y:hidden;padding:1.5rem 0;resize:none}
.md-form .form-control{margin:0 0 .5rem;-webkit-border-radius:0;border-radius:0;padding:.3rem 0 .55rem;background-image:none;background-color:transparent;height:auto}
.form-control{display:block;width:100%;height:calc(1.5em + .75rem + 2px);padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#495057;background-color:#ffffff;background-clip:padding-box;border:1px solid #ced4da;border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}
.btn-floating.btn-lg{width:61.1px;height:61.1px}
.form .btn-floating{float:right;position:relative;bottom:3rem;margin-right:0;border:0;outline:0}
.blue{background-color:#2196f3!important}
.btn-floating{-webkit-box-shadow:0 5px 11px 0 rgba(74,124,255,.24),0 4px 15px 0 rgba(65,97,198,.15);box-shadow:0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15);width:47px;height:47px;position:relative;z-index:1;vertical-align:middle;display:inline-block;overflow:hidden;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;margin:10px;-webkit-border-radius:50%;border-radius:50%;padding:0;cursor:pointer}
.btn-floating.btn-lg i{font-size:1.625rem;line-height:61.1px}
.btn-floating i{font-size:1.25rem;line-height:47px;display:inline-block;width:inherit;text-align:center;color:#ffffff}
.md-form label{position:absolute;top:.65rem;left:0;-webkit-transition:.2s ease-out;-o-transition:.2s ease-out;transition:.2s ease-out;cursor:text;color:#757575;font-weight:300;display:inline-block;margin-bottom:.5rem}
.md-form label.active{font-size:.8rem;-webkit-transform:translateY(-140%);-ms-transform:translateY(-140%);transform:translateY(-140%)}
.md-form input[type=email]+label:after,.md-form input[type=text]+label:after,.md-form textarea.md-textarea+label:after{content:"";position:absolute;top:65px;display:block;opacity:0;-webkit-transition:.2s opacity ease-out,.2s color ease-out;-o-transition:.2s opacity ease-out,.2s color ease-out;transition:.2s opacity ease-out,.2s color ease-out}
.md-form input[type=email]:focus:not([readonly]),.md-form input[type=text]:focus:not([readonly]),.md-form textarea.md-textarea:focus:not([readonly]){border-bottom:2px solid #4285f4}
.md-form input[type=email]:focus:not([readonly])+label,.md-form input[type=text]:focus:not([readonly])+label,.md-form textarea.md-textarea:focus:not([readonly])+label{color:#4285f4}
.hidden{display: none!important}
.alert{position:relative;padding:.75rem 1.25rem;border:1px solid transparent;border-radius:.25rem;clear:both}
.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}
button.close{padding:0;background-color:transparent;border:0;-webkit-appearance:none;outline:none}
.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #ffffff;opacity:.5}
button.close .ti-close{font-size:18px}
.contact{-webkit-border-radius:0 .25rem .25rem 0;border-radius:0 .25rem .25rem 0}
.h-100{height:100%!important}
.blue-gradient{background:-webkit-linear-gradient(50deg,#45cafc,#303f9f)!important;background:-o-linear-gradient(50deg,#45cafc,#303f9f)!important;background:linear-gradient(40deg,#45cafc,#303f9f)!important}
.white-text{color:#ffffff!important}
.text-center{text-align:center!important}
.card .card-body h3{font-weight:400;font-size:1.75rem}
.mt-4,.my-4{margin-top:1.5rem!important}
.mb-4,.my-4{margin-bottom:1.5rem!important}
.pb-2,.py-2{padding-bottom:.5rem!important}
.list-unstyled{list-style:none;margin-bottom:1rem}
@media (min-width:992px)
.ml-4,.mx-4{margin-left:1.5rem!important;.text-lg-left{text-align:left!important}}
.pr-2,.px-2{padding-right:.5rem!important}
.hr-light{border-top:3px solid #ffffff;width:80px}
.list-inline-item:not(:last-child){margin-right:.5rem}
.list-inline-item{display:inline-block}
.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}
2. Code Html
Chèn vào vị trí muốn hiển thị form
<div class='card'>
<div class='row'>
<div class='col-lg-8'>
<div class='card-body form'>
<form action='' id='Contact-Form' method='POST' target='hidden_iframe'>
<div class='row'>
<div class='col-md-6'>
<div class='md-form mb-0'>
<input autocomplete='off' class='form-control' id='form-contact-name' label='Your name' name='' required='' spellcheck='false' type='text' value=''/>
<label for='form-contact-name'>Your name</label>
</div>
</div>
<div class='col-md-6'>
<div class='md-form mb-0'>
<input autocomplete='off' class='form-control' expr:label='data:messages.emailAddress' id='form-contact-email' name='' pattern='[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}' required='' spellcheck='false' type='email' value=''/>
<label for='form-contact-email'>Email address</label>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-6'>
<div class='md-form mb-0'>
<input autocomplete='off' class='form-control' id='form-contact-phone' label='Your phone' name='' required='' spellcheck='false' type='text' value=''/>
<label for='form-contact-phone'>Your phone</label>
</div>
</div>
<div class='col-md-6'>
<div class='md-form mb-0'>
<input autocomplete='off' class='form-control' id='form-contact-subject' label='Your phone' name='' required='' spellcheck='false' type='text' value=''/>
<label for='form-contact-subject'>Subject</label>
</div>
</div>
</div>
<div class='row'>
<div class='col-md-12'>
<div class='md-form mb-0'>
<textarea autocomplete='off' class='form-control md-textarea' id='form-contact-message' name='' required='' row='4' spellcheck='false' type='text'/>
<label for='form-contact-message'>Your message</label>
<button class='btn-floating btn-lg blue' type='submit'><i class='ti-location-arrow'/></button>
</div>
</div>
</div>
<div class='row success hidden'>
<div class='col-md-12'>
<div class='alert alert-success' role='alert'>
<strong>Thank you for sending mail!</strong> We will respond to your request as soon as possible.
<button aria-label='Close' class='close' type='button'><span class='ti-close'/></button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class='col-lg-4'>
<div class='card-body contact text-center h-100 white-text blue-gradient'>
<h3 class='my-4 pb-2'>Thông tin liên hệ</h3>
<ul class='text-lg-left list-unstyled ml-4'>
<li>
<p><i class='ti-map-alt pr-2'></i>533 PVB, P.15, Q.TB, TP.HCM</p>
</li>
<li>
<p><i class='ti-mobile pr-2'></i>+84 908 562750</p>
</li>
<li>
<p><i class='ti-email pr-2'></i>contact.vietblogger@gmail.com</p>
</li>
<li>
<p><i class='ti-facebook pr-2'></i>fb.com/kequaduongvodanh</p>
</li>
</ul>
<hr class='hr-light my-4'/>
<ul class='list-inline text-center list-unstyled'>
<li class='list-inline-item'>
<a class='fa-lg' href='https://www.facebook.com/kequaduongvodanh' rel='noopener nofollow' target='_blank' title='Facebook'>
<span class='ti-facebook white-text'></span>
</a>
</li>
<li class='list-inline-item'>
<a class='fa-lg' href='https://twitter.com/vietblogdao' rel='noopener nofollow' target='_blank' title='Twitter'>
<span class='ti-twitter white-text'></span>
</a>
</li>
<li class='list-inline-item'>
<a class='fa-lg' href='https://www.linkedin.com/in/vietblogdao' rel='noopener nofollow' target='_blank' title='Linkedin'>
<span class='ti-linkedin white-text'></span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<iframe border='0' height='0' name='hidden_iframe' style='display: none;' width='0'/>
3. Code Jquery
Chèn trước thẻ đóng </body>
<script>//<![CDATA[
$('.form-control').focus(function() {
$(this).next('label').addClass('active')
})
$('.form-control').blur(function() {
if (!$(this).val()) {
$(this).next('label').removeClass('active')
}
})
$('#Contact-Form').on('submit', function() {
$('.btn-floating.btn-lg').attr('disabled', '')
$('.row.success').removeClass('hidden')
setTimeout(function() {
window.location.reload()
}, 5000)
$('form[name=ContactForm] .success .close').click(function() {
window.location.reload()
})
})
//]]></script>
4. Tạo biểu mẫu liên hệ Google Form
Phần này các bạn đọc bài viết Hướng dẫn tạo mới và chèn google form vào blogspot, mình đã viết hướng dẫn rất chi tiết nhưng có một vài điểm lưu ý so với bài viết cũ của mình như sau:
- Khi tạo các thẻ trả lời ngắn hay trả lời dài các bạn không thêm tùy chọn Bắt buộc mà tùy chọn này các bạn có thể thêm trực tiếp required="" trong thẻ input của form
- Khi tìm thẻ input trong tab view-source các bạn chỉ cần lấy trường name tương ứng, ví dụ name="entry.1624308118" thay vào trường name trong thẻ input của form
5. Một vài lưu ý
+ Mẫu form sử dụng themify icons, các bạn nếu giữ nguyên thì thêm link icon trước thẻ </head>
<link href="https://vietblogdao.github.io/blog/themify-icons.css" rel="stylesheet">
Hoặc có thể sử dụng icon khác thay thế ví dụ như font awesome icons chẳng hạn.
+ Code jquery cần có thư viện link jquery
+ Xem demo tại: https://www.vietblogger.design
