Truyền tiêu đề trang vào contact form 7

Một số bạn không muốn sử dụng thanh toán của woocommerce, mà sẽ sử dụng contact form 7 để thu thập dữ liệu khách hàng từ đó khai thác qua các kênh như FB, và google ads hoặc telesale. Vậy để biết khách hàng điền form và có nhu cầu mua sản phẩm nào thì chúng ta sẽ làm như thế nào? Hôm nay mình sẽ chia sẻ một đoạn script nho nhỏ để có thể làm được việc này.

Tạo 1 form mua hàng tùy chỉnh bằng contact form 7

copy code dán vào CF7, ID title_product là bắt buộc.

[text* text-70 placeholder "Tên"]
[tel* tel-923 placeholder "Số điện thoại"]
[text text-70 id:title_product placeholder]
[submit "Mua hàng"]

Kế tiếp hook cái form này vào trang sản phẩm.

add_action('woocommerce_after_add_to_cart_button','btn_muahang_cf7');
function btn_muahang_cf7(){
    echo '<a href="#muangaycf7" class="btn-pttuan-custom">Mua ngay CF7</a>';
    echo do_shortcode('');
}
thêm 1 chút CSS
.btn-pttuan-custom{
   display: block;
    padding: 8px 10px;
    background: red;
    color: #fff;
    text-align: center;
}

Lưu bản nháp tự động

Một button mua ngay trong woocommerceKhi click vào button đó thì nó sẽ hiển thị lightbox như thế này:
Lưu bản nháp tự động

Form mua hàng bằng CF7

Xong phần form kế đến để nó có thể nhận được title sản phẩm thì các bạn thêm đoạn code này.
add_action('wp_footer','js_add_title_pttuan');
function js_add_title_pttuan(){
if(is_product()){;?>
    <script>
        jQuery(document).ready(function($){
            $('.product-info .btn-pttuan-custom').click(function (){
                var title = $('h1').text();
                $('#title_product').val(title);
            });
        });
    </script>
<?php };
}

kết quả khi chúng ta click vào thẻ a chúng ta vừa tạo:
Lưu bản nháp tự động

Thêm title vào form thành công
Bây giờ nếu các bạn muốn sử dụng nút này ở trang cửa hàng, hay trang chủ

Đầu tiên mình sẽ cho nó hiển thị ra trang chủ, trang cửa hàng, chúng ta vẫn sử dụng đoạn code tạo nút kia nhé, chỉ thay đổi hook của nó thôi.  Mình sẽ sử dụng hook của woocommerce

add_action('woocommerce_after_shop_loop_item','btn_muahang_cf7');

Truyền tiêu đề trang vào contact form 7

Và thêm đoạn function

add_action('wp_footer','js_add_title_pttuan_shop');
function js_add_title_pttuan_shop(){
if(!is_product()){;?>
    <script>
        jQuery(document).ready(function($){
            $('.product-small.col .btn-pttuan-custom').click(function (){
                var title = $(this).parents('.product-small').find('.woocommerce-LoopProduct-link').text();
                $('#title_product').val(title);
            });
        });
    </script>
<?php };
}

kết quả là
Truyền tiêu đề trang vào contact form 7

Lấy title sản phẩm

#title_product{display:none} 

CSS cho Contact Form 7 đẹp hơn, gọn gàng hơn

sử dụng các đoạn CSS dưới đây để tùy chỉnh Contact Form 7 trên website

CSS background và border

.wpcf7 {
     background: #A3A3A3;
     border: 1 px solid #494949 ;
     text-align: left;
     width: 700 px; //%
}

CSS canh lề cho CF7

.wpcf7 form{ 
     margin-left: 25px;
     margin-right: 25px;
     margin-top: 25px;
}

CSS các trường thông tin nhập vào

.wpcf7 input[type = "text"],
.wpcf7 input[type = "email"],
.wpcf7 input[type = "tel"],
textarea
{
    font-size: 16px;
    background: #f5f5f5 ;
    <span class="pl-c1">border</span>: <span class="pl-c1">1<span class="pl-smi">px</span></span> solid <span class="pl-pds"><span class="pl-kos">#</span>e4e4e4</span>;
    color: #000 ;
    width: 95%;
    padding: 2%;
}
.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #129FEA;
}

CSS cho nút call-to-action của form

Input – Trạng thái của nút ‘nguyên trạng’ trước khi thực hiện bất kỳ hành động nào trên đó.
Input: hover – Trạng thái của nút khi con trỏ được di chuột qua đầu con trỏ.
input: active – Trạng thái của nút khi ai đó nhấp vào nút đó.

/*Label Font*/
.wpcf7-form p {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}
 
/*Submit button Font*/
.wpcf7-submit {
    width: 100%;
    font-size: 15px !important;
    background: #4a97c2 !important;
    color: #fff !important;
}
/*Submit button Hover*/
.wpcf7-submit:hover {
    background: #3b86b0 !important;
}
/ * Button submit Contact Form 7 
------------------------------- * /
 
.wpcf7 input[type = "submit"] {
    color: #ffffff;
    font-size: 18 px;
    font-weight: 700;
    background: #9ED9330;
    padding: 15px 25px 15px 25px;
    border: none;
    border-radius: 5px;
    width: auto;
    text-decoration: none;
    text-transform: uppercase;
}
 
.wpcf7 input:hover[type = "submit"] {
    background: #494949;
    transition: all 0,4s ease 0s;
}
 
.wpcf7 input:active[type = "submit"] {
    background: #000000;
}

CSS thông báo

/*Response messages - Error & Success*/
.wpcf7-response-output {
    margin-bottom: 30px !important;
}

Ví dụ css tất cả

 /*Form width*/
.wpcf7 {
    text-align: left;
    width: 40%;
}
 
/*Input Field widths*/
.wpcf7-text, .wpcf7-textarea {
    width: 100%;
    border: 1px solid #e4e4e4;
    background: #f7f7f7;
}
 
.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #129FEA;
}
 
/*Label Font*/
.wpcf7-form p {
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}
 
/*Submit button Font*/
.wpcf7-submit {
    width: 100%;
    font-size: 15px !important;
    background: #4a97c2 !important;
    color: #fff !important;
}
 
/*Submit button Hover*/
.wpcf7-submit:hover {
    background: #3b86b0 !important;
}
 
/*Response messages - Error & Success*/
.wpcf7-response-output {
    margin-bottom: 30px !important;
}
 
/***********borders************/
 
/*Form border*/
.wpcf7 {
    border: 1px solid #B7B7B7;
    padding: 20px 25px !important;
    padding-bottom: 0px !important;
}
 
/*Input Field borders*/
.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #8F8F8F !important;
}
 
/*Submit button Background*/
.wpcf7-submit {
    background: #7E7E7E !important;
    color: #fff !important;
}
 
/*Submit button Hover*/
.wpcf7-submit:hover {
    background: #5F5F5F !important;
}
 
/***********colors************/
 
/*Submit button background & border*/
.wpcf7-submit {
    background-color: transparent !important;
    border: 2px solid #5A5050 !important;
    color: #5A5050 !important;
    font-weight: bold !important;
}
 
/*Submit button Hover styles*/
.wpcf7-submit:hover {
    background-color: transparent !important;    
	border-color: #4CAF50 !important;
	color: #4CAF50 !important;
}
 
/*Label Text color*/
.wpcf7-form p {
    color: #9E9E9E;
}
 
/*Input Field Text color*/
.wpcf7-text, .wpcf7-textarea {
	color: #777;
}
 
/****background-images********/
 
/*Form background*/
.wpcf7 {
    background-image: url(http://i.imgur.com/iAFPf0G.jpg);
    background-color: rgba(255, 255, 255, 0.2);
    background-position: center;
    background-size: cover;
}
 
/*Label Text color*/
.wpcf7-form p {
    color: #FFFFFF;
}
 
/*Submit button background & border*/
.wpcf7-submit {
    border: 2px solid #FFFFFF !important;
    color: #FFFFFF !important;
}
 
/*Submit button Hover styles*/
.wpcf7-submit:hover {
    border-color: transparent !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #FFFFFF !important;
}
 
/*Input Field border*/
.wpcf7-text:focus, .wpcf7-textarea:focus {
    border-color: #5A3D3D !important;
}

Tham khảo: gist.github.com/codehandling/0483efbc2e76890a3e6a9ae6737792bb

Kiểm tra nhập số điện thoại Việt Nam trên Contact Form 7

Thêm đoạn code này vào file function.php

/*
* Kiểm tra số điện thoại có 10 số của Việt Nam
*/
function custom_filter_wpcf7_is_tel( $result, $tel ) { 
  $result = preg_match( '/^(0|\+84)(\s|\.)?((3[2-9])|(5[689])|(7[06-9])|(8[1-689])|(9[0-46-9]))(\d)(\s|\.)?(\d{3})(\s|\.)?(\d{3})$/', $tel );
  return $result; 
}
 
add_filter( 'wpcf7_is_tel', 'custom_filter_wpcf7_is_tel', 10, 2 );

Sử dụng mail-tags

đôi khi bạn cần thêm thông tin ngoài thông tin đầu vào của người gửi thông qua các trường biểu mẫu liên hệ. Ví dụ: bạn có thể cần biết địa chỉ IP của người gửi. 

[_remote_ip] – Thẻ này được thay thế bằng địa chỉ IP của người gửi.

[_user_agent] – Thẻ này được thay thế bằng thông tin trình duyệt của người gửi.

[_url] – Thẻ này được thay thế bằng URL của trang mà biểu mẫu liên hệ được đặt.

[_date] – Thẻ này được thay thế bằng ngày gửi.

[_time] – Thẻ này được thay thế bằng thời gian gửi.

[_invalid_fields] – Thẻ này được thay thế bằng số lượng trường biểu mẫu có đầu vào không hợp lệ.

[_serial_number]– Thẻ này được thay thế bằng một chuỗi số có giá trị tăng dần, vì vậy thẻ này có thể hoạt động như số thứ tự của mỗi lần gửi. Yêu cầu cài đặt Flamingo.

Các thẻ thư liên quan đến bài đăng

Các thẻ thư cung cấp thông tin về bài đăng chỉ hoạt động khi biểu mẫu liên hệ được đặt bên trong nội dung bài đăng. Trong trường hợp biểu mẫu liên hệ nằm ngoài nội dung bài đăng, chẳng hạn như khi biểu mẫu liên hệ được đặt trong sidebar widget hoặc được nhúng trong  theme’s template, nó trả ra nội dung trống.

[_post_id] – Thẻ này được thay thế bằng ID của bài đăng.

[_post_name] – Thẻ này được thay thế bằng tên (slug) của bài đăng.

[_post_title] – Thẻ này được thay thế bằng tiêu đề của bài đăng.

[_post_url] – Thẻ này được thay thế bằng URL liên kết cố định của bài đăng.

[_post_author] – Thẻ này được thay thế bằng tên tác giả của bài viết.

[_post_author_email] – Thẻ này được thay thế bằng email tác giả của bài đăng.

Các thẻ thư này cung cấp thông tin về trang web WordPress mà bạn quản lý các biểu mẫu liên hệ. Bạn sẽ thấy chúng đặc biệt hữu ích khi bạn muốn sử dụng lại cùng một bộ mẫu biểu mẫu liên hệ giữa nhiều trang web, vì bạn được giải phóng khỏi việc sửa đổi thủ công thông tin trang web cho mỗi trang web.

[_site_title] – Thẻ này được thay thế bằng tiêu đề của trang web.

[_site_description] – Thẻ này được thay thế bằng phần mô tả (tagline) của trang web.

[_site_url] – Thẻ này được thay thế bằng URL trang chủ của trang web.

[_site_admin_email] – Thẻ này được thay thế bằng địa chỉ email của người dùng quản trị chính của trang web.

Các thẻ thư này cung cấp thông tin về người dùng đã đăng nhập hiện tại.

Vì các thẻ [_user_ *] này chỉ hoạt động khi người gửi có tài khoản trên trang WordPress và đã đăng nhập, bạn nên bật cài đặt chế độ chỉ dành cho người đăng ký bất cứ khi nào bạn sử dụng các thẻ này.

[_user_login] – Thẻ này được thay thế bằng tên đăng nhập của người dùng.

[_user_email] – Thẻ này được thay thế bằng địa chỉ email của người dùng.

[_user_url] – Thẻ này được thay thế bằng URL trang web của người dùng.

[_user_first_name] – Thẻ này được thay thế bằng tên của người dùng.

[_user_last_name] – Thẻ này được thay thế bằng họ của người dùng.

[_user_nickname] – Thẻ này được thay thế bằng biệt hiệu của người dùng.

[_user_display_name] – Thẻ này được thay thế bằng tên hiển thị của người dùng.

Nguồn: contactform7.com/special-mail-tags/

Trả lời

Email của bạn sẽ không được hiển thị công khai.