Bạn có muốn thêm tính năng tự động hoàn thành cho các trường địa chỉ trong WordPress không?
Gần đây, một trong những người dùng của WPBeginner Việt Nam đã hỏi WPBeginner Việt Nam cách thêm chức năng tự động hoàn thành cho các trường địa chỉ trong form WordPress. Chức năng tự động hoàn thành cho phép người dùng nhanh chóng chọn địa chỉ từ các gợi ý được tạo theo thời gian thực khi họ nhập.
Trong bài viết này, WPBeginner Việt Nam sẽ chỉ cho bạn cách thêm tính năng tự động hoàn thành cho các trường địa chỉ trong WordPress bằng Google Places API.
Tại sao thêm trường địa chỉ tự động hoàn thành trong WordPress
Việc thêm trường địa chỉ tự động hoàn thành vào WordPress có thể giúp bạn cải thiện trải nghiệm của người dùng trên website của mình.
Ví dụ, nếu bạn sở hữu một cửa hàng eCommerce, khách hàng của bạn sẽ có thể nhập địa chỉ nhanh hơn và tránh lỗi đánh máy.
Khi người mua sắm nhập địa chỉ của họ, các địa chỉ có thể sẽ hiển thị trên màn hình dựa trên vị trí hiện tại của họ, vì vậy tất cả những gì họ cần làm là chọn đúng địa chỉ. Điều này giúp bạn giảm lỗi vì các option được hiển thị cho người dùng được kết nối với Google Places và Google Maps API.
Tự động hoàn thành trong trường địa chỉ là một trong những chức năng tiện lợi nhất mà bạn có thể cung cấp cho người dùng. Nếu bạn có thể nhanh chóng giúp người mua thanh toán, họ có nhiều khả năng sẽ mua hàng hơn.
Bằng cách thực hiện mỗi giao dịch mua hàng nhanh chóng và đơn giản, bạn có nhiều khả năng tăng doanh số bán hàng và biến người mua hàng thường xuyên thành khách hàng thường xuyên.
Bây giờ bạn đã hiểu được lợi ích của việc thêm trường địa chỉ tự động hoàn thành trong WordPress, WPBeginner Việt Nam sẽ hướng dẫn bạn cách thực hiện từng bước.
Video hướng dẫn
Nếu bạn không thích video này hoặc cần thêm hướng dẫn, hãy tiếp tục đọc.
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt Tự động hoàn thành Địa chỉ Google plugin.
Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của WPBeginner Việt Nam về cách cài đặt plugin WordPress.
Sau khi kích hoạt, bạn cần phải truy cập Cài đặt » Tự động hoàn thành trong dashboard WordPress của bạn để cấu hình cài đặt plugin.
Bạn sẽ được yêu cầu nhập Khóa API Google Places. Khóa API này cho phép website của bạn kết nối với Google Maps và lấy các recommend tự động hoàn thành từ cơ sở dữ liệu của họ theo thời gian thực.
Truy cập Khóa API Google Places
Đi đến Bảng điều khiển dành cho developer của Google website và tạo một dự án mới.
Bạn sẽ được đưa đến một trang mới yêu cầu bạn cung cấp tên cho dự án của mình.
Sử dụng tên giúp bạn xác định dự án sau này, sau đó nhấp vào nút ‘Tạo’. Nếu bạn có tổ chức mà bạn muốn kết nối, bạn có thể nhấp vào link ‘Duyệt’ để xem danh sách dropdown các option.
Đợi vài giây và bạn sẽ tự động được chuyển hướng đến trang API & Dịch vụ.
Từ đây, bạn muốn điều hướng đến dashboard bên trái và nhấp vào tab ‘Thư viện’.
Bây giờ, bạn sẽ thấy danh sách các API Google phổ biến mà bạn có thể bật cho dự án của mình. Trong bảng bên trái, chọn ‘Bản đồ’ để lọc theo các option chỉ liên quan đến bản đồ.
Bạn chỉ cần tìm và nhấp vào option ‘Places API’.
Từ đó, bạn sẽ được chuyển hướng đến trang tổng quan của Places API.
Chỉ cần nhấp vào nút ‘Kích hoạt’ để cấp quyền cho API.
Nếu Google Console của bạn được thiết lập đúng cách, bạn sẽ thấy một popup xuất hiện với Khóa API của mình.
Tuy nhiên, nếu đây là lần đầu tiên bạn thiết lập tài khoản Google Console, bạn có thể phải nhập thông tin thanh toán.
Bây giờ, bạn có thể quay lại trang WordPress của mình.
Dán khóa API từ Google Console vào nơi ghi ‘Khóa API Google Place’.
Để đảm bảo địa chỉ tự động hoàn thành hoạt động trong WordPress, bạn sẽ cần bật Google Maps JavaScript API.
Vì vậy, tất cả những gì bạn phải làm là quay lại tab ‘API & Dịch vụ’ từ dashboard Google Developer Console. Sau đó, tìm ‘Maps JavaScript API’ và nhấp vào ‘Enable’.
Bây giờ, bạn đã sẵn sàng để thêm ID form.
Ở bước tiếp theo, bạn sẽ cần ID form của trường địa chỉ mà bạn muốn thêm tính năng tự động điền địa chỉ.
Bật tính năng Tự động điền địa chỉ trong các trường form WordPress
Bạn có thể thêm tính năng địa chỉ tự động hoàn thành vào bất kỳ trường form nào được tạo bởi bất kỳ plugin xây dựng form WordPress nào.
Chúng tôi sẽ sử dụng Biểu mẫu WP trong hướng dẫn này vì đây là trình tạo form kéo và thả tốt nhất và dễ sử dụng nhất cho người mới bắt đầu. Tuy nhiên, các hướng dẫn này sẽ hiệu quả bất kể bạn đang sử dụng plugin form liên hệ nào.
Đầu 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ỉ.
Khi hoàn tất, hãy thêm form này vào website WordPress của bạn như bình thường.
Tiếp theo, hãy đến bài đăng hoặc trang mà bạn đã thêm form. Bạn cần nhấp chuột phải vào trường địa chỉ và chọn ‘Kiểm tra’ từ menu trình duyệt.
Tại đây, bạn sẽ thấy phần được tô sáng với giá trị ID form cho trường nhập liệu.
Ví dụ, trong ảnh chụp màn hình này, giá trị ID của form của WPBeginner Việt Nam là wpforms-567-field_4
.
Bạn cần sao chép giá trị này và dán vào trang cài đặt plugin.
Tuy nhiên, bạn sẽ muốn thêm tính năng tự động hoàn thành vào toàn bộ form địa chỉ của mình. Ví dụ, nếu bạn muốn người dùng có thể tự động điền toàn bộ địa chỉ giao hàng, điều đó có nghĩa là họ sẽ cần tự động điền thành phố, nơi bắt đầu và code bưu chính.
Trong trường hợp này, bạn sẽ cần làm theo quy trình tương tự bằng cách nhấp vào “Kiểm tra” rồi tìm ID form cho từng trường.
Sau khi đã có tất cả ID, hãy sao chép chúng vào trang Tự động hoàn thành, nơi có content ‘ID form’.
Khi thêm nhiều ID, bạn sẽ cần phải phân tách từng ID bằng dấu phẩy có dấu ngoặc kép, như được hiển thị bên dưới. Khi bạn hoàn tất, đừng quên nhấn ‘Lưu thay đổi’.
Vậy là xong; bây giờ bạn có thể truy cập trang form và thử nhập địa chỉ.
Trường form sẽ tự động hiển thị các gợi ý bằng Google Địa điểm và Google Maps.
Bây giờ, bạn đã thêm thành công tính năng tự động hoàn thành địa chỉ Google vào form của mình. Người dùng sẽ có thể tự động điền form của bạn, cho dù họ đang thanh toán từ cửa hàng WooCommerce của bạn hay hoàn tất đăng ký người dùng.
Chúng tôi hy vọng bài viết này giúp bạn biết cách thêm chức năng tự động hoàn thành cho các trường địa chỉ trong WordPress. Bạn cũng có thể muốn xem danh sách 24 plugin WordPress cần có cho các website kinh doanh hoặc hướng dẫn của WPBeginner Việt Nam về cách tạo bản tin email.
Nếu bạn thích bài viết này, vui lòng đăng ký theo dõi WPBeginner Việt Nam Kênh Youtube cho các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy WPBeginner Việt Nam trên Twitter Và Facebook.