Ả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.

CHIA SẺ BÀI VIẾT

- - 23 bình luận
CHUYÊN MỤC
- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
• Email: nguyenchanhduc0908@gmail.com
• Facebook: facebook.com/ducidol0908

BÌNH LUẬN (23)

  1. vãi lồng sao nguồn code ông để màu nhạt thế :v ngta k thấy đó

    Trả lờiXóa
  2. Hữu ích đó, nhưng mà thôi để ng khác dùng :))

    Trả lờiXóa
  3. Trả lời
    1. Do backup lại template nên không đặt.
      Tên + Url tôi đặt lại

      Xóa

Một số lưu ý khi bình luận

Vui lòng xem Hướng Dẩn Sử dụng trước khi bình luận

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Không được backlink và nói tục. Hãy là một độc giả có ý thức.

Nếu các bạn muốn liên hệ riêng với mình thì hãy click tại đây nhé.