Để chia mẫu form liên hệ trên thành 2 cột, các bạn coppy đoạn CSS dưới đây, dán vào mục “CSS tùy chỉnh” trong “Tùy biến” hoặc mục “Custom CSS” trong “Advance” của theme. / Start chia cột Form / info-left {width: 49%;
float: left;
margin-right:2%;
}
info-right {width: 49%;
float: right;
}.form-contact-twocol:after { content:"\0020";
display:block;
height:0;
clear:both;
visibility:hidden;
overflow:hidden;
margin-bottom:10px;
}
.form-contact-twocol {display:block;
}
/ End chia cột Form /Xong xuôi, Form của bạn sẽ hiển thị tương tự như dưới đây Trong quá trình thực hiện, có thắc mắc nào, các bạn có thể để lại comment cho mình phía dưới bài viết. 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. Các bạn follow bài viết này để biết thêm thông tin nhé. LƯU Ý CÁCH LÀM DƯỚI ĐÂY CỦA MÌNH LÀ ÁP DỤNG CHO THEME FLATSOME, CÁC BẠN MUỐN SỬ DỤNG Ở THEME KHÁC THÌ VUI LÒNG THAY ĐỔI ID VÀ CLASS TƯƠNG ỨNG Xem demo tại: https://pttuan410.com/danh-muc-san-pham/sp-thuong-mai/ và https://pttuan410.com/san-pham/plugin-menu-footer/ Ở đây để ví dụ cho nhanh thì mình sẽ tạo 1 form đơn giản gồm tên, số điện thoại và mặt hàng bạn muốn mua nhé. Form mua hàng mẫuĐể có kết quả chính xác nhất, các bạn vui lòng copy code dưới này nhé, mình viết sẵn để các bạn dán vào CF7 cho dễ, vì cái 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 các bạn hook cái form này vào trang sản phẩm giúp mình nhé. Đoạn hook mình viết dưới này luôn cho các bạn dễ hình dung. add_action('woocommerce_after_add_to_cart_form','btn_muahang_cf7');
function btn_muahang_cf7(){
echo '<a href=" muangaycf7" class="btn-pttuan-custom">Mua ngay CF7</a>'; echo do_shortcode('[lightbox id="muangaycf7" width="600px" padding="20px"][contact-form-7 id="1838" title="Form mua hàng"][/lightbox]');
} Ở đoạn code này mình sẽ tạo 1 thể a chứ text là mua ngay CF7 để gọi ra cái lightbox là form mà mình đã tạo ra ở trên kia. Các bạn thêm 1 chút CSS cho nó nhé: .btn-pttuan-custom{
display: block; padding: 8px 10px;
background: red;
color:
# fff;text-align: center;
}Kết quả sẽ như thế này: Tạo 1 button mua ngay trong woocommerceKhi click vào button đó thì nó sẽ hiển thị lightbox như thế này: Form mua hàng bằng CF7Như vậy là 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 giúp mình nhé. 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 };
}Và đây là kết quả khi chúng ta click vào thẻ a chúng ta vừa tạo: Thêm title vào form thành côngBây giờ nếu các bạn muốn sử dụng btn này ở trang cửa hàng, hay trang chủ thì như thế nào? Các bạn có thể follow đoạn code dưới đây nhé. Đầ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. Để xem toàn bộ hook của Flatsome, các bạn follow bài viết này. Contact Form 7 (CF7) là plugin được sử dụng nhiều nhất thế giới để làm form liên hệ (trang liên hệ) cho website wordpress. Thông thường sau khi nhập thông tin liên hệ và bấm gửi (submit), người dùng sẽ nhận được thông báo “Xin cảm ơn, form đã được gửi thành công.”. Nếu nhu cầu của bạn cao hơn, bạn muốn sau khi bấm gửi sẽ tự động chuyển hướng đến 1 trang nội dung khác để thông báo đến khách hàng hoặc để tracking (đo lường) chuyển đổi phục vụ cho việc chạy quảng cáo google ads, facebook ads, digital marketing,… thì bài viết này sẽ thật bổ ích cho bạn. - Redirection for contact form 7
- Contact form 7 redirect after submission without a plugin
- Conditional redirect contact form 7
- Form redirection
- Chuyển hướng sang trang cảm ơn sau khi đăng ký thành công Contact Form 7
- Chuyển hướng đến trang cảm ơn sau khi submit form thành công cf7
- Hướng dẫn chuyển hướng contact form 7
Việc chuyển hướng người dùng tới trang cảm ơn, sẽ giúp trang web chuyên nghiệp hơn rất nhiều, giúp khách hàng biết được mình đã gửi thông tin thành công và giúp bạn dễ dàng tracking được chuyển đổi của khách hàng trên các công cụ như Google Ads, Facebook Ads, Google Tag Manager, Mục lục Cách 1: Áp dụng cho theme flatsomeBạn hãy chèn đoạn code sau vào Flatsome -> Advanced -> Global Settings -> FOOTER SCRIPTS <script>
document.addEventListener('wpcf7mailsent', function(event) { location = 'https://wpfast.vn/';
}, false);
</script>Với https://wpfast.vn/ chính là đường dẫn mà bạn muốn chuyển hướng. Hãy thay thế nó nhé. Sử dụng Plugin Redirection for Contact Form 7 của Query Solutions, giúp bạn dễ dàng thêm nhiều URL khác nhau cho từng form liên hệ riêng biệt. Sau khi đã tạo trang Cảm ơn, thì bây giờ các bạn vào Contact (Form liên hệ) -> Chọn form bạn muốn chuyển hướng sang trang Thanks You, chọn tab Redirect Settings. Ở mục Select a page to redirect to on successful form submission, Bạn chọn vào trang Cảm ơn đã được tạo ở bước trên. Bên dưới sẽ có một số tùy chọn khác, nếu bạn cảm thấy cần thì có thể sử dụng, còn không thì cứ để mặc định và Save thôi. Bây giờ thì bạn có thể ra test lại form liên hệ, đăng ký vừa cài đặt xem. Bạn sẽ thấy rằng sau khi nhấn vào nút Gửi, thì website sẽ tự chuyển tiếp sang trang Thanks You đã tạo trước đó. Rất nhanh và đơn giản, các bạn đã tạo được chuyển hướng sang trang Thanks You cho Contact Form 7. Nếu có thắc mắc gì khác, hãy để lại bình luận bên dưới nhé. | 
