Skip to main content

Gravity Forms Migration

This guide provides a migration path for WordPress sites using GetAddress.io with Gravity Forms to switch to Ideal Postcodes.

Both GetAddress.io and Ideal Postcodes offer address autocomplete for Gravity Forms through HTML custom fields. The migration requires:

  1. Replacing the script CDN URL
  2. Updating the JavaScript initialization code with the Ideal Postcodes Address Finder
  3. Remap your existing input fields to Ideal Postcodes fields

Side-by-Side Comparison​

GetAddress.io Implementation​

<script src="https://cdn.getaddress.io/scripts/getaddress-autocomplete-1.0.24.min.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    getAddress.autocomplete(
      'input[name="input_1"]',
      "YOUR_GETADDRESS_API_KEY",
      {
        output_fields: {
          line_2: 'input[name="input_2"]',
          line_3: 'input[name="input_3"]',
          town_or_city: 'input[name="input_4"]',
          postcode: 'input[name="input_5"]',
        },
      },
    );
  });
</script>

Ideal Postcodes Implementation​

<script src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/address-finder-bundled"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    IdealPostcodes.AddressFinder.setup({
      apiKey: "YOUR_IDEAL_POSTCODES_API_KEY",
      outputFields: {
        line_1: 'input[name="input_1"]',
        line_2: 'input[name="input_2"]',
        line_3: 'input[name="input_3"]',
        post_town: 'input[name="input_4"]',
        postcode: 'input[name="input_5"]',
      },
    });
  });
</script>

Key differences:

  • Function name: getAddress.autocomplete() → IdealPostcodes.AddressFinder.setup()
  • API key location: Second parameter → apiKey property in config object
  • Configuration key: output_fields → outputFields (camelCase)
  • Field name: town_or_city → post_town

Migration Steps​

Step 1: Identify Your Address Fields​

Gravity Forms uses numeric Field IDs to identify form inputs. You'll need to know the Field ID for each address field in your form.

If you're already using GetAddress.io, you can find your Field IDs in your existing configuration:

getAddress.autocomplete(
  'input[name="input_1"]', // Field ID: 1 (autocomplete input)
  "YOUR_GETADDRESS_API_KEY",
  {
    output_fields: {
      line_1: 'input[name="input_2"]',      // Field ID: 2
      line_2: 'input[name="input_3"]',      // Field ID: 3
      line_3: 'input[name="input_4"]',      // Field ID: 4
      town_or_city: 'input[name="input_5"]',// Field ID: 5
      postcode: 'input[name="input_6"]',    // Field ID: 6
    },
  },
);

The Field IDs are the numbers in input[name="input_X"] - in this example: 1, 2, 3, 4, 5, and 6.

Step 2: Update Field Mappings​

The CSS selectors from your GetAddress.io output_fields can be reused directly in Ideal Postcodes outputFields. You only need to update the field names (keys).

Your existing GetAddress.io config:

output_fields: {
  line_1: 'input[name="input_2"]',      // ← This selector stays the same
  line_2: 'input[name="input_3"]',      // ← This selector stays the same
  line_3: 'input[name="input_4"]',      // ← This selector stays the same
  town_or_city: 'input[name="input_5"]',// ← Changes to post_town
  postcode: 'input[name="input_6"]',    // ← This selector stays the same
}

Becomes:

outputFields: {
  line_1: 'input[name="input_2"]',
  line_2: 'input[name="input_3"]',
  line_3: 'input[name="input_4"]',
  post_town: 'input[name="input_5"]',   // ← Field name changed
  postcode: 'input[name="input_6"]',
}

See the Address Field Mapping Reference for additional fields.

Field Selectors Stay the Same

The CSS selector format 'input[name="input_X"]' works for both services. Copy the selectors directly—only update the field names (keys).

Step 3: Replace GetAddress.io Script with Ideal Postcodes​

Locate your existing GetAddress.io HTML block in your Gravity Form and replace it entirely.

Use the Autocomplete JS Library Migration Guide to:

  1. Replace the CDN script URL
  2. Update the initialization code from getAddress.autocomplete() to IdealPostcodes.AddressFinder.setup()
  3. Update field mappings using the selectors from Step 2
  4. Replace your API key

Example Ideal Postcodes implementation:

<script src="https://cdn.jsdelivr.net/npm/@ideal-postcodes/address-finder-bundled"></script>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    IdealPostcodes.AddressFinder.setup({
      apiKey: "ak_test", // Replace with your Ideal Postcodes API key
      outputFields: {
        line_1: 'input[name="input_2"]', // Update to match your Field IDs
        line_2: 'input[name="input_3"]',
        line_3: 'input[name="input_4"]',
        post_town: 'input[name="input_5"]',
        postcode: 'input[name="input_6"]',
      },
    });
  });
</script>

Need Help?​

We are available 9am to 5pm UK time on chat or email support@ideal-postcodes.co.uk for migration assistance.