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 :

<div id=“responsive-form” class=“clearfix”>
 
<div class=“form-row”>
<div class=“column-half”>First Name [text* firstname]</div>
<div class=“column-half”>Last Name [text* lastname]</div>
</div>
 
<div class=“form-row”>
<div class=“column-half”>Email [email* youremail]</div>
<div class=“column-half”>Phone [text* yourphone]</div>
</div>
 
<div class=“form-row”>
<div class=“column-full”>Subject [text* yoursubject]</div>
</div>
 
<div class=“form-row”>
<div class=“column-full”>Your message  [textarea yourmessage]</div>
</div>
 
<div class=“form-row”>
<div class=“column-full”>[submit “Send”]</div>
</div>
 
</div><!end responsiveform>

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.

CÓ THỂ BẠN QUAN TÂM

Kinh doanh đồ ăn qua mạng
Kinh doanh đồ ăn qua mạng hiện nay đang là mô hình đem lại thu nhập “khủng” cho các chủ đầu ...
10 lưu ý khi kiếm tiền từ YouTube Adsense
Bạn đang muốn kiếm tiền trên Youtube ?, Video của bạn không có người xem ? Lượng tiềm kiếm được quá ít so ...
7 ý tưởng để vượt qua câu hỏi: Viết cái gì trên website/blog/fanpage
Bây giờ thì bạn biết bài viết/blog/nội dung/content….  cần thiết như thế nào với website hay fanpage của bạn rồi đấy. ...
Đi tìm 6 nguyên nhân vì sao thứ hạng website bị giảm sút
Website của bạn đang có  cao với việc xuất hiện trong top đầu của các công cụ tìm kiếm, và bạn ...
Fullcode giao diện website đẹp chuẩn SEO giá chỉ từ 700.000đXem ngay
+ +
0986.989.626