Contact Form 7 là một plugin rất tuyệt vời, hàng Nhật chất lượng cao mà từ khi dùng nó mình không có ý định thay thế bằng bất kỳ plugin nào khác. Cùng xem các tùy biến contact form 7 mà mình thường dùng cho contact form 7 nhé!
Css thường dùng cho Contact Form 7
|
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 |
//codfe.com:css contact form 7 .wpcf7-form { padding:20px; } .wpcf7-form input { padding:5px 7px; border:1px solid #009446; border-radius:5px; } .wpcf7-form textarea { padding:5px 0px 5px 7px; border:1px solid #009446; border-radius:5px; } .wpcf7-form p { color:#4f2a0f; } .wpcf7-form .wpcf7-submit { background:#009446; cursor:pointer; padding-left:15px; padding-right:15px; color:#fff; border-radius:5px; width:100%; height:36px; padding-top: 0px; } |
Một số form thường dùng
Contact form 7 với placeholder text (dòng text hướng dẫn)
|
1 2 3 4 |
[text* your-name placeholder "Họ và tên (*)"] [email* your-email placeholder "Email (*)"] [text your-phone placeholder "Số điện thoại"] [submit "GỞI YÊU CẦU"] |
Kết quả
Vertical contact form 7
|
1 2 3 4 |
<div class="form-flat codfe-cf-7"> [email* your-email placeholder "Your Email (required)"] [submit class:button primary "Sign Up"] </div> |
Kết quả
Horizontal contact form 7
|
1 2 3 4 5 6 7 8 |
<div class="flex-row form-flat medium-flex-wrap Horizontal"> <div class="flex-col flex-grow"> [email* your-email placeholder "Your Email (required)"] </div> <div class="flex-col ml-half"> [submit class:button primary "Sign Up"] </div> </div> |
Kết quả
BONUS: Hack giao diện Contact Form 7 với shortcode của Flatsome
Chúng ta có thể tận dụng các shortcode của Flatsome để tạo các giao diện Form phức tạp hơn, tuy nhiên mặt định Contact Form 7 không cho phép thực hiện các shortcode trong form khai báo.
Tác giả của contact form (Takayuki Miyoshi) cho biết để thực hiện các shortcode các bạn cần khai báo như sau:
Khai báo cho phép Contact Form 7 thực thi sortcode
|
1 2 3 4 5 6 |
//codfe.com: How to do shortcode in contact form 7 add_filter( 'wpcf7_form_elements', 'mycustom_wpcf7_form_elements' ); function mycustom_wpcf7_form_elements( $form ) { $form = do_shortcode( $form ); return $form; } |
Khai báo Contact Form 7
|
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 |
[ux_text font_size="1.6" class="cf-text"] Contact Form 7 & Flatsome shortcode [/ux_text] [row label="cf-contact-form7-row" padding="20px 10px 10px 10px"] [col span="4" span__sm="12"] [text your-text-1 placeholder "1/3"] [/col] [col span="4" span__sm="12"] [text your-text-2 placeholder "2/3"] [/col] [col span="4" span__sm="12"] [text your-text-3 placeholder "3/3"] [/col] [col span="6" span__sm="12"] [text* your-name placeholder "Họ và tên (*)"] [/col] [col span="6" span__sm="12"] [email* your-email placeholder "Email (*)"] [/col] [col span__sm="12"] [text your-phone placeholder "Số điện thoại"] [submit class:button primary "Sign Up"] [/col] [/row] |
Kết quả chúng ta có quả Form hoành tráng như sau
Tùy biến Contact Form 7 chỉ dùng html & css
Nếu bóc tách các thẻ HTML riêng ra thì chúng ta có thể dùng form html kết hợp với theme Flatsome mà không cần khai báo thực thi shortcode như sau
|
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 |
<div class="row codfe-contact-form-7" > <div class="col medium-4 small-12 large-4"> [text your-text-1 placeholder "1/3"] </div> <div class="col medium-4 small-12 large-4"> [text your-text-2 placeholder "1/3"] </div> <div class="col medium-4 small-12 large-4"> [text your-text-3 placeholder "1/3"] </div> <div class="col medium-6 small-12 large-6"> [text your-text-4 placeholder "1/3"] </div> <div class="col medium-6 small-12 large-6"> [text your-text-5 placeholder "1/3"] </div> <div class="col small-12 large-12"> [text your-phone placeholder "Số điện thoại"] [submit class:button primary "Sign Up"] </div> </div> |
Kết hợp với một ít gia vị CSS như sau
|
1 2 3 4 5 6 7 8 9 |
.codfe-contact-form-7{ padding-top:1rem; padding-left:1rem!important; } .codfe-contact-form-7 .col, .codfe-contact-form-7 wpcf7-submit{ padding-bottom:0px!important; padding-left:0px; } |
Kết quả
