{"id":218745,"date":"2023-09-11T04:44:08","date_gmt":"2023-09-11T04:44:08","guid":{"rendered":"https:\/\/wpmudev.com\/blog\/?p=218745"},"modified":"2023-09-11T04:44:08","modified_gmt":"2023-09-11T04:44:08","slug":"forminator-geolocation-addon","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/forminator-geolocation-addon\/","title":{"rendered":"Put Your Forms On The Map with New Forminator Geolocation Add-On"},"content":{"rendered":"<p>Our formtastic team&#8217;s done it again! Forminator&#8217;s new Geolocation Add-on with Google Maps API integration lets you effortlessly gather geolocation data from your form submissions and provide address auto-completion for a smoother user experience.<\/p>\n<figure id=\"attachment_218842\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-218842\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/forminator-form-map.png\" alt=\"Forminator map with geolocation feature.\" width=\"880\" height=\"712\" \/><figcaption class=\"wp-caption-text\">See where form users are located with Forminator&#8217;s new geolocation feature.<\/figcaption><\/figure>\n<p>After releasing the highly anticipated <a href=\"https:\/\/wpmudev.com\/blog\/forminator-pdf-generator-addon\/\" target=\"_blank\" rel=\"noopener\">PDF Generator Add-on<\/a>, we&#8217;re proud to announce another powerful addition to our form-building plugin&#8230;<strong>Geolocation add-on!<\/strong><\/p>\n<p>If your business needs to collect location information from users, <a href=\"https:\/\/wpmudev.com\/project\/forminator-pro\/\" target=\"_blank\" rel=\"noopener\">Forminator Pro<\/a> with Geolocation Add-on is the only form-building plugin you&#8217;ll need.<\/p>\n<p>In this post, we&#8217;ll look at:<\/p>\n<ul>\n<li><a href=\"#geolocation-benefits\">Key Benefits of Using Forminator&#8217;s Geolocation Add-on<\/a><\/li>\n<li><a href=\"#geolocation-howto\">How to Use Forminator&#8217;s Geolocation Add-on<\/a><\/li>\n<\/ul>\n<h2 id=\"geolocation-benefits\">Key Benefits of Using Forminator&#8217;s Geolocation Add-on<\/h2>\n<p>With Forminator&#8217;s Geolocation Add-on enabled, you can enhance forms on your site in the following ways:<\/p>\n<h3>Accurate Location Detection<\/h3>\n<p>Forminator can precisely pinpoint the user&#8217;s location by harnessing the device&#8217;s GPS or IP address.<\/p>\n<p>This information is seamlessly integrated into your forms, giving you real-time access to where your users are located.<\/p>\n<p>Moreover, the Geolocation feature includes a convenient address lookup function, allowing users to search for and select their location using postal addresses, city names, or zip codes.<\/p>\n<figure id=\"attachment_218837\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-218837\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/user-location.png\" alt=\"Forminator form submission\" width=\"987\" height=\"641\" \/><figcaption class=\"wp-caption-text\">See the user&#8217;s location in your form submissions.<\/figcaption><\/figure>\n<h3>Interactive Map View<\/h3>\n<p>One of the standout aspects of the Geolocation feature is its map view. Not only can users see their location on a map but also interact with it.<\/p>\n<p>Users have the option to manually input their location or select it directly from a map marker. This dynamic map view enhances user engagement and makes it easy for users to provide accurate location details.<\/p>\n<h3>Customization Options<\/h3>\n<p>Forminator&#8217;s Geolocation offers a range of customization options to suit your needs. You can configure the display of Google Maps next to your address field, choose whether to position the map above or below the address field, and even adjust the map&#8217;s size, ensuring a responsive or custom fit for various devices.<\/p>\n<p>Additionally, you have the flexibility to set a default map location based on specific latitude and longitude coordinates.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\">\n<figure id=\"attachment_218840\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-218840 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/geolocation-map-customization.png\" alt=\"Geolocation Map Customization\" width=\"698\" height=\"1240\" \/><figcaption class=\"wp-caption-text\">You can easily customize your map&#8217;s geolocation options.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<h3>Seamless Integration<\/h3>\n<p>To utilize the Geolocation feature, simply enter your <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key\" rel=\"noopener\" target=\"_blank\">Google Maps API key<\/a> in the Geolocation settings, ensuring a seamless and reliable experience for your users.<\/p>\n<h3>Global Settings<\/h3>\n<p>For ease of use across all your forms, you can enable Geolocation as a default setting on all address fields throughout your site. This simplifies the process of collecting location information from your users.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\">\n<figure id=\"attachment_218839\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-218839 size-ratio-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/geolocation-settings-1050x552.png\" alt=\"Forminator Geolocation Settings\" width=\"1050\" height=\"552\" \/><figcaption class=\"wp-caption-text\">Enable Geolocation as a default setting on all new forms.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<h3>User-Friendly Configuration<\/h3>\n<p>If you require users to provide location access before submitting a form, the &#8220;Require access to users&#8217; location&#8221; option can be enabled. Additionally, you can customize the error message displayed if users choose not to provide location access.<\/p>\n<h2 id=\"geolocation-howto\">How To Use Forminator&#8217;s Geolocation Add-on<\/h2>\n<p>To install and use the Geolocation Add-on, you&#8217;ll need to have <a href=\"https:\/\/wpmudev.com\/project\/forminator-pro\/\" target=\"_blank\" rel=\"noopener\">Forminator Pro<\/a> installed and activated on your site.<\/p>\n<p>Forminator Pro is included in all paid memberships, so if you&#8217;re not a WPMU DEV member yet, consider becoming one by choosing one of our <a href=\"https:\/\/wpmudev.com\/pricing\/\" target=\"_blank\" rel=\"noopener\">risk-free membership plans<\/a>.<\/p>\n<p>With Forminator Pro installed, go to the Add-Ons section of the plugin&#8217;s menu and click Install.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\">\n<figure id=\"attachment_218752\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-218752 size-ratio-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/fominator-addons-screen-1050x492.png\" alt=\"Forminator Add-Ons screen: Geolocation Addon highlighted.\" width=\"1050\" height=\"492\" \/><figcaption class=\"wp-caption-text\">Install Geolocation in the plugin&#8217;s Add-Ons screen.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<p>Once the plugin has been installed, click <strong>Configure<\/strong>.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\">\n<figure id=\"attachment_218753\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-218753 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/configure-geolocation.png\" alt=\"Formoinator Add-Ons - Geolocation - Configure button highlighted.\" width=\"820\" height=\"485\" \/><figcaption class=\"wp-caption-text\">You&#8217;ll need to configure the Add-On before you can use it.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<p>You&#8217;ll need to add a valid <a href=\"https:\/\/developers.google.com\/maps\/documentation\/javascript\/get-api-key\" rel=\"noopener\" target=\"_blank\">Google Maps API key<\/a> to enable and set up geolocation on your forms. Refer to our <a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/forminator\/#find-google-maps-api\" target=\"_blank\" rel=\"noopener\">Forminator Docs<\/a> for instructions on obtaining this key if you need help with this step.<\/p>\n<p>Enter your key into the Google Maps API field, switch the toggle on to enable geolocation as the default option for all your new forms (optional), and click the Save button to continue.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\">\n<figure id=\"attachment_218755\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-218755 size-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/configure-geolocation-modal.png\" alt=\"Configure Geolocation\" width=\"747\" height=\"548\" \/><figcaption class=\"wp-caption-text\">Enter your Google Maps API key.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\"><\/div>\n<\/div>\n<p>Once the API key has been validated and the configuration has been successfully saved, a confirmation message will display briefly on your screen letting you know that you&#8217;re all good to go.<\/p>\n<p><em>Note:<\/em> You can access additional Geolocation configuration settings for individual forms (e.g. disabling geolocation or making it mandatory for users to provide their location details in order to submit a form) in the Forms &gt; Edit Form &gt; Settings section.<\/p>\n<figure id=\"attachment_218790\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-218790 size-ratio-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/forminator-settings-1050x731.png\" alt=\"Forminator Form Settings screen\" width=\"1050\" height=\"731\" \/><figcaption class=\"wp-caption-text\">Configure additional Geolocation settings in the Form Settings section.<\/figcaption><\/figure>\n<p>With the addon configured, let&#8217;s go through an example of adding Geolocation field to a form.<\/p>\n<h3>Adding Geolocation Fields To Forms<\/h3>\n<p>In the Forms section, select a form or create a new form and select Edit &gt; Fields.<\/p>\n<figure id=\"attachment_218791\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-ratio-full wp-image-218791\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/forminator-insert-form-fields-1050x686.png\" alt=\"Forminator: Edit Form - Insert fields button.\" width=\"1050\" height=\"686\" \/><figcaption class=\"wp-caption-text\">Click on the Insert fields button to add Geolocation to a form.<\/figcaption><\/figure>\n<p>Select the Address field and click the Insert Fields button.<\/p>\n<figure id=\"attachment_218792\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-218792\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/fominator-insert-fields-address.png\" alt=\"Forminator form fields selector\" width=\"762\" height=\"962\" \/><figcaption class=\"wp-caption-text\">Add an address field to your form.<\/figcaption><\/figure>\n<p>The Address field is highly customizable and includes a Geolocation tab with advanced options for configuring maps, such as:<\/p>\n<ul>\n<li><strong>Autocomplete<\/strong>: Provides real-time suggestions as users enter an address into the field.<\/li>\n<li><strong>Display address in Map<\/strong>: Displays a map next to the address fields<\/li>\n<li><strong>Map Position<\/strong>: Choose whether to display the map above or below (default) the address field.<\/li>\n<li><strong>Map Size<\/strong>: Set a responsive or custom size for your map.<\/li>\n<li><strong>Default Map Location<\/strong>: Set a default of custom location for your map.<\/li>\n<\/ul>\n<figure id=\"attachment_218793\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-218793\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/address-geolocation-settings.png\" alt=\"Forminator Address field settings - Geolocation options.\" width=\"762\" height=\"1515\" \/><figcaption class=\"wp-caption-text\">Forminator Address field settings include advanced Geolocation options.<\/figcaption><\/figure>\n<p>Configure the above settings to suit your needs and to facilitate user interaction with your form maps and a great user experience.<\/p>\n<p>For example, enable autocomplete to display matching locations as users start typing and to fill in the address fields automatically when an address is selected from the options displayed.<\/p>\n<figure id=\"attachment_218814\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-218814\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/autocomplete-field.png\" alt=\"Forminator geolocation - autocomplete fields\" width=\"730\" height=\"333\" \/><figcaption class=\"wp-caption-text\">Enable autocomplete for a smoother and more interactive user experience with form maps.<\/figcaption><\/figure>\n<p>Once the browser loads the form page, it will prompt users to give access to their location. Allowing this access will then\u00a0show the user&#8217;s current location on the map and auto complete the address fields.<\/p>\n<figure id=\"attachment_218817\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-218817\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/geolocation-map-01.png\" alt=\"Forminator form with map\" width=\"936\" height=\"943\" \/><figcaption class=\"wp-caption-text\">Enabling autocomplete also prefills all address details on the form.<\/figcaption><\/figure>\n<p>By simply clicking on different points on the map, users can also change their location and update address fields.<\/p>\n<video loop muted autoplay playsinline class='dev-html5-video'><source src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/map-updates.webm\" type=\"video\/webm\"><\/video>\n<p style=\"text-align: center;\"><small> Clicking on different points on the map changes the address on the form fields.<\/small><\/p>\n<p>All form information including the user&#8217;s geolocation details and a map will also display on Forminator&#8217;s submission page.<\/p>\n<div class=\"image-grid cgrid-row\">\n<div class=\"cgrid-col cgrid-col-span-full\">\n<figure id=\"attachment_218815\" class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-218815 size-ratio-full\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2023\/09\/forminator-submissions-1050x894.png\" alt=\"Forminator submission page with example of form submission.\" width=\"1050\" height=\"894\" \/><figcaption class=\"wp-caption-text\">An example of a Forminator form submission showing a map with the user&#8217;s location and coordinates.<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<h2>It&#8217;s All About Geolocation, Geolocation, Geolocation<\/h2>\n<p>Forminator&#8217;s new Geolocation feature empowers you to collect and leverage location information from your form users, gain valuable insights into your audience, whether they are customers, employees, or suppliers, and make more informed business decisions.<\/p>\n<p>Check out this feature in Forminator Pro and if you need any help, see our <a href=\"https:\/\/wpmudev.com\/docs\/wpmu-dev-plugins\/forminator\/#geolocation-addon\" target=\"_blank\" rel=\"noopener\">documentation<\/a> or contact our expert 24\/7 support team.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Our formtastic team&#8217;s done it again! Forminator&#8217;s new Geolocation Add-on with Google Maps API integration lets you effortlessly gather geolocation data from your form submissions and provide address auto-completion for a smoother user experience. After releasing the highly anticipated PDF Generator Add-on, we&#8217;re proud to announce another powerful addition to our form-building plugin&#8230;Geolocation add-on! If [&hellip;]<\/p>\n","protected":false},"author":774618,"featured_media":218806,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"5","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[263,11260,11259],"tags":[],"tutorials_categories":[11232],"class_list":["post-218745","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-wpmu-dev-products","category-wpmudev-tutorials","tutorials_categories-forminator-pro"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/218745","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/774618"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=218745"}],"version-history":[{"count":33,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/218745\/revisions"}],"predecessor-version":[{"id":218843,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/218745\/revisions\/218843"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/218806"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=218745"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=218745"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=218745"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=218745"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}