Hướng dẫn tạo form liên hệ dùng contact form 7 thành 2 cột đẹp mắt

Fullcode chỉ cần up lên host là giống demo không cần cài đặt. Xem ngay

Xem thêm 100+ mẫu landing page đẹp chuẩn seo bằng WordPress tại đây.

CAM KẾT WEB ĐÃ TỐI ƯU CHUẨN SEO, KHÔNG VIRUS, KHÔNG MÃ ĐỘC

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.

Quà tặng khủng khi mua Fullcode tại Chothemewordpress.com

Đọc kỹ Điều khoản sử dụngCâu hỏi thường gặp trước khi mua hàng.

Làm việc từ 8h30 đến 23h30, không nghỉ lễ tết, T7, CN. Hotline: 0982.961.390

Mẹo: Bạn muốn tìm Fullcode điện thoại hãy đánh dien thoai không dấu vào ô tìm kiếm.

Leave a Reply

Sốc: Giảm ngay 10% (Mã FC10) hoặc Quà tặng khủngXem ngay
+ +