Lưu tiêu đề sản phẩm, bài viết vào Contact Form 7

🗣 Bài viết đăng bởi Pinker vào lúc 15-09-2024 và cập nhật lúc 15-09-2024 👁 180 lượt xem
Chia sẻ ➯
lay tieu de san pham bai viet cf7

Bài viết khác

Giới thiệu

Sử dụng Contact Form 7 là việc quá quen thuộc đối với những ai đang sử dụng WordPress, giúp thu thập và lưu trữ thông tin khách hàng linh hoạt và trực quan. Nhưng các bạn muốn thu thập thông tin của chính trang, bài viết, sản phẩm hiện tại mà khách hàng để lại thông tin, giúp cho việc tư vấn hiệu quả hơn, thì lại không có. Trong phạm vi bài viết này, tôi sẽ hướng dẫn mọi người cách lưu tiêu đề sản phẩm, bài viết vào CF7, chỉ sử dụng 1 vài dòng code đơn giản, không cần sử dụng plugin. Sau khi áp dụng chức năng này xong, các bạn có thể xem lại bài viết CF7 to Google Sheet – Kết nối Contact Form 7 vào Google Sheet (Không Plugin) để lưu thông tin tiêu đề và url vào Google Sheet.

Lưu thông tin vào CF7
Lưu thông tin vào CF7

Hướng dẫn

Tạo form thu thập thông tin

Tạo form với các trường dữ liệu mong muốn, lúc này các bạn thêm 2 trường thông tin như hình bên dưới là tieu-de + url, để lấy cả title + url của trang. Thêm style CSS display:none 2 trường này trên giao diện. Sau khi tạo xong các bạn có thể gắn form này vào bất cứ chỗ nào mong muốn bằng shortcode có sẵn của CF7.

Tạo form CF7
Tạo form CF7

Gắn form

Sau khi tạo form xong hãy gắn vào vị trí xác định trong các trang bài viết, sản phẩm mong muốn.

Gắn form CF7
Gắn form CF7

Sử dụng Javascript để lấy dữ liệu

Sau khi gắn form vừa tạo vào vị trí xác định, lúc này sử dụng đoạn code Javascript sau để lấy được thông tin trên trang và nó sẽ được điền tự động vào 2 ô input tieu-de & url ở trên. Hiện tại chức năng này tôi đang áp dụng trên cấu trúc HTML của theme Flatsome.

Mở file functions.php trong theme và thêm code Javascript phía dưới vào.

Trong phần document.querySelectorAll sẽ tùy từng theme mà có .class hoặc #id phù hợp.

<?php
add_action('wp_footer', function(){
    ?>
        <script>
	    var title = document.querySelectorAll(".product-info .product-title")[0]; // Tùy theme với cấu trúc HTML khác nhau mà Selector khác nhau
	    if(title == undefined) {
	        var title = document.querySelectorAll(".blog-single .entry-title")[0]; // Tùy theme với cấu trúc HTML khác nhau mà Selector khác nhau
	    }
			
	    title = title.innerText // Lấy nội dung text trong tiêu đề
	    document.getElementById('tieu-de').value = title // Điền nội dung tiêu đề vào input #tieu-de đã tạo ở trên
			
	    var url = window.location.href // Lấy url hiện tại
	    document.getElementById('url').value = url // Điền nội dung url vào input #url đã tạo ở trên
		</script>
	<?php
});

Kết luận

Hãy kiểm tra xem chức năng lưu tiêu đề vào CF7 đã chạy chưa và cài đặt plugin Contact Form 7 Database Addon – CFDB7 để xem dữ liệu đã lưu. Sau đó các bạn có thể cấu hình gửi email trong CF7 luôn để nhận thông báo cho tiện. Trong phạm vi bài viết này, vuduchong.com đã hướng dẫn các bạn cách lưu tiêu đề, url vào CF7 một cách đơn giản, dễ áp dụng. Chúc các bạn thành công.

Xem video để hiểu cách làm hơn. Nếu có bất kỳ thắc mắc nào vui lòng để lại bình luận phía bên dưới.

5/5 - (1 bình chọn)

Bài viết khác

Tổng hợp Download Plugin - Theme cho WordPress : Xem ngay
Nhóm Zalo : Tham gia ngay
TAGS: CONTACT FORM 7 POST TITLE CONTACT FORM 7 PRODUCT TITLE LƯU DỮ LIỆU CONTACT FORM 7 LƯU TÊN SẢN PHẨM VÀO CF7 LƯU TIÊU ĐỀ BÀI VIẾT LƯU TIÊU ĐỀ SẢN PHẨM LƯU TIÊU ĐỀ VÀO CF7 LƯU TIÊU ĐỀ VÀO CONTACT FORM 7 SAVE POST TITLE SAVE PRODUCT TITLE SAVE TITLE TO CONTACT FORM 7 TIÊU ĐỀ BÀI VIẾT CONTACT FORM 7 TIÊU ĐỀ SẢN PHẨM CONTACT FORM 7

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

tám cộng 1 = mấy (trả lời bằng chữ) ?