WS Form is compatible with Google Maps, but it can do a lot more than display them. WS From includes an address lookup feature that will autofill the address fields on your forms and display that address within a Google map. It also includes several features to restrict the type of address it searches for and what type of user can see the field.
In this article, we’ll see how to use WS Form to add an address lookup on WordPress forms.
Demo
1. Obtaining a Google API Key
First, you’ll need a Google API Key with Google Maps and Places enabled. Go to Get Started with Google Maps Platform. If you’ve never used a Google Cloud Console, select Get Started. This will step you through the process. If you have used Google Cloud Console, click Go to the project selector page and create your cloud project. We’ll click Get Started and go through the steps.
A modal will open informing you about the account. Select Activate to activate your full account.
Once your full account is activated, click Continue.
You’ll then see your API key. Copy the key and select Maybe Later. The key isn’t usable until you close this modal.
We recommend that you restrict your API key to your production and development hostnames. This keeps others from using your key and Google Maps account (which will be costly). Select the restriction type, enter your IP address and click Restrict Key. Your API key is now enabled, and you can add the Google API key to WS Form.
2. Adding the Google API key to WS Form
Next, add your Google API key to your global WS Form settings. This allows all of your WS Forms access to your Google API key. In the WordPress dashboard, go to WS Form > Settings and select the Advanced tab.
Scroll down to the API Keys section and enter your key into the Google field. Save your changes.
You can now add Google Address and Google Map fields to a form.
3. Adding a Google Address Field to a Form
The Google Address field enables autocomplete for your address fields. To add a Google Address to any form, simply drag the Google Address field from the Advanced section of the Toolbox to your form. You can filter by country, restrict to businesses, etc. It uses the Google Places Autocomplete API.
Hover over the field and click the gear icon to open the Google Address settings. You’ll see settings for the Label, Address Fields, Accessibility, Exclusions, and Hidden Behavior. The Advanced tab includes Style, Labels, Restrictions, Validation, and Custom Attributes.
Restrictions are especially interesting. You can restrict the search to just businesses, choose specific countries to include, and select a user status that will see the field.
To restrict to certain countries, add a country by clicking the plus icon to add a country. Click the field and choose the country from the dropdown box. The United States is added by default. Add as many as you want.
The restrict based on user status, select the user status from the dropdown box. Choose between Any, Logged In, Logged Out, or a specific user role or capability. Only the users you select will see this field. By default, any user can see the field.
4. Mapping Google Places Address Parts to WS Form Fields
In order to use the Google Address field, you’ll need to map the address fields. This tells it which fields to add which information to. Click on the Address Field’s gear icon to open its settings. In the Basic tab, scroll down to Address Fields. You’ll see the fields available on your form with a description of each.
Field Mapping includes two sets of fields. The first are the fields on the form. The second identifies the data for each type of field. Open the dropdown for each field in the Form Field column and match it to its data type in the Component column.
You can map them according to this table:
| Component | Form Field |
| Street full – Long | Address Line 1 |
| Locality (City) – Long | City |
| AL! (State) – Short | State |
| Postal Code (Zip) Full | Zip Code |
| Country – Short | Country |
5. Showing the Looked-Up Address in a Map
You can also have a map to display the address you’ve looked up. First, drag a Google Map field to your form.
In the Google Address field, select the gear icon to open its settings. In the Basic tab, scroll down until you see Google Map.
Click on the dropdown box and choose your Google Map field from the list. The Google Map will now display the address that was automatically entered by the Google Address field.
Once you’ve entered an address or selected an address that the Google Address field searches for, the map changes to show that address.
Ending Thoughts
That’s our look at how to add an address lookup with WS Form. This is a time-saving feature for users and makes it much easier for them to enter their information. You can restrict it to business addresses, addresses in certain countries, and even users with specific roles. Once the address has been added to the field, you can have it to display within a Google map. Google address lookup is easy to set up and use and it gives forms a more professional look and feel.
We want to hear from you. Do you use these address lookup features on your WordPress forms? Let us know about it in the comments.
