CÁCH TẠO WIDGET LIÊN HỆ KÈM THEO FORM CONTACT TUYỆT ĐẸP.

Ảnh minh họa.

Xin chào các bạn, mình là Nguyễn Chánh Đức,  đã lâu mình không đăng 1 thủ thuật nào lên blog, hôm nay mình sẽ hướng dẫn các bạn tạo 1 form contact kèm theo liên hệ, cái Css và Html này là mình nhặt đước và edit lại phần CSS và chia sẻ lên đây cho các bạn tham khảo, các bạn theo dõi bài viết nhé. Demo tại bài viết mình luôn nhé, các bạn cuộn xuống lower sẽ thấy!

Các bước tiến hành

 Bước 1: Các bạn vào bố cục -> thêm tiện ích -> HTML.
Bước 2: Các bạn thêm phần CSS, HTML này vào nhé.

<style scoped="scoped" type="text/css"> .contact-form-bacsiwindows-v form{position:relative;background:linear-gradient(-225deg,#403f7e 0%,#5753C9 60%,#7c8bf0 100%);padding:100px 120px 50px 60px;width:700px;max-width:100%;border-radius:20px;max-width:100%} .form-body{width:1080px;margin:0 auto;padding:100px 0;position:relative;max-width:100%} #ContactForm1_contact-form-name{text-transform:capitalize} .contact-form-bacsiwindows-v{width:100%;margin:0 auto;padding:0;background:#e9eef3} #ContactForm1_contact-form-email-message::-webkit-input-placeholder,#ContactForm1_contact-form-email::-webkit-input-placeholder,#ContactForm1_contact-form-name::-webkit-input-placeholder{text-transform:uppercase;letter-spacing:1.2px;color:rgba(255,255,255,.7)} #ContactForm1_contact-form-name,#ContactForm1_contact-form-email{margin:0 0 .5em;width:50%;float:right;height:auto;padding:10px 15px;background:rgba(255,255,255,.1);color:#fff;box-sizing:border-box;font-family:Roboto,sans-serif;transition:.15s;font-size:14px;letter-spacing:.5px;border:1px solid transparent} #ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{border:1px solid rgba(255,255,255,.8);outline:none} #ContactForm1_contact-form-error-message img{display:none} #ContactForm1_contact-form-email-message{width:100%;height:auto;margin:0;padding:10px 12px;background:rgba(255,255,255,.1);border:1px solid transparent;color:#fff;box-sizing:border-box;font-size:14px;font-family:Roboto,sans-serif;transition:.15s;letter-spacing:.5px} #ContactForm1_contact-form-submit{height:35px;float:right;color:#FFF;padding:0 30px;margin:2em 0 0;cursor:pointer;border-radius:0;font-weight:700;background:transparent;border:2px solid white;outline:0} #ContactForm1_contact-form-submit:hover{background-color:#fff;color:#7c8bf0} #ContactForm1_contact-form-submit:focus,#ContactForm1_contact-form-submit:active{position:relative;top:2px} #ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{color:#fff;padding:16px 0;display:inline-block;clear:both} h2.contact-label{color:#fff;position:absolute;margin:0;top:30px;font-size:28px;font-weight:700} h2.contact-label span{display:block;font-size:16px;font-weight:400;letter-spacing:1px} .r-contact-bacsiwindows{background:white;position:absolute;right:5%;top:50%;transform:translate(0,-50%);padding:30px 40px;border-radius:20px;box-shadow:0 10px 55px rgba(0,0,0,.15);max-width:100%} .r-contact-bacsiwindows .r-contact{} .r-contact-bacsiwindows .contact-u,.r-contact-bacsiwindows .contact-u a{font-size:20px;margin:15px 0;font-weight:400;color:#9498be} .r-contact-bacsiwindows .contact-u i{background:#7b89ee;width:45px;line-height:45px;text-align:center;border-radius:100%;margin:0 10px 0 0;color:#fff} .r-contact-bacsiwindows .contact-u .fb{background:#0084ff} .r-contact-bacsiwindows .contact-u .email{background:#df5644} .r-contact-bacsiwindows .contact-u .support{background:#81c596} .form-body cap.cap{color:#fff;line-height:1.5;margin:0 0 2em;display:block} </style> <div class="contact-form-bacsiwindows-v"><div class="form-body"><form name="contact-form"><h2 class="contact-label"><span>liên hệ</span>với chúng tôi</h2><cap class="cap">Hãy điền thật ngắn gọn, chính xác và dễ hiểu nội dung cần tư vấn/liên hệ vào biểu mẫu dưới đây, chúng tôi sẽ cố gắng trả lời sớm nhất có thể (không quá 48 giờ), cảm ơn và chúc bạn một ngày tốt lành!</cap><input id="ContactForm1_contact-form-name" name="name" placeholder="Tên của bạn" size="30" style="width:49%;float:left" type="text" value=""><input id="ContactForm1_contact-form-email" name="email" placeholder="Địa chỉ Email" size="30" type="text" value=""><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Nội dung cần liên hệ" rows="7"></textarea><input id="ContactForm1_contact-form-submit" type="button" value="SEND"><div style="width: 100%;"><div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></div></form><div class="r-contact-bacsiwindows"><div class="r-contact"><div class="contact-u"><i class="fa fa-phone" aria-hidden="true"></i>0868.102.208</div><div class="contact-u"><i class="fa fa-envelope-open-o" aria-hidden="true"></i> nguyenchanhduc0908@gmail.com</div><div class="contact-u"><i class="fa fa-commenting-o" aria-hidden="true"></i><a href="https://fb.com/ducidol0908" target="_blank">Nguyễn Chánh Đức</a></div><div class="contact-u"><i class="fa fa-question-circle" aria-hidden="true"></i> 10/24 (Thứ 2 -&gt; Chủ nhật)</div></div></div></div></div>

Bước 3: Lưu bố cục lại, hưởng thụ thôi!

Tổng kết

 Bài viết đến đây cũng kết thúc rồi, nếu thấy hay thì share lên Facebook hoặc Google+ trên bài viết nhé. Cảm ơn các bạn đã theo dõi bài viết, chúc các bạn 1 ngày vui vẻ!Code by: BacSiWindows.