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('

Lỗi: Không tìm thấy biểu mẫu liên hệ.

');
}

.btn-pttuan-custom{
   display: block;
    padding: 8px 10px;
    background: red;
    color: #fff;
    text-align: center;
}

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 };
}

add_action('woocommerce_after_shop_loop_item','btn_muahang_cf7');

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 };
}

#title_product{display:none} 

.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;
}

/*
* 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 );

[_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ư liên quan đến trang web

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.

Thẻ thư đặc biệt liên quan đến người dùng

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/

Chuyển hướng đến một URL khác sau khi gửi

Như bạn đã biết, Biểu mẫu liên hệ 7 chuyển hướng đến cùng một URL với URL của biểu mẫu sau khi gửi biểu mẫu trong cài đặt mặc định. Tuy nhiên, trong một số trường hợp hiếm hoi, bạn có thể cần phải thay đổi điều này để làm cho nó chuyển hướng đến một URL khác sau khi gửi. Tôi sẽ viết trong bài đăng này cách bạn có thể thiết lập Biểu mẫu liên hệ 7 để thực hiện điều đó.

Nhân tiện, tôi thường được người dùng hỏi rằng làm thế nào họ có thể chuyển hướng đến cái gọi là “Trang cảm ơn”. Trong hầu hết các trường hợp, họ muốn biết điều đó vì họ cho rằng việc chuyển hướng đến “Trang Cảm ơn” là cần thiết để theo dõi việc gửi biểu mẫu bằng Google Analytics.
Vì vậy, bạn có lý do khác để chuyển hướng đến một URL khác?

Cách đơn giản nhất là sử dụng sự kiện DOM tùy chỉnh của Contact Form 7 để chạy JavaScript. Sau đây là một ví dụ về tập lệnh chuyển hướng bạn đến một URL khác.

[script]
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'http://example.com/';
}, false );
[/script]

Cách đơn giản chép đoạn code (nhớ đổi [] thành <> khi dùng) vào trang có hiện contact form, chỉnh link trả về khi đã gửi được.

Redirecting to another URL after submissions

Tối ưu Contact Form 7 cho WordPress

Tối ưu JS và CSS cho trang nào sử dụng form

Đoạn code bên dưới giúp website chỉ tải các đoạn css / js ở những trang nào có hiển thị Form, còn các trang khác sẽ không có giúp website của bạn tải tốt hơn.

add_filter( 'wpcf7_load_js', '__return_false' ); // xoa file javascript cua contact form 7
add_filter( 'wpcf7_load_css', '__return_false' ); // xoa file css cua contact form 7
function contactform7_load_file_phongmyvn($content){
global $post;
$post_content = $post->post_content;
if ( has_shortcode( $post_content, 'contact-form-7' ) ) {
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {wpcf7_enqueue_scripts();} // kich hoat dieu kien lai javascript
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {wpcf7_enqueue_styles();} // kich hoat dieu kien lai css
}
return $content;
}
add_action( 'the_content', 'contactform7_load_file_phongmyvn',9 );

Loại bỏ Refill trong contact form 7

Contact form 7 tích hợp gọi ajax reset captcha thì tự động gọi file refill. Refill là một tính năng bảo mật reset lại captcha nếu website của bạn đang sử dụng cache html page.

Nếu bạn không sử dụng captcha cho form thì nên tắt nó đi. Code này can thiệp trực tiếp vào core của Contact form 7, nên khi update bạn chịu khó vào chỉnh sửa lại nhé.

B1: Vào thư mục plugin: /wp-content/plugins/contact-form-7/includes tìm đến file : controller.php

B2: Bạn tìm và xóa code bên dưới là được.

if ( defined( 'WP_CACHE' ) && WP_CACHE ) {
$wpcf7['cached'] = 1;
}

Code mẫu gửi contact form 7 về Facebook Messenger.

Sử dụng BOT gửi tin nhắn tự động về Messenger