New form fiellds: Address and Google map

Good afternoon.

Today we want to introduce you to two new form elements that have become available in our web form builder: address and Google Map.

New form fiellds: Address and Google map 1

Address

The "Address" element uses Google Places autocomplete technology, which makes it easier for the user to enter an address and achieve accurate and systematic address entry.

This element is located in the "Main fields" section. After adding this element and going to the main settings, you need to enter the "Google Maps API Key":

New form fiellds: Address and Google map 2

To get the Google Maps API key, go here and create it, and then copy it into the text field above. Open this link if you already have one.

Address Settings

In the Address settings section, you can enable the option "Enable auto-substitution of address parameters":

New form fiellds: Address and Google map  3

Thanks to this option, you can parse the address parameters (country, region, city and street) and automatically write them to the specified fields of the form that you need to select from the list in the appropriate fields.

In addition, you can limit the address search to a given set of countries. To do this, enable the option "Limit the address search area to specified countries":

New form fiellds: Address and Google map 4

By enabling this option, you need to fill in the "List of countries to search for an address" field, specifying the ISO codes of the necessary countries separated by commas, but no more than 5 pcs.

This is how this element will look in the form:

New form fiellds: Address and Google map 5

Google map

The "Google map" element allows you to get the coordinates of a point (latitude and longitude) on the map. This element is located in the "Extra fields". After adding this form element, you must also enter the value "Google Maps API Key" in its main settings.

The Google Maps API key can be used the same for both the "Address" element and the "Google Map" element.

Map Settings

New form fiellds: Address and Google map 6

In the map settings, you can change the following parameters:

  • map type (default, satellite, hybrid and terrain)
  • width and height of the map in the form
  • map zoom level
  • specify the latitude and longitude of the starting point on the map

In addition, it is possible to link the card to the address by selecting the appropriate field from the form.

New form fiellds: Address and Google map 7

Thanks to this setting, the address and coordinates on the map will be interconnected. When you change the address, the point on the map will change and when you move the point on the map, the address in the form will automatically change.

In order for the user to be able to move a point on the map, it is necessary to enable the option "Allow to move the marker on the map".

It is also possible to automatically determine the user's geolocation on the map. To do this, enable the option "Automatic detection of user geolocation".

This is how the map will look in the form:

New form fiellds: Address and Google map 8

Comments
Ready-made templates of web forms
Gold

Office rent

Get a selection of optimal office rental offers Details
Free

Credit application form

Accept applications for credit with the amount, term and data of the applicant. Quickly and easily Details
Gold

Calculate the cost of washing your car and get a discount.

With this template in the form of a receipt, you can attract customers for service in your car wash. Template can be edited, added and removed fields Details
Basic

Brand Awareness Research Template

This template will help to find out the level of customer awareness of your brand Details

Order turnkey form development

No time to figure out all the settings yourself? No problem!
Order web form development from us