Làm thế nạo tạo Form 3 cột bằng Plugin Contact Form 7 đẹp mắt

Đầu tiên bạn cần tạo Form mới và dán đoạn code sau vào nội dung Form. Tùy mong muốn của bạn theo các field mà tùy chỉnh lại.

Copy đoạn code sau và dán vào.

<div class=”row formdangky”>
<div class=”col small-5″>
<div style=”margin-bottom: 16px”>
[text* your-name placeholder “Họ tên*”]
</div>
<div style=”padding:”0;”>
[tel* your-phone placeholder “Điện thoại*”]
</div>
</div><div class=”col small-5″>
<div style=”padding:”0;”>
[textarea* your-noidung placeholder “Nội dung*”]
</div>
</div>
<div class=”col small-2″>[submit “ĐĂNG KÝ NGAY”]</div>
</div>

Tiếp tục copy đoạn CSS sau và dán vào file CSS của theme bạn đang sử dụng, hoặc làm như sau:

Truy cập Tùy biến ở admin => Chọn CSS bổ sung (Custom CSS) và dán code sau vào.

.formdangky .col {
padding: 0 5px 30px !important;
}
.formdangky .small-5 {
max-width: 41.66667%;
flex-basis: 41.66667%;
float: left;
}
@media (min-width: 1281px) {.formdangky .small-2 {
max-width: 16.66667%;
flex-basis: 16.66667%;
float: left;
}}
@media (min-width: 1025px) and (max-width: 1280px) {

.formdangky .small-2 {
max-width: 16.66667%;
flex-basis: 16.66667%;
float: left;
}

}
@media (min-width: 768px) and (max-width: 1024px) {

.formdangky .small-2 {
max-width: 16.66667%;
flex-basis: 16.66667%;
float: left;
}

}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

.formdangky .small-2 {
max-width: 16.66667%;
flex-basis: 16.66667%;
float: left;
}

}

.formdangky input[type=’text’], .formdangky input[type=’tel’],.formdangky textarea {
background: #ebebeb !important;
border-radius: 4px;
height: 3em !important;
font-weight:normal;
}

.formdangky textarea {min-height: 7em !important;}

.formdangky input[type=’submit’]{min-height: 6.5em !important;border-radius:10px;background: linear-gradient(to right, #f48a35, #eb5810);}

@media (min-width: 481px) and (max-width: 767px) {

.formdangky .small-5,.formdangky .small-2 {
max-width: 100%;
flex-basis: 100%;
float:center !important ;
align-content: center !important;
}
.formdangky input[type=’submit’] {
min-height: 2.5em !important;
width: 100%;
}
}

@media (min-width: 320px) and (max-width: 480px) {

Cuối cùng là thành quả bạn đạt được