VietNetwork.Vn

Bạn có muốn hiển thị bản đồ trên biểu mẫu liên hệ trên trang web của mình không?

Bạn có thể sử dụng vị trí địa lý để điền trước địa chỉ của người dùng và cho biết vị trí của họ bằng cách đặt ghim trên bản đồ. Điều này làm cho việc điền vào biểu mẫu dễ dàng hơn và nhanh hơn, do đó dẫn đến tỷ lệ hoàn thành tốt hơn.

Trong bài viết này, mình sẽ hướng dẫn bạn cách nhúng Bản đồ Google vào các biểu mẫu liên hệ bằng ghim bản đồ.

1. Tại sao Nhúng Bản đồ Google vào Biểu mẫu Liên hệ của bạn?

Khi bạn tạo trang web WordPress của mình, rất có thể bạn đã thêm một biểu mẫu liên hệ để khách truy cập có thể dễ dàng liên hệ với bạn về các sản phẩm và dịch vụ của bạn.

Và nếu doanh nghiệp của bạn có một vị trí thực tế, thì bạn có thể cũng đã thêm Bản đồ Google về vị trí của riêng mình để khuyến khích mọi người ghé thăm cửa hàng của bạn.

Điều mà nhiều chủ doanh nghiệp không biết là bạn có thể sử dụng định vị địa lý để tự động điền vào trường địa chỉ trên biểu mẫu liên hệ của mình và hiển thị vị trí của người dùng trên bản đồ. Điều này cải thiện trải nghiệm người dùng tổng thể và giúp giảm việc bỏ qua biểu mẫu.

Biết vị trí của người dùng cũng cho phép bạn sử dụng nhắm mục tiêu theo vị trí địa lý để hiển thị nội dung được cá nhân hóa và tăng tỷ lệ chuyển đổi.

Như đã nói, chúng ta hãy xem cách nhúng Bản đồ Google vào biểu mẫu liên hệ.

2. Cách Nhúng Bản đồ Google vào Biểu mẫu Liên hệ

Đối với hướng dẫn này, mình sẽ sử dụng WPForms, plugin biểu mẫu liên hệ tốt nhất cho WordPress. Nó cho phép bạn dễ dàng tạo bất kỳ loại biểu mẫu nào bằng trình tạo biểu mẫu kéo và thả đơn giản.

Có một phiên bản WPForms miễn phí có sẵn với tất cả các tính năng bạn cần để tạo một biểu mẫu liên hệ cơ bản. Tuy nhiên, đối với hướng dẫn này, mình sẽ sử dụng WPForms Pro vì nó bao gồm addon Google Map.

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin WPForms. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của mình về cách cài đặt plugin WordPress.

Sau khi kích hoạt, bạn cần truy cập trang WPForms >> Settings để nhập khóa cấp phép của mình. Bạn có thể tìm thấy thông tin này trong khu vực tài khoản WPForms của mình. Đảm bảo rằng bạn nhấp vào nút 'Verify Key' để kích hoạt giấy phép của mình.


Tiếp theo, bạn cần điều hướng đến WPForms >> Addons và tìm Geolocation Addon. Bạn có thể sử dụng tùy chọn tìm kiếm ở đầu màn hình hoặc chỉ cần cuộn qua các phần bổ trợ có sẵn.

Khi bạn đã tìm thấy nó, bạn nên cài đặt tiện ích bổ sung bằng cách nhấp vào nút 'Install Addon'.


Bây giờ addon Vị trí địa lý đã được kích hoạt, bạn sẽ cần phải định cấu hình cài đặt của nó. Để làm điều đó, hãy điều hướng đến WPForms >> Settings và nhấp vào tab Geolocation.

Trên trang này, bạn cần chọn một nhà cung cấp vị trí địa lý. Đối với bài viết này, mình sẽ chọn Google Places API.


Bạn cũng nên nhấp vào hộp kiểm 'Current Location'. Điều này sẽ phát hiện và tự động điền địa chỉ khi người dùng điền vào biểu mẫu liên hệ, tiết kiệm thời gian và cải thiện độ chính xác.

Tiếp theo, bạn cần cuộn xuống cài đặt API Google Địa điểm. Bạn sẽ được yêu cầu điền vào khóa API Google của mình. Bạn có thể lấy khóa của mình từ Google và sau đó dán vào trường. mình sẽ chỉ cho bạn cách thực hiện điều đó trong phần tiếp theo.


2.1. Tạo khóa Google Places API Key

Bạn có thể lấy khóa API cho Google Địa điểm bằng cách truy cập trang web Google Cloud Console   Đăng nhập để xem liên kết

Bạn sẽ được yêu cầu chọn quốc gia của mình từ menu thả xuống và đồng ý với các điều khoản dịch vụ. Ở một số quốc gia, bạn cũng có thể có cơ hội đăng ký danh sách gửi thư.


Khi bạn đã sẵn sàng chuyển sang bước tiếp theo, hãy nhấp vào 'Agree and Continue'.

Tiếp theo, bạn sẽ cần chọn một dự án cho khóa API. Chỉ cần nhấp vào 'Select a project' và nhấp vào dự án bạn muốn sử dụng từ danh sách.


Nếu bạn chưa tạo dự án trước đây hoặc đây là một trang web mới mà bạn chưa thêm vào Google, thì bạn nên nhấp vào 'New Project' để thiết lập.

Lưu ý: Google sẽ yêu cầu bạn bật thanh toán cho dự án đó để sử dụng API Google Địa điểm. Họ cung cấp 300 đô la đầu tiên miễn phí, số tiền này đủ để bao gồm một bản đồ nhúng đơn giản như mình đang tạo trong hướng dẫn này. Các trang web có lưu lượng truy cập nhỏ hơn sẽ không cần phải trả bất kỳ khoản nào và họ sẽ yêu cầu bạn cho phép nâng cấp trước khi tính bất kỳ khoản phí nào.

Bây giờ bạn sẽ ở trên trang 'APIs & Services' nơi bạn có thể kích hoạt các API cần thiết để hiển thị Google Maps trên trang web của mình. Bạn sẽ cần nhấp vào nút '+ Enable APIs and Services' ở đầu trang.


Thao tác này sẽ đưa bạn đến Thư viện API của Google, nơi bạn sẽ cần kích hoạt ba API ánh xạ khác nhau.

Bạn có thể tìm thấy chúng bằng cách sử dụng chức năng tìm kiếm ở đầu trang hoặc bằng cách nhấp vào liên kết 'View All' bên cạnh phần Bản đồ.


Trước tiên, bạn cần tìm và bật API Địa điểm. Khi bạn xác định được vị trí của nó, bạn sẽ cần phải nhấp vào nó. Trên trang tiếp theo, bạn nên nhấp vào nút 'Enable'.

Sau đó, bạn cũng nên làm điều tương tự đối với API Maps JavaScript và API mã hóa địa lý.


Bây giờ bạn đã bật ba API, bạn có thể tạo khóa API.

Trong menu bên trái, bạn cần điều hướng đến APIs & Services >> Credentials.

Từ đây, bạn sẽ có thể nhấp vào nút '+ Create Credentials' ở đầu màn hình và sau đó chọn tùy chọn 'API key'.


Khóa API của bạn sẽ được tạo và hiển thị trên cửa sổ bật lên.

Ở phần sau của hướng dẫn này, bạn sẽ cần sao chép khóa đó vào cài đặt của WPForm. Bây giờ, chúng ta hãy xem cách đặt một số hạn chế đối với việc sử dụng khóa API.


2.2. Hạn chế Khóa API Google Địa điểm của bạn

Việc lạm dụng khóa API có thể khiến bạn không sử dụng được gói miễn phí và tốn nhiều tiền hơn bạn mong đợi. Mình khuyên bạn nên hạn chế khóa để ngăn chặn việc sử dụng trái phép hoặc không mong muốn.

Để làm điều đó, bạn cần nhấp vào liên kết 'Restrict Key' ở cuối cửa sổ bật lên 'API key created' trong ảnh chụp màn hình ở trên.

Trên trang tiếp theo, bạn có thể thiết lập một số hạn chế khác nhau. Đầu tiên trong số này là 'Application restrictions'. Trong phần này, bạn nên nhấp vào tùy chọn 'HTTP referrers (web sites)'. Sau đó, khóa sẽ chỉ được sử dụng trên các trang web.


Tiếp theo, bạn nên đảm bảo rằng nó chỉ được sử dụng trên trang web của riêng bạn. Để làm điều đó, bạn nên cuộn xuống phần 'Website restrictions' và sau đó nhấp vào nút 'Add an Item'.

Bây giờ bạn nên nhập tên miền trang web của mình vào trường 'New item' bằng cách sử dụng mẫu *example.com/*.


Nếu bạn sẽ sử dụng Google Maps trên nhiều trang web, thì bạn có thể nhấp vào nút 'Add an Item' và thêm nhiều tên miền nếu bạn cần.

Bây giờ bạn đã hạn chế khóa API chỉ với các trang web của riêng mình, bạn cũng có thể hạn chế khóa API chỉ hoạt động với các API của Google mà bạn đã thêm ở trên.

Bạn cần cuộn xuống phần 'API restrictions' của trang và chọn tùy chọn 'Restrict key'. Điều này sẽ hiển thị một trình đơn thả xuống nơi bạn nên chọn hộp 'Geocaching API', 'Maps JavaScript API' và 'Places API'.


Khi bạn đã hoàn thành việc đó, bạn nên nhấp vào liên kết 'OK' để lưu cài đặt của mình. Cuối cùng, hãy đảm bảo rằng bạn nhấp vào nút 'Save' ở cuối trang để kích hoạt tất cả các hạn chế bạn đã chọn.


Lưu ý rằng có thể mất đến 5 phút để cài đặt có hiệu lực.

2.3. Thêm Khóa API của Google vào Cài đặt WPForms

Bây giờ bạn sẽ thấy khóa API được liệt kê cùng với bất kỳ khóa nào khác mà bạn có sẵn. Bạn nên nhấp vào biểu tượng Sao chép để có thể thêm khóa vào trang cài đặt Vị trí địa lý WPForms.


Lưu ý rằng nếu bạn cần thay đổi bất kỳ cài đặt hoặc hạn chế nào của API, thì bạn có thể nhấp vào biểu tượng Edit ở bên phải

Bây giờ bạn cần phải quay lại trang web của mình mà vẫn ở trên trang WPForms >> Settings >> Geolocation.

Khi đó, hãy dán khóa vào trường API Google Địa điểm trong cài đặt WPForms. Khi bạn đã hoàn thành việc đó, hãy đảm bảo rằng bạn nhấp vào nút 'Save Settings'.


Lưu ý: Google Địa điểm yêu cầu bạn phải có chứng chỉ SSL cho trang web của mình. Để tìm hiểu cách nhận chứng chỉ SSL, hãy xem hướng dẫn dành cho người mới bắt đầu của mình về cách nhận chứng chỉ SSL miễn phí.

2.4. Tạo biểu mẫu liên hệ với Google Map được nhúng trong WordPress

Bây giờ bạn đã định cấu hình WPForms và Google Địa điểm, bạn đã sẵn sàng tạo biểu mẫu liên hệ trong WordPress. Bạn có thể bắt đầu bằng cách làm theo hướng dẫn của mình về cách tạo biểu mẫu liên hệ trong WordPress.

Khi bạn đã tạo biểu mẫu cơ bản, bạn cần thêm trường địa chỉ. Bạn có thể sử dụng khối Address hoặc trường Single Line Text. Đối với hướng dẫn này, mình sẽ sử dụng trường Single Line Text.

Chỉ cần kéo khối Văn bản Dòng Đơn vào biểu mẫu.


Tiếp theo, mình sẽ tùy chỉnh cài đặt của trường. Để làm điều đó, bạn cần nhấp vào trường hiển thị cài đặt Văn bản Dòng Đơn.

Trước tiên, bạn nên thay đổi nhãn của trường thành 'Address'. Điều này sẽ làm rõ cho người dùng của bạn những gì họ nên nhập vào trường.


Sau đó, bạn cần thay đổi cài đặt của trường để nó hiển thị bản đồ trên biểu mẫu. Để làm điều đó, bạn cần nhấp vào tab Advanced.

Khi đó, bạn nên tìm tùy chọn 'Enable Address Autocomplete' ở cuối cài đặt và chuyển nó sang vị trí 'On'. Sau đó, bạn sẽ thấy một tùy chọn khác, 'Display Map', bạn cũng nên bật tùy chọn này. Bạn có thể chọn hiển thị bản đồ bên trên hoặc bên dưới cánh đồng.


2.5. Thêm biểu mẫu liên hệ vào trang web của bạn

Cách đơn giản nhất để thêm biểu mẫu liên hệ vào trang web của bạn là nhấp vào nút 'Embed'. Bạn sẽ tìm thấy nó bên cạnh nút 'Save' ở đầu màn hình trình chỉnh sửa biểu mẫu.

Bạn sẽ được hỏi có nên thêm biểu mẫu vào biểu mẫu hiện có hay tạo một trang mới.


Đối với hướng dẫn này, mình sẽ nhấp vào nút 'Create New Page'.

Tiếp theo, bạn nên đặt tên cho trang và sau đó nhấp vào cái nút 'Let's Go!'.


Một trang mới với tên đó sẽ được tạo và biểu mẫu liên hệ của bạn sẽ tự động được thêm vào.

Tất cả những gì bạn cần làm là nhấp vào nút 'Publish' để đẩy biểu mẫu trực tuyến.


2.6. Xem Bản đồ Google trong Biểu mẫu liên hệ

Khi một người dùng truy cập vào biểu mẫu liên hệ của bạn, họ sẽ được hỏi liệu họ có muốn cho phép trang web của bạn truy cập vào vị trí của bạn hay không.


Nếu họ nhấp vào nút 'Allow', thì vị trí hiện tại của họ sẽ được nhập vào trường địa chỉ và ghim của vị trí đó sẽ được thêm vào bản đồ.

Tính năng tự động điền này sẽ tiết kiệm thời gian cho khách truy cập bằng cách nhập địa chỉ của họ nhanh hơn và dễ dàng hơn.


Nếu họ cần thay đổi địa chỉ, thì họ có thể chỉ cần nhập một địa chỉ mới hoặc kéo ghim đến một vị trí khác trên bản đồ.

3. Cách xem dữ liệu vị trí của người dùng trên biểu mẫu

Khi bạn bật định vị địa lý, WPForms cũng sẽ ghi lại vị trí của từng người dùng khi họ điền vào biểu mẫu của bạn. Biết vị trí của người dùng có thể giúp bạn tìm được khách hàng tiềm năng tốt hơn.

Bạn sẽ cần điều hướng đến WPForms >> Entries và sau đó nhấp vào biểu mẫu liên hệ của bạn.


Bây giờ bạn sẽ thấy danh sách các mục được người dùng của bạn điền vào cho biểu mẫu đó.

Để xem một mục cụ thể, chỉ cần nhấp vào liên kết 'View' ở bên phải.


Bây giờ bạn sẽ thấy dữ liệu biểu mẫu được người dùng điền vào chẳng hạn như tên, email doanh nghiệp, số điện thoại doanh nghiệp, cùng với một số dữ liệu vị trí.

Điều này bao gồm ghim trên Google Maps, vị trí, mã zip và quốc gia của người dùng, cũng như kinh độ và vĩ độ gần đúng của họ.


Tất nhiên, nếu người dùng không cấp quyền cho biểu mẫu biết vị trí của họ, thì sẽ không có dữ liệu vị trí nào được hiển thị.

Như vậy là bạn đã thêm thành công Bản đồ Google trong biểu mẫu liên hệ của mình. Bạn cũng có thể sử dụng WPForms để xây dựng các cuộc khảo sát trong WordPress, tạo hình thức thanh toán để chấp nhận thanh toán trực tuyến, v.v.

Mình hy vọng hướng dẫn này đã giúp bạn học cách nhúng Bản đồ Google vào biểu mẫu liên hệ. Bạn cũng có thể muốn tìm hiểu cách tổ chức chương trình tặng quà hoặc cuộc thi hoặc xem chuyên gia chọn các plugin WordPress tốt nhất cho tất cả các trang web kinh doanh.