Sau khi chia sẻ bài viết tùy biến Contact Form 7 thành 2 cột nhận được rất nhiều ý kiến đóng góp tích cực thì ở bài viết này mình sẽ hướng dẫn thêm cách tạo Form 3 cột bằng Plugin Contact Form 7 với CSS đẹp mắt cho cả giao diện decktop và mobile.
Plugin contact form 7 là một plugin quá quen thuộc với những người sử dụng wordpress, bên cạnh rất nhiều plugin hỗ trợ thiết kế form khác, plugin contact form 7 đem lại sự đơn giản nhưng hiệu quả khi vận hành, với những người mới bắt đầu học wordpress thì nên làm quen với plugin này.
Các bước tạo Form 3 cột bằng Plugin Contact Form 7như sau
Đầ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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
.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) {
.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%;
}
}
|
Cuối cùng là thành quả bạn đạt được.
Lời kết : Trên là những hướng dẫn cơ bản cách tạo form 3 cột với plugin Contact Form 7, chỉ cần vài dòng CSS là bạn có thể làm mọi thứ theo mong muốn, bạn cũng có thể tùy biến thành 4 cột hàng ngang hay so le số cột trên từng dòng đều được.
