CÁCH TẠO WIDGET LIÊN HỆ KÈM THEO FORM CONTACT TUYỆT ĐẸP.
 |
| Ảnh minh họa. |
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 -> 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.
Nội dung chính
