# Home Welcome to Simple Address Autocomplete WordPress plugin documentation page. ## Get Started Follow these steps to get you up and running. 1. [Install and activate ](/kb/how-to-install-and-activate-simple-address-autocomplete-plugin)Simple Address Autocomplete plugin. 2. [Get a Google Maps API Key](/kb/how-to-get-google-maps-api-key) and activate the required APIs. 3. Go to plugin settings under **Settings** > **Simple Autocomplete** 4. [Enter your API Key](/kb/where-to-enter-google-maps-api-key) that you just got from Google Maps. 5. [Find the field id](/kb/how-to-find-the-field-id) of the form. 6. [Enter the form ids](/kb/where-to-enter-field-id) in Simple Address Autocomplete settings. 7. [Select the country](/kb/how-to-limit-search-to-one-country) you want to limit the search to. 8. [Enable/disable browser geolocation](/kb/how-to-enable-browser-geolocation) option. Please note, enabling browser geolocation only works if country option is set to Worldwide. [Read more here..](/doc/browser-geolocation) 9. Save settings. 10. Voila, that field now has address autocomplete functionality. If you are having issues please see the FAQ below. ## Frequently Asked Questions Below are most frequently asked questions. ### Can I limit the search to one country? Yes. This plugin allows you to limit the search to one country or worldwide. It also support multiple countries. ### Does it work with any form? Yes. The plugin works when any form including custom forms. ### Is it single line address or multi-line address autocomplete? It is single line address autocomplete. ### Does it support WooCommerce? It does not out of the box. ### Can I add multiple autocomplete address to field on one page? Yes. You can add as many as fields you like to a single page or form. Just keep adding field ids to the list. ### Is Google Maps API key free? Google gives up to 100,000 maps queries per day which is more than enough for small to medium websites. # Google Maps API Key The plugin supports only Google Maps therefore it is required to have a Goolge Maps API key for the plugin to function. This is a free\* service by Google. The plugin uses Google Maps Places API to autocomplete address search on any WordPress form. The API is required for the plugin to function. Users can use existing Google Maps API Key (with Places API activated) or get a new one by following [How to get Google Maps API key](/kb/how-to-get-google-maps-api-key) help guide. The API gives 100,000 maps queries per day per account which is more than enough for small to medium websites. {% hint style="info" %} Google Maps API Key gives 100,000 maps queries per day. {% endhint %} The search returns two place types **'geocode'** and **'establishment'**. This should allow users to search both by street address i.e *'**123 street name'*** and establishment name i.e ***'The Awesome Cafe'*****.** The API key is **not encrypted** and has input type of 'password'. This basically turns the content in the field into password dots. The best way to prevent misuse of API Key is to limit it to website domain name when creating one. ![](/files/-MPqjnM0zicFXJ0A7JYR) ## Related How to guides * [How to get Google Maps API Key?](/kb/how-to-get-google-maps-api-key) # Form Field IDs The plugin loops through field ids provided and adds Google address autocomplete functionality to them. Users can enter as many as ids they like. One field id per line. The plugin loops through the field ids provided by users and adds the address autocomplete functionality to them. If no id is added the plugin will not work. See [how to get id of a field](/kb/how-to-find-the-field-id) for a step by step guide on locating field id of a form. * One id per line * Enter as many ids you like * Only field type text is recommended ![](/files/-MPqiRiY4Y-rJuV3_y9E) ## Related * [How to find the field id?](/kb/how-to-find-the-field-id) # Country This functionality limits the autocomplete search to one or multiple countries. This option allows to limit the search to one country, multiple countries or Worldwide. If set a country it will only search through addresses within that specific country and will not show results outside the selected country/countries. A list of countries including an option 'Worldwide' is provided to users on settings page. A condition runs depending on selection. The Worldwide option passes '**WW**' which runs it without the componentRestrictions. Choosing a country passes the **ISO 3166-1 Alpha-2 code** and limits the search to that country. '**WW**' is not a country at this stage, if it is allocated to any country then string can be passed. ![](/files/-MPwgUiNU_OjoqvTruxe) ## Related * [How to limit search to one country?](/kb/how-to-limit-search-to-one-country) # Browser Geolocation A functionality to get user location via the browser. There are some limitation to this functionality and requires permisison. {% hint style="info" %} This option is not available in version 1.1.0 and has been replaced with multiple countries option. {% endhint %} This functionality gets user's browser location. This is triggered on page load. The user must allow the browser to share location. The browser doesn't provide precise location of the user. It provides the current locality or city of the user. The purpose is to suggest relevant and within locality/country addresses when searching. This functionality cannot be used to get customer address or precise location. This option works when the country option is set to Worldwide. If the user allows it will suggest relevant addresses to user locality and/or country. This option doesn't work if the country option is set a specific country. Please see the frequently asked questions below ![](/files/-MPqkRrHBTqo1_shaB0B) ## Geolocation on Page Load When you enable Browser Geolocation option it will ask users to share their location with the plugin as soon as they open your website. This will help the plugin suggest relevant addresses based on the user location. This option does not work if country is set to a specific country. ## Frequently Asked Questions ### Can I get user's precise location? No. This option doesn't give you precise location of the user. It rather gives the locality or city of the user. ### Can I use Browser Geolocation with country option? No. The purpose of the option is to suggest addresses within user's country. If you have set the country option to a specific country then this is not needed. ### Can I delay the permission request? No. At the moment it will trigger as soon as the website is loaded. ### Can this can be triggered on specific pages? No. At the moment it will trigger as soon as page loads. # Supported Forms The list of WordPress forms Simple Address Autocomplete supports. SAA plugin works with any form in WordPress, including custom forms. SAA works with any form field where you can id attribute. For custom forms, you will need to set an id attribute and add it to settings page. Below are the most popular forms and how to add SAA to them. If your form is not listed here please contact me and I will make an how-to article for it. Simple Address Autocomplete has been tested with the following forms. * [Contact Form 7](/kb/how-to-add-address-autocomplete-to-contact-form-7) * WPForms * Forminator * Ninja Forms * Form Maker by 10Web * Formidable Form Builder * HappyForms * Everest Forms * Smart Forms * Elementor Form * [WP Fluent Forms](https://wpcu.be/WPFluentForms) * Contact Form by Supsystic * Kali Forms * weForms * Custom forms # Forminator Forms The Forminator plugin changes the field IDs on each page load. However, only the last part of the field ID changes and the prefix stays the same. Instead of adding the whole ID just add the prefix in the ID List. For example, if you get the field ID you will notice a random string at the end of the field ID. ***forminator-field-street\_address-address-1\_6475a1899b66f*** When the page is refreshed only the **6475a1899b66f** will change but the **forminator-field-street\_address-address-1** stays the same. So instead of adding the whole field ID, you will need to add the first part of the Field ID like this **forminator-field-street\_address-address-1** This plugin looks for field ID starting with provided string and adds the autocomplete to it. Any issues please start a discussion on [Plugin Support Forum](https://wordpress.org/support/plugin/simple-address-autocomplete/). # How to install and activate Simple Address Autocomplete plugin? {% embed url="" %} # How to get coordinates? This article will show a step by step guide on how to get location coordinates. Simple Address Autocomplete allows you to return *biased* or *restricted* searches based on your provided coordinates. {% hint style="info" %} You can only enter 1 area coordinates. {% endhint %} ### Biased Search Biased search is when the first results are returned from a particular area. For instance, if we enter the Coordinates of Queenstown, New Zealand. Any address we type will first search the area of Queenstown if no results are found then it will keep searching for other places in New Zealand. This can be used with multiple countries as well. For example, you have selected New Zealand, Australia and Fiji in the countries option. However, you would like the search to first search for the address in New Zealand then simply add the coordinates of New Zealand and choose the Biased option. This will first search addresses in New Zealand and then expand to Australia and Fiji. ### Restricted Search Restricted search is when the search is limited to a particular area. For example, if we enter the coordinates of Queenstown New Zealand. If the address is not found within Queenstown it will not show any results. This option will override the country selection. In this article, we will see to get coordinates. You can use any of the tens of free tools online to get your desired location's coordinates. In this article, we will get it using Google Maps. 1. Open Google Maps -> 2. Enter the desired location name. 3. Then fit the area to which you want to have biased results or restrict the search to by zooming in and out. 4. Then copy the coordinates provided in the map. (See the image below)
5\. This will give you the coordinates that should look something like this `-37.857866,175.6797153` 6\. Paste the coordinates in the Simple Address Autocomplete settings page 7\. Then select the type of restriction. Either Biased or Restricted. Biased: The search results will start from this area and then go beyond if not found. Restricted: Search results will ONLY be from this area if an address is not found no results will be shown. 8\. Save the settings. # How to get Google Maps API key? This article provides a step by step guide to get a Google Maps API key. It also provide details on how to activate the places API To get Google Maps API key please follow the step by step guide below. * Go to [Google Maps platform](https://cloud.google.com/maps-platform/) * Click on **Get Started** button on top right corner. You maybe asked to login with your gmail account if not already logged in. * Then create a **New Project** by click on project list menu. ![](/files/-MPrgUoleQ4boYUNj_EE) * Name your project. * Then click **CREATE** button
* When created go back to the project list and select your newly created project. ![](/files/-MPrhXsB3jralw0OlmI4) * Then click on **Places API**. If the API is not appearing on main screen click on APIs in left pane. ![](/files/-MPriA9e14oCK1jRw4uq) * Then enable it by clicking the ENABLE button. ![](/files/-MPriPi54lIPnAtRuC4o) * Next let's create API Keys * Click on **Credentials** in left pane. * Then click on **Credentials in APIs & Services** link on the screen. ![](/files/-MPrjS3UpV13zfuenOR7) * Then click on **+CREATE CREDENTIALS** * Then click on **API Key** ![](/files/-MPrjvj86hH4eYETJF0t) * Then an **API Key** is created for you. * Copy the API Key and paste in Simple Address Autocomplete plugin settings page. Or see [Where to enter Google Maps API](/kb/where-to-enter-google-maps-api-key) key for help.
## Optional Settings Your API key will be visible to your website visitor (if they look for it). You can secure your API key by restricting it your website only. See the instruction below to restrict your API Key. * Click on **Restrict Key** * Under **Application restrictions** choose **HTTP referrers (websites)** * Under **Website restrictions** *add an item* * In **Referrer** add **\*.yourwebsite.com** * Adding \*. means it will accept request from subdomains including [www.yourwebsite.com](http://www.yourwebsite.com) * Then click **Save** button
## Using Existing API Key You can use your existing API key if you already have one. # Where to enter Google Maps API key? Once you have created your Google Maps API Key you can follow these instructions to enter them in Simple Address Autocomplete plugin. 1. Go to **Settings** menu 2. Click on **Simple Autocomplete** 3. Copy and Paste your Google Maps API key in the **Google Maps API Key** field provided. 4. Click **Save Changes** to save the API Key. ![](/files/-MPzQJeYl2KXUNBMH8r8) ## Related * [How to get Google Maps API key?](/kb/how-to-get-google-maps-api-key) # How to find the field id? The following method to find field id can be used for any form in WordPress. To get id of a form field in WordPress please follow the following steps. Please note, you can get id of any field with this method. ![](/files/-MPqrRnvPd5KA4lRjhal) 1. Open the form where you would like address autocomplete functionality. 2. Identify the field. 3. **Right click** in the field 4. Click **Inspect** (Chrome & Edge) or **Inspect Element** (Firefox & Safari) 5. The browser will highlight a line which indicates it belongs that field. 6. You will see an **id attribute** in the highlighted line. It will look like id="form\_id-123". The id can be combination of letter, numbers, dash and underscores. 7. Copy the value inside the quotes " ". 8. Go to Simple Address Autocomplete settings and paste it on new line in **Field IDs**. 9. **Save Changes** to save the settings. 10. Viola, the input has now address autocomplete functionality. ![](/files/-MPquEo686DihwWZt4iQ) ## Frequently Asked Questions ### Can I get field id of any field using the above method? Yes. By right clicking on the field and select inspect, you will be able to see the id of any form field. # Where to enter field id? The field id(s) can be entered in Simple Address Autocomplete settings page. To enter a field id, follow these steps. Please note, enter one field id per line and do not add any other symbols like "," commas or "#" signs before or after the id. Just paste the value you have copied from browsers. {% hint style="info" %} Enter one field id per line only. {% endhint %} To enter the field id 1. Go to **Settings** menu 2. Then click on **Simple Autocomplete** 3. Enter the field in **Field IDs** input provided 4. Click **Save Changes** to save it. ![](/files/-MPzQuKq6UrPw591iKbd) ## Related * [How to get the field id?](/kb/how-to-find-the-field-id) # How to limit search to one or multiple countries? This article will provide a step by step guide to limit search to one or multiple countries using Simple Address Autocomplete plugin. The plugin allows user to limit the search to one or multiple countries. To limit the search to specific countries please follow these instructions. 1. Go to **Settings** menu 2. Click on **Simple Autocomplete** 3. Select the country or countries under **Country** option. You can select using **CTRL + click** on Windows and **Command + Click** on Mac. 4. Click **Save Changes** to save the settings. 5. Voila, you are done. All the searches will be limited to your selected country. ![](/files/-MPwfrxOzPs2ytKHNYgU) ## Related * [How does country option work?](/doc/country) # How to enable browser geolocation? This article provides a step by step guide to enable browser geolocation with Simple Address Autocomplete plugin. {% hint style="info" %} This option is no longer available and been replaced with multiple countries option. {% endhint %} The browser geolocation option enables the plugin to get user location. Please note, this option doesn't get precise location of the user (or their address) but rather the locality or city. This helps the plugin to suggest relevant address and establishments based on user's country. Please note the user must allow the browser to share location. If the user doesn't allow the plugin will not be able to get user location. Follow these step by step instruction to enable browser geolocation. 1. Go to **Setting** menu 2. Then click on **Simple Autocomplete** 3. Set the **Country** option to **Worldwide** 4. Then select **Yes** under **Enable Browser Geolocation?** option. 5. Then click **Save Changes** to save all the settings. ![](/files/-MPqoqprEMiN-TZFf3uv) ## Frequently Asked Questions ### Can I get user's precise location? No. This option doesn't give you precise location of the user. It rather gives the locality or city of the user. ### Can I use Browser Geolocation with country option? No. The purpose of the option is to suggest addresses within user's country. If you have set the country option to a specific country then this is not needed. ### Can I delay the permission request? No. At the moment it will trigger as soon as the website is loaded. ### Can this can be triggered on specific pages? No. At the moment it will trigger as soon as page loads. # How to add address autocomplete to Contact Form 7? This article provides a detailed guide on how to add address autocomplete to Contact Form 7. It explains two methods, add it while creating a new form or adding it to an existing form. Unlike other forms in WordPress, Contact Form 7 doesn't automatically assign an id attribute to fields therefore you will have to manually add them. if you need help with other forms please see the article about [Google address autocomplete in WordPress](https://wpcube.co.nz/how-to-add-google-address-autocomplete-in-wordpress-for-free/) by WPCube.
## Add address autocomplete to an existing form To add an id attribute to an existing form please follow these steps. 1. Go to **Contact Forms** and locate the form where you want to add address autocomplete. 2. **Edit** the form 3. Find the field 4. Add id attribute just after the name attribute. For instance, **id:some-id-name** 5. Click **Save** button to save the changes ![](/files/-MPu_ZEwdZgytlyDuyxG) * Then **copy** the newly added id and **paste** in Simple Address Autocomplete settings. * Click **Save Changes** to save it * Viola, your field has now address autocomplete functionality. ![](/files/-MPuar6F0_q6mv_0HtRK) ## Add address autocomplete to a new form While creating a new form in Contact Form 7, all you need to do is fill in the id attribute filed and add it Simple Address Autocomplete settings. Follow these steps to create a new form with address field. * Go to **Contact** * Create a **New Form** * Name the new form * Add a new **Text Field**. It is important that you select TEXT field otherwise you may encounter errors * Add i**d attribute**. * Click **Insert Tag** to add the field to the form. * Click **Save** to save the new form * Then copy and paste the id to Simple Address Autocomplete settings as shown above. ![](/files/-MPufObkcKaOo8BI6waO) # New Zealand Local Citations List Read the full list here: [NZ Local Citations](https://razakhadim.gitbook.io/local/local-citations/nz-citation-sites) # Changelog This page records all the changes and updates made to the plugin. ## 1.2.0 - 2023-01-06 * Fixed double slash in URL * Added biased search feature * Added restricted search feature ## 1.1.0 - 2020-12-31 * Plugin now gets field id instead of class * Removed Elementor support (not needed anymore) * Removed Geolocation OnFocus ## 1.0.0 - 2020-12-27 ### Plugin version 1.0.0 completed * Plugin development completed with basic functionalities of adding address autocomplete to any input field that has a class of 'autocomplete'. * Limit search to a specific country. * Get user browser location either on page load or on focus. # Common Issues This section lists all the common problems users run into and how to fix them. You can report an issue on htt