1. Home
  2. Docs
  3. Form Field Types
  4. Google Maps Form Field

Google Maps Form Field

weForms has a built-in field option that lets you incorporate Google Maps right in your website’s contact form. Google Maps can be very helpful, because it provides you with a short profile of any location in the world.

One way to use this would be adding this field in your purchase form. Once the buyer has submitted the form, you can open Google Maps and learn about their whereabouts. You can also decide how you wish to deliver the purchased product.

You can see the nearby stores and find a suitable storehouse for the purchased product, which will store the product until the buyer collects it.

Or if you have multiple deliveries to make in a state, you can pick the most cost-effective route for your delivery truck.

Set Google Map API Keys

First things first, to start using Google Map field type on your form you need to set the API key from settings. You can do that by navigating to your WordPress admin area, or /wp-admin/:

WordPress Dashboard→weForms→Settings

There you will see a section to add your Google Map API key at the bottom. A link to create a Google Map API Key is given above the fields. Once you create a Google Map API Key, you need to provide your key in the given field to authenticate your requests. If you are having difficulty setting up your API keys, Google provides documentation for using the Maps API.

Google Map Options

  • Field Label: Add a precise label. Keep in mind what you are exactly looking for. You may name the field “Country” to know about your applicants current Country. Or you can name the field as “Your Current City” to know about the city they are from.
  • Meta Key: This key is used to locate the information in the database. You must use a unique key for every field.
  • Show directions link: If you check the box the form will have a separate option to set direction between two places.
  • Help Text: This option lets you be more specific in your instructions.
  • Required: This option lets you make this field optional or mandatory for your users to answer. You just need to tick Yes to make the field mandatory. Or check the option No to make it optional.
  • Map Settings: This option lets you set the appearance of the map to your specific requirements. You can set the zoom-level and also default coordinates. You can also include an address search box by checking the box Show address search box just at the bottom of the Map Settings area.

Advanced Options:

  • CSS Class Name: Every WordPress generated web-page needs a style sheet language to project its data and other elements, in a certain format and layout. You can use separate formatting for separate parts of a single web-page. This can also be done to separate sections of your weForms generated form. With CSS Class Name you are able to do this.
  • Dynamic Value Population: Field value or options can be populated dynamically through filter hook or query string.
  • Conditional Logic: This lets you decide what version of the form will be displayed to an individual. Conditional logic can be used to show or hide fields according to certain responses.

After you are done, save the form and click on the Preview option at the top right corner of your screen. It will open a new window with your form’s preview.

You can also use the Google Map field to autofill the Address field.

Video

Congratulations! You now know how to use the Google Map field on your WordPress forms.

Was this article helpful to you? Yes 3 No