Thêm tính năng tự động điền cho trường địa chỉ trong WordPress

Lượt xem
Nguyễn Thanh Trường
Home

Tự động điền cho trường địa chỉ cho phép người dùng nhanh chóng chọn địa chỉ từ các đề xuất được tạo ra ngay khi họ nhập liệu, và giúp họ tiết kiệm thời gian hơn rất nhiều. Trong bài viết này, Vietnix sẽ hướng dẫn bạn cách thêm tính năng tự động điền cho các trường địa chỉ trong WordPress bằng Google Places API.

Cách thêm tính năng tự động điền cho trường địa chỉ trong form WordPress

Bước đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Address Autocomplete Using Google Place Api. Để biết cách cài đặt, hãy xem hướng dẫn từng bước của Vietnix về cách cài đặt plugin WordPress.

Sau khi kích hoạt, bạn cần truy cập Settings » Google Autocomplete để định cấu hình các thiết lập của plugin.

Cài đặt và kích hoạt plugin địa chỉ tự động
Cài đặt và kích hoạt plugin địa chỉ tự động

Bạn sẽ cần phải nhập khóa Google Places API. Khóa API này cho phép trang web của bạn kết nối với Google Maps và truy xuất các đề xuất tự động từ cơ sở dữ liệu của họ trong thời gian thực.

Tiếp đến, truy cập trang web Google Developer Console và tạo một dự án mới.

Tạo dự án mới
Tạo dự án mới

Một cửa sổ popup sẽ xuất hiện yêu cầu bạn cung cấp tên cho dự án của mình, sau đó nhấp vào nút ‘create’.

Cửa sổ popup sẽ biến mất, bạn sẽ tự động được chuyển hướng đến dự án mới của mình trong vài giây.

Lúc này bạn sẽ thấy danh sách các API phổ biến của Google mà bạn có thể kích hoạt cho dự án của mình. Sau đó, bạn cần xác định vị trí và nhấp vào ‘Google Places API Web Service‘.

Nhấp vào Google Places API Web Service
Nhấp vào Google Places API Web Service

Thao tác này sẽ đưa bạn đến một trang tổng quan giải thích cách thức hoạt động của API này. Để tiếp tục, nhấp vào ‘Enable link’ để tiếp tục.

Nhấp Enable để tiếp tục
Nhấp Enable để tiếp tục

Bảng điều khiển dành cho nhà phát triển hiện sẽ kích hoạt Google Places API cho dự án của bạn.

Tuy vậy, bạn vẫn sẽ cần thông tin xác thực để sử dụng API trên trang web của mình. Vì vậy, nhấp vào nút ‘create credentials‘ để tiếp tục.

Nhận thông tin đặng nhập API
Nhận thông tin đặng nhập API và nhấp ‘Create Credentials

Tiếp tục, bạn cần nhấp vào ‘What credentials do I need?‘.

Thêm credential vào dự án
Thêm credential vào dự án

Developer console sẽ hiển thị cho bạn khóa API. Sau đó, bạn sao chép khóa này và dán vào phần cài đặt plugin trên trang web WordPress của mình.

Sao chép khóa API
Sao chép khóa API

Tuy nhiên, bạn vẫn cần bật một API khác trên dự án Google Developers của mình. Do đó, bạn hãy nhấp vào thư viện trong Google Developer Console của Google rồi nhấp vào ‘Google Maps JavaScript API‘.

Nhấn Google Maps JavaScript API để thêm API khác
Nhấn Google Maps JavaScript API để bật API khác

Thao tác này sẽ đưa bạn đến trang tổng quan của API nơi bạn cần nhấp vào liên kết ‘Enable’ để tiếp tục.

Nhấn Enable để tiếp tục
Nhấn Enable để tiếp tục

Đặc biệt, API này không cần thêm khóa API, vì vậy bạn đã có thể sử dụng.

Bên cạnh việc thêm tính năng tự đồng điền, muốn xây dựng một trang web WordPress chuyên nghiệp và thu hút người dùng, bạn cần bổ sung thêm nhiều tính năng khác. Để làm điều này, việc sử dụng các theme và plugin hỗ trợ là cần thiết, từ đó bạn có thể tận dụng tối đa các tính năng và công cụ có sẵn để tạo nên một website WordPress đẹp mắt, chuyên nghiệp và hấp dẫn người dùng.

Hiện tại khi đăng ký dịch vụ WordPress Hosting tại Vietnix bạn sẽ được nhận miễn phí bộ theme & plugin trị giá lên đến 26.000.000 VND giúp bạn nâng cao chất lượng, chức năng và trải nghiệm người dùng của trang web một cách nhanh chóng và hiệu quả.

cd wordpress hosting
Thêm tính năng tự động điền cho trường địa chỉ trong WordPress 34

Nếu bạn cần dịch vụ WordPress Hosting chất lượng cùng hỗ trợ chuyên nghiệp, Vietnix là lựa chọn hàng đầu với các ưu điểm nổi bật:

  • Tải trang nhanh chóng dưới 1 giây với ổ cứng NVMe và công nghệ LiteSpeed Enterprise.
  • Đội ngũ kỹ thuật chuyên nghiệp tư vấn và tối ưu hóa mã nguồn WordPress.
  • Hệ thống sao lưu tự động 4 lần/ngày, bảo vệ dữ liệu an toàn.
  • Hạ tầng hiện đại với Firewall chống DDoS, đảm bảo ổn định và an toàn.
  • Dễ dàng tạo website WordPress qua WordPress Toolkit chỉ với một cú nhấp chuột.
  • Thiết kế website an toàn và tiện lợi với khu vực thử nghiệm không giới hạn. 
  • Được tặng miễn phí bộ theme và plugin WordPress có giá lên đến 26.000.000 VND

Vietnix mang đến trải nghiệm đáng tin cậy cho việc xây dựng và quản lý website của bạn.

Chương trình khuyến mãi Mua Hosting Rinh Tên Miền

Kích hoạt tính năng tự động điền cho trường địa chỉ trong form WordPress

Bạn có thể thêm tính năng tự động điền cho trường địa chỉ trong form WordPress bằng bất kì plugin nào.

Trong hướng dẫn này, Vietnix sẽ sử dụng WPForms. Tuy nhiên, những hướng dẫn này tương tự giống với các plugin tạo form khác.

Trước tiên, bạn cần tạo một form có trường địa chỉ hoặc một tập hợp các trường địa chỉ.

Sau đó, hãy thêm form này vào trang web của bạn.

Tiếp đến, đi tới bài đăng hoặc page mà bạn đã thêm form của mình, nhấp chuột phải vào trường địa chỉ và chọn ‘Inspect‘ từ menu trình duyệt.

ID và CSS cho trường địa chỉ
ID và CSS cho trường địa chỉ

Bạn sẽ thấy tên, ID và CSS cho trường địa chỉ.

Ví dụ: trong ảnh trên, giá trị tên form của Vietnix là wpforms[fields][9][address1], giá trị ID là wpforms-352-field_9 và CSS là wpforms-field-address-address1.

Tiếp đến, bạn chỉ cần sao chép một trong các giá trị này và dán vào trang cài đặt plugin.

Nếu bạn muốn áp dụng cho nhiều trường trong nhiều form, thì bạn chỉ cần thêm dấu phẩy và thêm giá trị khác.

Các trường địa chỉ đích trong form
Các trường địa chỉ đích trong form

Cuối cùng, bạn nhấp vào nút ‘Save’ để lưu các thay đổi của bạn.

Giờ đây, bạn có thể truy cập trang form của mình và thử nhập địa chỉ. Trường form sẽ tự động hiển thị đề xuất bằng cách sử dụng Google Places và Google Maps.

Địa chỉ tự động hiển thị khi nhập liệu
Địa chỉ tự động hiển thị khi nhập liệu

Vietnix với hơn 11 năm hoạt động đã đồng hành với hơn 50.000 khách hàng cá nhân và doanh nghiệp thông qua hệ sinh thái dịch vụ gồm: Hosting, VPS, Firewall, máy chủ, tên miền và email,… Đến năm 2022 Vietnix vinh dự được nhận giải Thương hiệu Việt Nam xuất sắc.

cd
Thêm tính năng tự động điền cho trường địa chỉ trong WordPress 35

Đặc biệt, với tỷ lệ 97% khách hàng sau khi sử dụng dịch vụ tại Vietnix đã giới thiệu đến bạn bè, đồng nghiệp,… cũng là một minh chứng cho chất lượng dịch vụ luôn đáp ứng được mọi nhu cầu của khách hàng.

Do đó, bạn có thể hoàn toàn yên tâm khi sử dụng dịch vụ tại Vietnix.

  • Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, Thành Phố Hồ Chí Minh.
  • Hotline: 1800 1093
  • Email: sales@vietnix.com.vn

Lời kết

Vietnix hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm tính năng tự động điền cho trường địa chỉ trong WordPress. Bạn cũng có thể muốn xem danh sách plugin WordPress cần có cho website kinh doanh của Vietnix để hỗ trợ cho công việc kinh doanh của mình, chúc bạn thành công!

Chia sẻ lên

Theo dõi trên

Logo Google new

Đánh giá

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

Nguyễn Thanh Trường

Kết nối với mình qua

Icon Quote
Icon Quote
Đăng ký nhận tin
Để không bỏ sót bất kỳ tin tức hoặc chương trình khuyến mãi từ Vietnix

Google reCaptcha: Invalid site key.

Bình luận