Formidable Forms Community Site

The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group

Slack Signup
Newsletter Optin
Help Desk
Subscribe

Formidable Pro integration with a street address verification/autocomplete service

Labels

This Discussion is public

Notifications

I'm wondering if there is an existing solution to integrate real-time street address autocomplete/verification service with FP forms?

For example, this is a Google street address autocomplete service:
<a href="https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform" title="Google Map Address Autocmplete">test</a>

I got it figured out. Was actually pretty easy.

 

1) First, load the Google Maps/Places API library in your WP header file.

2) Add the Google Maps Styling to your style.css file (in a child theme of course):

/* GOOGLE MAPS STYLING */
#locationField, #controls {
position: relative;
width: 480px;
}
#autocomplete {
position: absolute;
top: 0px;
left: 0px;
width: 99%;
}
.label {
text-align: right;
font-weight: bold;
width: 100px;
color: #303030;
}
#address {
border: 1px solid #000090;
background-color: #f0f0ff;
width: 480px;
padding-right: 2px;
}
#address td {
font-size: 10pt;
}
.field {
width: 99%;
}
.slimField {
width: 80px;
}
.wideField {
width: 200px;
}
#locationField {
height: 20px;
margin-bottom: 2px;
}

3) Add the javascript code to connect the Google Maps API library to your Formidable Pro form, once again in header.php (again in a child theme):

// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

function initialize() {
  // Create the autocomplete object, restricting the search
  // to geographical location types.
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('field_complete')),
      { types: ['geocode'] });
  // When the user selects an address from the dropdown,
  // populate the address fields in the form.
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}

// [START region_fillform]
function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
// [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
          geolocation));
    });
  }
}
// [END region_geolocation]

4) Change the variable name to match your TEXT input field in your Formidable form:

(document.getElementById('field_complete'))

'field_complete' is the final field name created by Formidable. In the forms creation interface, I changed the field key from the normal randomly generated key to 'complete'.

Currently, the Formidable field stores everything from the Google API in that single field. I'm working on breaking it apart into individual fields (i.e. street address, zip).

Hope this helps others.

Hello there and thank you for your help,
I have created a child theme, added this code in the <head> tag.
and added the css code to the style.css
I used field_origin and reassigned an "origin" key to the text field.
It still doesn't work. (origin field in this site)

Thank you.

Hi Invisionstudios - did you find out how to break the google places address information into individual parts i.e. street, suburb etc and parse it into the formidable fields? if so, do you mind sharing how you did this?

Many thanks.

I never did bother with breaking the address info into separate fields, although I would still like to do that.

@invisionstudios

I'm trying to figure out how to break out the address info into separate fields, have you had any luck yet? If so, would you post your solution?

Has there been any activity around integrating a location auto-complete tool into Formidable? I'm specifically looking for a way to auto-complete a set of address fields to make form entry easier and faster for users.

I found this post and these two others:

https://formidableforms.com/help-desk/geocoding-autocomplete-current-location/
https://formidableforms.com/help-desk/adding-google-places-autocomplete-2/

It would be a great feature and one that's been requested for several years. Any chance it's in the works?

I also found this add-on: https://geomywp.com/add-ons/formidable-geolocation/

Does anyone have experience with that plugin? Or possibly another recommendation.

I don't think I'm good enough at javascript to get this working myself, hence my need for an out-of-the-box or add-on solution.

@wurdz, I ended up using Google's Geo-location API. I wrote a script that'll break out each part of the address into it's own form field. If you'd like that script I can post it later once I get home.

That would be great, @VanLuda. Thank you.

Okay, it'll be a couple hours. But I'll get it to you.

Alright, sorry for the delay.

First and foremost, you're going to need a Google Maps API Key which you can get here: Google Developers Console

Once you have that you'll need to copy the API Key into the Script located here:

https://gist.github.com/CarlVanderLaan/1b08de8e8262d31407f4d6fa53e7d90e

Then watch this video and I'll show you how to set this up:

https://youtu.be/aydgIfNjKP8

Excellent summary and video, Carl. Thanks so much. --Casey

@VanLuda, I got this working. It's not too difficult and your info and video made it easy!

Say I wanted to use a field key/name other than "autocomplete," e.g., "abcxyz." I think I can do that by changing each instance of the "autocomplete" name in the script. Could that be simplified by adding a line along the lines of this?

autocomplete = abcxyz //Assign the field name used in the script to the field for this specific form

Thank you again for your help.

In the script where it says document.getElementById('field_autocomplete')),

Just change field_autocomplete to field_abcxyz

Ah, duh. Easy enough. I was reading it incorrectly before.

@VanLuda

What i'm trying to achieve can be seen in the attached screenshot.

(I made this work with Gravity Forms and an add-on plugin for Google Autocomplete)

I now need to make it happen on Formidable Forms though...

We want users to just see two fields:  City and Country.

When they enter just a few letters in the city field, the rest of the city name should autocomplete as well as the country should automatically complete (without user input).

So unlike what you were showing in your Youtube tutorial, we don't one field where an entire address appears.  We only want them to indicate a City, and then have that City AND then the matching Country to autocomplete in one go.

Is that achieveable?  And would you please be so kind to let me know how to proceed?
Much appreciated!

Attachment:

Discussion closed.