Gần đây, nhiều độc giả đã hỏi chúng tôi làm cách nào để có thể tự động thêm nội dung vào trường địa chỉ của các form WordPress. Tự động thêm nội dung cho phép người dùng nhanh chóng chọn địa chỉ từ các đề xuất hiển thị ngay trên form khi cần nhập trường địa chỉ. Trong bài viết này, chúng tôi sẽ hướng dẫn cho bạn cách tự động thêm nội dung cho các trường địa chỉ trong WordPress bằng Google Places API nhé!
Video hướng dẫn
Nếu bạn không thích xem video này hoặc cần thêm hướng dẫn, hãy theo dõi nội dung bên dưới.
Hướng dẫn cách tự động thêm nội dung cho trường địa chỉ trong form WordPress
Đầu tiên, bạn cần phải cài đặt và kích họat plugin Address Autocomplete Using Google Place API. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress .
Sau khi kích hoạt, bạn hãy truy cập Settings » Google Autocomplete để định cấu hình cài đặt plugin.
Bạn sẽ được yêu cầu nhập Google Places API Key. Mã API key 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 Google Maps ngay tại thời điểm đó.
Chuyển đến trang web Google Developer Console và tạo một dự án mới.
Một cửa sổ bật lên yêu cầu bạn cung cấp tên cho dự án của bạn. Hãy chọn một tên dễ nhớ, có thể giúp bạn ngay lập tức nhớ được mục đích của dự án và click vào nút Create.
Sau khi cửa sổ bật lên biến mất, bạn sẽ được tự động chuyển hướng đến dự án mới của mình.
Bây giờ bạn sẽ thấy danh sách các API Google phổ biến mà bạn có sử dụng thể kích hoạt dự án. Bạn cần xác định vị trí và click 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 API đó hoạt động. Bạn cần nhấp vào link Enable để tiếp tục.
Developer console sẽ bật Google Places API cho dự án của bạn.
Tuy nhiên, bạn vẫn sẽ cần thông tin đăng nhập để sử dụng API trên trang web của mình. Vì vậy, hãy click vào nút Create credentials để tiếp tục.
Trên màn hình tiếp theo, bạn hãy click vào nút ‘What credentials do I need?’.
Developer console sẽ hiển thị mã API key cho bạn. Bạn cần sao chép và dán API key này vào phần cài đặt plugin trên trang web WordPress của mình.
Bạn vẫn cần kích hoạt một API khác trong dự án Google Developers của bạn. Hãy click chọn Library trong Google Developer Console và sau đó click vào ‘Google Maps JavaScript API‘.
Bạn sẽ được chuyển đến trang tổng quan của API, bạn hãy nhấp vào liên kết ‘Enable‘ để tiếp tục.
API này không cần bổ sung API key nên bạn có thể sử dụng ngay.
Kích hoạt tính năng tự động đề xuất địa chỉ trong các trường trên form WordPress
Bạn có thể thêm tính năng tự động thêm địa chỉ vào bất kỳ trường của bất kỳ form nào được tạo ra bởi bất kỳ plugin form builder WordPress nào.
Chúng tôi dùng WPForms để minh họa cho hướng dẫn này. Các thao tác thực hiện cũng tương tự cho tất các plugin form builder WordPress khác.
Trước tiên, bạn cần tạo một form có trường địa chỉ.
Sau khi bạn đã hoàn tất, hãy thêm form này vào trang web của bạn như cách bạn vẫn thường làm.
Tiếp theo, bạn hãy đi đến bài đăng hoặc trang mà bạn đã thêm form. Bạn click chuột phải vào trường địa chỉ và chọn ‘Inspect’ từ menu trình duyệt.
Bạn sẽ thấy giá trị name, ID và CSS class của trường địa chỉ.
Ví dụ: trong ảnh chụp màn hình này, giá trị name của form của chúng tôi là wpforms[fields][9][address1], giá trị ID là wpforms-352-field_9và giá trị css class là wpforms-field-address-address1.
Bạn chỉ cần sao chép một trong những giá trị này và dán nó vào trang cài đặt plugin.
Nếu bạn muốn cài đặt cho nhiều form cùng một lúc, bạn chỉ cần thêm dấu phẩy và sau đó là giá trị của những form khác.
Đừng quên nhấp vào nút save để lưu các thay đổi của bạn.
Bây giờ bạn có thể truy cập trang form của mình và thử nhập địa chỉ. Trường địa chỉ của form sẽ tự động bắt đầu hiển thị các đề xuất bằng Google places và Google Maps.
Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách tự động thêm nội dung cho trường địa chỉ của form WordPress. Bạn có thể xem thêm danh sách 24 plugin WordPress phải có cho các trang web kinh doanh của chúng tôi.
Nếu bạn thích bài viết này, vui lòng đăng ký YouTube Channel của chúng tôi để xem thêm các hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook.