Thêm phần chọn thời gian đẹp vào Contact Form 7 trong WordPress

🗣 Bài viết đăng bởi Pinker vào lúc 03-12-2022 và cập nhật lúc 21-12-2022 👁 711 lượt xem
Tích Hợp Thư Viện Chọn Thời Gian đẹp Datetimepicker Cho Contact Form 7

Giới thiệu

Contact Form 7 đã rất quen thuộc với những người dùng WordPress, hỗ trợ về phần nhập gửi form thông tin rất tốt và hiệu quả. Trong đó, có hỗ trợ nhập dữ liệu dạng thời gian (ngày-tháng-năm) được sử dụng thông qua <input type="date" />, nhưng để mặc thì trông khá là xấu và thô. Trong bài viết này, tôi sẽ hướng dẫn các bạn tích hợp thư viện chọn thời gian đẹp và hiệu quả hơn, phù hợp với nhu cầu đặt lịch khám, đặt lịch taxi…

Chọn Thời Gian Mặc định
Chọn Thời Gian Mặc Định

Ở đây tôi sẽ sử dụng thư viện datetimepicker jQuery và kết quả trông sẽ như thế này, hỗ trợ đầy đủ định dạng ngày-tháng-năm và giờ-phút

Jquery Datetimepicker
Jquery Datetimepicker

Hướng dẫn

Bước 1: Tải thư viện datetimepicker

Truy cập vào https://xdsoft.net/jqplugins/datetimepicker và tải source về, giải nén và mở folder /build sẽ thấy các file sau

Source Datetimepicker
Source Datetimepicker

Bước 2: Copy file vào theme WordPress

Copy 2 file jquery.datetimepicker.full.min.jsjquery.datetimepicker.min.css vào trong folder gốc của theme mà bạn đang sử dụng wp-content/themes/child-theme

Copy File Vào Theme
Copy File Vào Theme

Bước 3: Tạo form trong Contact Form 7

Khi tạo form nhập liệu trong Contact Form 7, hãy tạo 1 ô input có dạng như sau, lưu ý điền đủ Thuộc tính ID (hoặc Class hoặc cả 2)

Tạo ô Thời Gian Contact Form 7
Tạo ô Thời Gian Contact Form 7

Bước 4: Thêm code vào functions.php

Copy đoạn code này vào file functions.php và lưu lại, sẽ giúp thư viện khởi chạy vào thời gian của Contact Form 7

add_action('wp_footer', function(){
    wp_enqueue_style('vdh_datetimepicker', get_theme_file_uri() . '/jquery.datetimepicker.min.css', array(), false, false);
    wp_enqueue_script('vdh_datetimepicker', get_theme_file_uri() . '/jquery.datetimepicker.full.min.js', array('jquery'), false, false);
    ?>
	<script type="text/javascript">
            jQuery(function ($) {
                $('#vdh_thoi_gian').datetimepicker({
                    format:'H:i d-m-Y' // Bỏ H:i để bỏ giờ:phút
                });
            });
        </script>
    <?php
});

Kết quả

Cùng ra bên ngoài form để xem kết quả nhé, xem thử tại đây

Kết Quả
Kết Quả

Xem thêm nhiều hướng dẫn khác

5/5 - (2 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: CHỌN THỜI GIAN CONTACT FORM 7 CONTACT FORM 7 DATETIMEPICKER DATETIMEPICKER CONTACT FORM 7 THƯ VIỆN THỜI GIAN CONTACT FORM 7

Trả lời

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 *

Hotline Zalo Giới thiệu
0986.209.305
Zalo
Giới thiệu