Google Address Lookup With Formyoula Forms

In this guide, we will explain how to look up an address and pre-fill the address fields on the form.

Drag and drop some Text and TextArea fields to search and show address fields on the form. Rename the fields as shown below.

Drag and drop a Hidden and a JavaScript field. Rename the fields as shown below.

Click the pencil icon of the Hidden field and fill in your API key as Value. Save the changes.

Click the pencil icon of the JavaScript field and Paste the code. Save the changes.

Please use the below code:

// Initialize variables
var autocomplete;
var Search_address_field = '7022-4a6b-f6de';
var City = 'City';
var State = 'State/Province';
var Country = 'Country/Region';
var Street = 'Street';
var Street_Number = 'Street Number';
var Postal_Code = 'Postal code';
var Address = 'Address';
var API_Key = 'API KEY'

// Load google js library
if ( !window.autofill_script_loaded ) {
  var script = document.createElement( 'script' );
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?key='+formyoula.form_fields[API_Key].get('value')+'&callback=initAutocomplete&libraries=places&v=weekly';
  script.onload = function() {
    window.autofill_script_loaded = true;
    initAutocomplete();
  };
  document.body.appendChild( script );
} else {
  initAutocomplete();
}

function initAutocomplete() {
  var addressSearchField = document.querySelector( '#component-' + Search_address_field + ' .input_content' );
  // Create the autocomplete object
  autocomplete = new google.maps.places.Autocomplete( addressSearchField, {} );
  // When the user selects an address from the drop-down, populate the
  // address fields in the form.
  autocomplete.addListener( 'place_changed', fillInAddress );
}
// Function to fill address fields
function fillInAddress() {
  // Get places
  var place = autocomplete.getPlace();
  // Get address_components from the places
  var address_components = place.address_components;
  // Filter the address_components to create a new address object
  var new_components = {
    Postal_Code: [ 'postal_code' ],
    Street: [ 'street_address', 'route' ],
    Street_Number: [ 'street_number' ],
    State: [ 'administrative_area_level_1', 'administrative_area_level_2', 'administrative_area_level_3', 'administrative_area_level_4', 'administrative_area_level_5' ],
    City: [ 'locality', 'sublocality', 'sublocality_level_1', 'sublocality_level_2', 'sublocality_level_3', 'sublocality_level_4' ],
    Country: [ 'country' ]
  };
  // New address object
  var address = {
    Postal_Code: '',
    Street: '',
    State: '',
    City: '',
    Country: '',
    Street_Number: ''
  };
  // Loop through address components and create a simplified address object
  address_components.forEach( function( component ) {
    for ( var new_component in new_components ) {
      if ( new_components[ new_component ].indexOf( component.types[ 0 ] ) !== -1 ) {
        if ( new_component === 'Country' ) {
          address[ new_component ] = component.short_name;
        } else {
          address[ new_component ] = component.long_name;
        }
      }
    }
  } );
  // Set value of all the  address fields
  formyoula.form_fields[ City ].set( {
    value: address.City
  } );
  formyoula.form_fields[ State ].set( {
    value: address.State
  } );
  formyoula.form_fields[ Postal_Code ].set( {
    value: address.Postal_Code
  } );
  formyoula.form_fields[ Country ].set( {
    value: address.Country
  } );
  formyoula.form_fields[ Street ].set( {
    value: address.Street
  } );
  formyoula.form_fields[ Street_Number ].set( {
    value: address.Street_Number
  } );
  formyoula.form_fields[ Address ].set( {
    value: place.formatted_address
  } );
  formyoula.form_fields[ Search_address_field ].set( {
    value: place.formatted_address
  } );
  // Initialize the autocomplete after setting value to the search field
  initAutocomplete();
}

Additionally, we can also restrict search options for example:

// Restricting search object that can be used in new google.maps.places.Autocomplete( addressSearchField,search_options_restrictions  )
var search_options_restrictions = {
  location: ( 33.2411, 111.7257 ),
  radius: 8000,
  componentRestrictions: {
    country: [ 'us', 'ca' ]
  },
  fields: [ 'address_components', 'geometry' ],
  types: [ 'geocode' ],
  global_code: [ 'VF94+3H' ]
};

Please try the form. When you will type something in the “Search Address” field and select an address, it will pre-fill the address fields on the form.

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂

Example Form.json9.0KB