Bỏ qua đến nội dung chính

Làm thế nào để tự động điền vào các trường địa chỉ

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 701.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Gần đây, một trong những người dùng của chúng tôi đã hỏi chúng tôi cách thêm tính năng tự động điền cho các trường địa chỉ trên biểu mẫu WordPress. Tự động hoàn thành cho phép người dùng nhanh chóng chọn địa chỉ của các đề xuất được tạo trong thời gian thực khi họ nhập.

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm tự động điền cho các trường địa chỉ trên WordPress bằng cách sử dụng " Địa chỉ API của Google '.

Cách thêm tự động hoàn thành trên wordpress 1

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin " Địa chỉ Tự động hoàn thiện Sử dụng Google Place Api ". Để biết thêm chi tiết, xem hướng dẫn từng bước của chúng tôi trên Cách cài đặt plugin WordPress.

Sau khi kích hoạt, bạn phải truy cập vị trí " Cài đặt> Tự động điền của Google Trang để cấu hình các cài đặt plugin.

Định cấu hình tự động hoàn thành trên wordpress

Bạn sẽ được nhắc nhập khóa API Google Địa điểm. 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 trên cơ sở dữ liệu của họ trong thời gian thực.

Đi đến " Google phát triển Bảng điều khiển Để tạo một dự án mới.

Google phát triển bảng điều khiển

Một cửa sổ sẽ xuất hiện yêu cầu bạn cung cấp tên cho dự án của mình. Sử dụng tên sẽ giúp bạn xác định dự án sau này, sau đó nhấp vào nút "Tạo".

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

Bây giờ bạn sẽ thấy danh sách các API Google mà bạn có thể kích hoạt cho dự án của mình. Bạn cần xác định vị trí và nhấp vào " Dịch vụ Web API của Google Địa điểm '.

Danh sách các khóa api của google

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Thao tác này sẽ đưa bạn đến trang xem trước giải thích cách hoạt động của API này. Bạn phải nhấp vào liên kết “Kích hoạt” để tiếp tục.

Kích hoạt mô-đun dịch vụ web api của Google địa điểm

Bảng điều khiển dành cho nhà phát triển sẽ cho phép Google Place API cho dự án của bạn.

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

Tạo thông tin đăng nhập

Trên màn hình tiếp theo, bạn cần nhấp vào nút "Tôi cần thông tin xác thực nào".

Bất kỳ thông tin tôi cần

Bảng điều khiển dành cho nhà phát triển sẽ hiển thị cho bạn khóa API. Bạn phải sao chép khóa này và dán nó vào cài đặt trên trang web WordPress của bạn.

Sao chép khóa api google

Bạn phải luôn kích hoạt khóa API khác trong dự án Nhà phát triển Google của mình. Nhấp vào thư viện trong Bảng điều khiển dành cho nhà phát triển của Google và sau đó nhấp vào " JavaScript Google Maps API '.

Google maps javascript api

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Thao tác này sẽ đưa bạn đến trang “Tổng quan về API”, nơi bạn cần nhấp vào liên kết “Kích hoạt” để tiếp tục.

Google map javascript api

API này không cần khóa API bổ sung, vì vậy bạn đã sẵn sàng để tiếp tục.

Cách bật tự động hoàn thành trong các trường biểu mẫu

Bạn có thể thêm chức năng tự động hoàn thành vào các trường được tạo bởi các plugin tạo biểu mẫu.

Chúng tôi sẽ sử dụng WPForms trong hướng dẫn này. Tuy nhiên, plugin này có thể hoạt động với bất kỳ plugin tạo biểu mẫu nào.

Trước tiên, bạn phải tạo một biểu mẫu có một trường địa chỉ hoặc một tập hợp các trường địa chỉ.

Khi bạn đã hoàn tất, hãy thêm biểu mẫu này vào trang web của bạn như bình thường.

Sau đó đi đến bài viết hoặc trang nơi bạn đã thêm biểu mẫu của mình. Bạn phải nhấp chuột phải vào trường và chọn "Kiểm tra" từ menu trình duyệt.

Trường địa chỉ wpforms biểu mẫu Wordpress

Bạn sẽ thấy tên, ID và các giá trị của lớp CSS cho trường địa chỉ.

Ví dụ, trong bản chụp này, tên thuộc tính " wpforms [ruộng] [9] [address1] Giá trị ID là " wpforms-352-field_9 Và lớp css là " wpforms-field-address-address1 '.

Bạn phải sao chép chỉ 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 nhắm mục tiêu nhiều trường trong nhiều biểu mẫu, thì bạn chỉ cần thêm dấu phẩy và thêm các giá trị khác.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Thêm địa chỉ từ các trường wordpress

Đừng quên nhấp vào nút « Enregistrer Để lưu các thay đổi của bạn.

Vậy là xong, bây giờ bạn có thể truy cập trang biểu mẫu và thử nhập địa chỉ. Trường biểu mẫu sẽ bắt đầu hiển thị các đề xuất bằng Google Địa điểm và Google Maps.

Google và vị trí bản đồ google

Đó là tất cả cho hướng dẫn này, tôi hy vọng nó sẽ cho phép bạn thêm tự động hoàn thành trong các trường WordPress.

Bài viết này chứa 1 bình luận

  1. Tôi có biết phải làm gì để chặn tự động điền biểu mẫu trên trang không?
    Bởi vì thường nếu ai đó có nhiều dữ liệu, ví dụ như nhấp vào tên của tự động hoàn thành, phần còn lại nhảy vào chúng tôi và thường không chính xác và khách hàng không nhìn thấy và gửi sai mẫu ? Tất nhiên, đây là WordPress.

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
15 cổ phiếu
cổ phiếu12
tweet
Enregistrer3