Tùy biến plugin contact form 7 thành 2 cột

Plugin contact form 7 không còn xa lạ với những người thiết kế web bằng wordpress, đây là plugin giúp bạn tạo form liên hệ vô cùng tiện lợi, dễ dàng sử dụng và cài đặt. Là plugin nên cài đặt trong mỗi website wordpress. Tuy nhiên, mặc định form của plugin này khá đơn điệu không được đẹp mắt, mặc định form trình bày 1 cột từ trên xuống nhìn khá cơ bản, ở bài này mình sẽ chia sẻ cách tùy biến plugin contact form 7 thành 2 cột để form liên hệ của bạn chuyên nghiệp hơn trong mắt người dùng.

Hình ảnh dưới đây là mục đích đạt được của bài này. Form đầy đủ những thông tin cần thiết như họ tên, email, số điện thoại, tiêu đề, tin nhắn.

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* first-name]</div>
<div class=”column-half”>Last Name [text* last-name]</div>
</div> <div class=”form-row”>
<div class=”column-half”>Email [email* your-email]</div>
<div class=”column-half”>Phone [text* your-phone]</div> </div>

<div class=”form-row”> <div class=”column-full”>Subject [text* your-subject]</div> </div> <div class=”form-row”>

<div class=”column-full”>Your message [textarea your-message]</div> </div> <div class=”form-row”>

<div class=”column-full”>[submit “Send”]</div> </div> </div>

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.

Lời kết : Việc tùy biến cho form sử dụng plugin contact form 7 tùy thuộc vào khả năng css của bạn, nhiều người có nhu cầu sử dụng khác nhau, ở bài này mới chỉ hướng dẫn tùy biến thành 2 cột, vậy muốn tùy biến thành 3 cột hay nhiều hơn thế nữa thì phải làm sao?

Ở bài tiếp theo mình sẽ hướng dẫn yêu cầu này. Tùy biến plugin contact form 7 thành 3 cột và nhiều hơn thế nữa. Chúc bạn thành công!