Hướng Dẫn Tạo Form Liên Hệ Dùng Contact Form 7 Thành 2 Cột đẹp Mắt
Có thể bạn quan tâm
Plugin contact form 7 là plugin đình đám được nhiều người sử dụng nhất để làm form liên hệ cho wordpress, tuy nhiên mặc định nó không được đẹp cho lắm, để nó trở nên đẹp và bắt mắt hơn thì bạn cần chỉnh sửa html và css. Nay mình hướng dẫn các bạn tạo form liên hệ dùng contact form 7 thành 2 cột đẹp mắt, bạn chỉ việc copy và paste vào code là ngon lành ngay:
Các bước tùy biến plugin contact form 7 thành 2 cột
Bước 1 : Tạo 1 form liên hệ mới và sử dụng đoạn code HTML của form sau:
Tải về tại đây
Bước 2 : Sau khi đã có bộ khung của form, chúng ta tiến hành CSS cho form đẹp hơn và được như mục đích ban đầu. Ở đây mình hướng dẫn css phù hợp cho cả desktop và mobile.
Thêm đoạn code css sau vào file style.css trong theme.
#responsive-form{ max-width:600px /*-- change this to get your desired form width --*/; margin:0 auto; width:100%; } .form-row{ width: 100%; } .column-half, .column-full{ float: left; position: relative; padding: 0.65rem; width:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .clearfix:after { content: ""; display: table; clear: both; } /**---------------- Media query ----------------**/ @media only screen and (min-width: 48em) { .column-half{ width: 50%; } }Tiếp tục thêm đoạn code css sau đây vào.
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 3px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } .wpcf7 input[type="text"]:focus{ background: #fff; } .wpcf7-submit{ float: right; background: #CA0002; color: #fff; text-transform: uppercase; border: none; padding: 8px 20px; cursor: pointer; } .wpcf7-submit:hover{ background: #ff0000; } span.wpcf7-not-valid-tip{ text-shadow: none; font-size: 12px; color: #fff; background: #ff0000; padding: 5px; } div.wpcf7-validation-errors { text-shadow: none; border: transparent; background: #f9cd00; padding: 5px; color: #9C6533; text-align: center; margin: 0; font-size: 12px; } div.wpcf7-mail-sent-ok{ text-align: center; text-shadow: none; padding: 5px; font-size: 12px; background: #59a80f; border-color: #59a80f; color: #fff; margin: 0; }Đến đây là bạn đã xong công việc, mở ra xem thành quả nữa thôi.
Từ khóa » Form Liên Hệ Html
-
32 Contact Form HTML Cho Thiết Kế Website - Niềm Vui Lập Trình
-
Cách Tạo Contact Form Bằng HTML, CSS - Niềm Vui Lập Trình
-
Hướng Dẫn Tạo Form Liên Hệ Bằng HTML, CSS - Quách Quỳnh
-
Hướng Dẫn Tạo Contact Form đơn Giản Với CSS - Freetuts
-
Code Form Liên Hệ Bằng Html
-
Hướng Dẫn Tạo Form Liên Hệ Với Contact Form 7 đơn Giản - Alan Tiến
-
Thẻ Form Trong HTML
-
How To Create A Contact Form With CSS - W3Schools
-
Cách Tạo Trang Liên Hệ Bằng HTML Form Không Phụ Thuộc Ghost Theme
-
Hướng Dẫn Tạo Form Liên Hệ Bằng Html - MegaCode
-
Tạo Form Liên Hệ Bằng Html - Thiet Ke Web
-
Code Form Liên Hệ Bằng Html
-
Tạo Form Liên Hệ Có đính Kèm File Sử Dụng Php Và Ajax
-
Chèn Contact Form Và Tạo Trang Liên Hệ Bằng Html, Thêm Trang ...