Hướng Dẫn Tạo Form Liên Hệ Dùng Contact Form 7 Thành 2 Cột đẹp Mắt

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.