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é!
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-forminput{ padding:5px7px;
border:1pxsolid#009446; border-radius:5px; } .wpcf7-formtextarea{ padding:5px0px5px
7px; border:1pxsolid#009446; border-radius:5px; } .wpcf7-formp{ 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; }
|
Contact form 7 với placeholder text (dòng text hướng dẫn)
|
| [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"]
|
Vertical contact form 7
|
| <div class="form-flat codfe-cf-7"> [email*your-email placeholder"Your Email (required)"] [submit class:button
primary"Sign Up"] </div>
|
Horizontal contact form 7
|
| <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>
|
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:
|
| //codfe.com: How to do shortcode in contact form 7 add_filter('wpcf7_form_elements','mycustom_wpcf7_form_elements'); functionmycustom_wpcf7_form_elements($form){ $form
=do_shortcode($form); return$form; }
|
Sau đó chúng ta có thể dùng shortcode của flatsome làm các form phức tạp 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 27 28 29
| [ux_text font_size="1.6"class="cf-text"]Contact Form7&Flatsome shortcode[/ux_text] [row label="cf-contact-form7-row"
padding="20px 10px 10px 10px"] [col span="4"span__sm="12"] [text your-text-1placeholder"1/3"] [/col]
[col span="4"span__sm="12"] [text your-text-2placeholder"2/3"] [/col] [col span="4"
span__sm="12"] [text your-text-3placeholder"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]
|
Contact Form 7 & Flatsome shortcode
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-1placeholder"1/3"] </div>
<div class="col medium-4 small-12 large-4"> [text your-text-2placeholder"1/3"] </div> <div class="col medium-4 small-12
large-4"> [text your-text-3placeholder"1/3"] </div> <div class="col medium-6 small-12 large-6"> [text
your-text-4placeholder"1/3"] </div> <div class="col medium-6 small-12 large-6"> [text your-text-5placeholder
"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
|
| .codfe-contact-form-7{ padding-top:1rem; padding-left:1rem!important; } .codfe-contact-form-7
.col, .codfe-contact-form-7wpcf7-submit{ padding-bottom:0px!important; padding-left:0px; }
|
Kết quả | 
