Hướng Dẫn Tích Hợp API địa Chỉ Việt Nam Vào Contact Form 7 WordPress

Bài viết này sẽ hướng dẫn cách tích hợp API địa chỉ Việt Nam vào form liên hệ sử dụng Contact Form 7. Chúng ta sẽ tạo các dropdown menu cho tỉnh/thành phố, quận/huyện và phường/xã cho website WordPress.

Yêu cầu

WordPress đã cài đặt
Plugin Contact Form 7
Kiến thức cơ bản về HTML, JavaScript và PHP
API được sử dụng: https://provinces.open-api.vn/api/

Hướng dẫn tích hợp API địa chỉ Việt Nam vào Contact Form 7

1. Thêm code HTML vào Contact Form 7

Đầu tiên, tạo form mới trong Contact Form 7 và thêm code sau:

<label>Tỉnh/Thành phố
    [select* province class:province "Chọn Tỉnh/Thành phố"]
</label>

<label>Quận/Huyện
    [select* district class:district "Chọn Quận/Huyện"]
</label>

<label>Phường/Xã
    [select* ward class:ward "Chọn Phường/Xã"]
</label>

<label>Tỉnh/Thành phố

[select* province class:province "Chọn Tỉnh/Thành phố"]

</label>

<label>Quận/Huyện

[select* district class:district "Chọn Quận/Huyện"]

</label>

<label>Phường/Xã

[select* ward class:ward "Chọn Phường/Xã"]

</label>

2. Thêm JavaScript vào theme

Tạo file location.js hoặc thêm ở footer.php trong thư mục theme của bạn và thêm code sau:

jQuery(document).ready(function($) {
    // Khởi tạo biến
    var provinceSelect = $('.province');
    var districtSelect = $('.district');
    var wardSelect = $('.ward');
    
    // Vô hiệu hóa quận/huyện và phường/xã ban đầu
    districtSelect.prop('disabled', true);
    wardSelect.prop('disabled', true);

    // Lấy danh sách tỉnh/thành phố
    $.ajax({
        url: 'https://provinces.open-api.vn/api/p/',
        method: 'GET',
        success: function(response) {
            response.forEach(function(province) {
                provinceSelect.append(
                    $('<option>', {
                        value: province.code,
                        text: province.name
                    })
                );
            });
        }
    });

    // Sự kiện khi chọn tỉnh/thành phố
    provinceSelect.on('change', function() {
        var provinceCode = $(this).val();
        districtSelect.empty().append('<option value="">Chọn Quận/Huyện</option>');
        wardSelect.empty().append('<option value="">Chọn Phường/Xã</option>');
        
        if (provinceCode) {
            districtSelect.prop('disabled', false);
            // Lấy danh sách quận/huyện
            $.ajax({
                url: 'https://provinces.open-api.vn/api/p/' + provinceCode + '?depth=2',
                method: 'GET',
                success: function(response) {
                    response.districts.forEach(function(district) {
                        districtSelect.append(
                            $('<option>', {
                                value: district.code,
                                text: district.name
                            })
                        );
                    });
                }
            });
        } else {
            districtSelect.prop('disabled', true);
            wardSelect.prop('disabled', true);
        }
    });

    // Sự kiện khi chọn quận/huyện
    districtSelect.on('change', function() {
        var districtCode = $(this).val();
        wardSelect.empty().append('<option value="">Chọn Phường/Xã</option>');
        
        if (districtCode) {
            wardSelect.prop('disabled', false);
            // Lấy danh sách phường/xã
            $.ajax({
                url: 'https://provinces.open-api.vn/api/d/' + districtCode + '?depth=2',
                method: 'GET',
                success: function(response) {
                    response.wards.forEach(function(ward) {
                        wardSelect.append(
                            $('<option>', {
                                value: ward.code,
                                text: ward.name
                            })
                        );
                    });
                }
            });
        } else {
            wardSelect.prop('disabled', true);
        }
    });
});

jQuery(document).ready(function($) {

// Khởi tạo biến

var provinceSelect = $('.province');

var districtSelect = $('.district');

var wardSelect = $('.ward');

// Vô hiệu hóa quận/huyện và phường/xã ban đầu

districtSelect.prop('disabled', true);

wardSelect.prop('disabled', true);

// Lấy danh sách tỉnh/thành phố

$.ajax({

url: 'https://provinces.open-api.vn/api/p/',

method: 'GET',

success: function(response) {

response.forEach(function(province) {

provinceSelect.append(

$('<option>', {

value: province.code,

text: province.name

})

);

});

}

});

// Sự kiện khi chọn tỉnh/thành phố

provinceSelect.on('change', function() {

var provinceCode = $(this).val();

districtSelect.empty().append('<option value="">Chọn Quận/Huyện</option>');

wardSelect.empty().append('<option value="">Chọn Phường/Xã</option>');

if (provinceCode) {

districtSelect.prop('disabled', false);

// Lấy danh sách quận/huyện

$.ajax({

url: 'https://provinces.open-api.vn/api/p/' + provinceCode + '?depth=2',

method: 'GET',

success: function(response) {

response.districts.forEach(function(district) {

districtSelect.append(

$('<option>', {

value: district.code,

text: district.name

})

);

});

}

});

} else {

districtSelect.prop('disabled', true);

wardSelect.prop('disabled', true);

}

});

// Sự kiện khi chọn quận/huyện

districtSelect.on('change', function() {

var districtCode = $(this).val();

wardSelect.empty().append('<option value="">Chọn Phường/Xã</option>');

if (districtCode) {

wardSelect.prop('disabled', false);

// Lấy danh sách phường/xã

$.ajax({

url: 'https://provinces.open-api.vn/api/d/' + districtCode + '?depth=2',

method: 'GET',

success: function(response) {

response.wards.forEach(function(ward) {

wardSelect.append(

$('<option>', {

value: ward.code,

text: ward.name

})

);

});

}

});

} else {

wardSelect.prop('disabled', true);

}

});

3. Đăng ký script trong functions.php

Thêm code sau vào file functions.php của theme:

function enqueue_location_script() {
    if (is_page('contact')) { // Thay 'contact' bằng slug của trang liên hệ
        wp_enqueue_script('location-script', get_template_directory_uri() . '/js/location.js', array('jquery'), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_location_script');

function enqueue_location_script() {

if (is_page('contact')) { // Thay 'contact' bằng slug của trang liên hệ

wp_enqueue_script('location-script', get_template_directory_uri() . '/js/location.js', array('jquery'), '1.0', true);

}

add_action('wp_enqueue_scripts', 'enqueue_location_script');

Để đưa dữ liệu tỉnh, quận và phường đã chọn vào email Contact Form 7, hãy thêm mã này vào tệp PHP đầu tiên:

// Thêm thẻ có các trường trong Mail 
add_filter('wpcf7_mail_tag_replaced_province', 'get_province_name', 10, 4);
add_filter('wpcf7_mail_tag_replaced_district', 'get_district_name', 10, 4);
add_filter('wpcf7_mail_tag_replaced_ward', 'get_ward_name', 10, 4);

function get_province_name($replaced, $submitted, $html, $mail_tag) {
    $code = $submitted;
    $response = wp_remote_get("https://provinces.open-api.vn/api/p/$code");
    $data = json_decode(wp_remote_retrieve_body($response));
    return $data->name ?? $submitted;
}

function get_district_name($replaced, $submitted, $html, $mail_tag) {
    $code = $submitted;
    $response = wp_remote_get("https://provinces.open-api.vn/api/d/$code");
    $data = json_decode(wp_remote_retrieve_body($response));
    return $data->name ?? $submitted;
}

function get_ward_name($replaced, $submitted, $html, $mail_tag) {
    $code = $submitted;
    $response = wp_remote_get("https://provinces.open-api.vn/api/w/$code");
    $data = json_decode(wp_remote_retrieve_body($response));
    return $data->name ?? $submitted;
}

// Thêm thẻ có các trường trong Mail

add_filter('wpcf7_mail_tag_replaced_province', 'get_province_name', 10, 4);

add_filter('wpcf7_mail_tag_replaced_district', 'get_district_name', 10, 4);

add_filter('wpcf7_mail_tag_replaced_ward', 'get_ward_name', 10, 4);

function get_province_name($replaced, $submitted, $html, $mail_tag) {

$code = $submitted;

$response = wp_remote_get("https://provinces.open-api.vn/api/p/$code");

$data = json_decode(wp_remote_retrieve_body($response));

return $data->name ?? $submitted;

}

function get_district_name($replaced, $submitted, $html, $mail_tag) {

$code = $submitted;

$response = wp_remote_get("https://provinces.open-api.vn/api/d/$code");

$data = json_decode(wp_remote_retrieve_body($response));

return $data->name ?? $submitted;

}

function get_ward_name($replaced, $submitted, $html, $mail_tag) {

$code = $submitted;

$response = wp_remote_get("https://provinces.open-api.vn/api/w/$code");

$data = json_decode(wp_remote_retrieve_body($response));

return $data->name ?? $submitted;

}

Cấu hình trong Mail của Contact Form 7

Thông tin địa chỉ:
Tỉnh/Thành phố: [province]
Quận/Huyện: [district]
Phường/Xã: [ward]

Thông tin địa chỉ:

Tỉnh/Thành phố: [province]

Quận/Huyện: [district]

Phường/Xã: [ward]

Giải thích code

HTML Form:

Sử dụng shortcode của Contact Form 7 để tạo 3 dropdown menu
Mỗi dropdown có class riêng để dễ dàng điều khiển bằng JavaScript

JavaScript:

Sử dụng jQuery để gọi API và xử lý sự kiện
Vô hiệu hóa các dropdown quận/huyện và phường/xã cho đến khi người dùng chọn tỉnh/thành phố
Tự động cập nhật danh sách khi người dùng thay đổi lựa chọn

PHP:

Đăng ký script chỉ trên trang liên hệ để tối ưu hiệu suất
Thêm dependency jQuery để đảm bảo script hoạt động chính xác

Lưu ý

Đảm bảo thư mục /js/ tồn tại trong theme của bạn
Kiểm tra đường dẫn file trong functions.php phù hợp với cấu trúc theme
API có thể có giới hạn số lượng request, nên cân nhắc cache dữ liệu nếu cần
Test kỹ form trên các trình duyệt khác nhau

Với hướng dẫn trên, bạn đã có thể tích hợp thành công API địa chỉ Việt Nam vào Contact Form 7. Người dùng có thể dễ dàng chọn địa chỉ chính xác từ tỉnh đến phường/xã.

Theo dỗi tên trên Fanpage và Youtube của mình nhé.