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
3. Reconfiguring field mappings for improved granularity
4. Updating your API key

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: {
          formatted_address_2: 'input[name="input_2"]',
          postcode: 'input[name="input_3"]',
        },
      },
    );
  });
</script>

### Ideal Postcodes Implementation ```html
<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>

Migration Steps

Step 1: Create Address Input Fields

If you're already using GetAddress.io, you likely have address fields set up. For Ideal Postcodes, we recommend using separate fields for better data quality:

Recommended field structure:

1. Address line one (Field ID: e.g., 1)
2. Address line two (Field ID: e.g., 2)
3. Address line three (Field ID: e.g., 3)
4. Post town (Field ID: e.g., 4)
5. Postcode (Field ID: e.g., 5)

These should be Single Line Text fields under Standard Fields.

Note the Field ID for each address field—you'll need these for configuration.

Step 2: Replace GetAddress.io Script

Locate your existing GetAddress.io HTML block in your Gravity Form and replace it entirely with the Ideal Postcodes implementation.

Find Your Current Implementation

Look for a HTML field containing:

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

Replace with Ideal Postcodes Address Finder

Delete the existing code and replace with:

<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_1"]', // Update Field ID
        line_2: 'input[name="input_2"]', // Update Field ID
        line_3: 'input[name="input_3"]', // Update Field ID
        post_town: 'input[name="input_4"]', // Update Field ID
        postcode: 'input[name="input_5"]', // Update Field ID
      },
    });
  });
</script>

Update Field IDs

Update input_1, input_2, etc., to match your actual Gravity Forms Field IDs. For example, if your Address Line One field has Field ID of 24, replace 'input[name="input_1"]' with 'input[name="input_24"]'.

Step 3: Get Your Ideal Postcodes API Key

1. Sign up for an Ideal Postcodes account
2. Navigate to your dashboard
3. Copy your API key (starts with ak_)
4. Replace "ak_test" in the code above with your key

Step 4: Test the Integration

1. Save your form in Gravity Forms
2. Preview the form on your website
3. Start typing an address in the first field
4. Verify that address suggestions appear as you type
5. Select an address and confirm all fields populate correctly

Field Mapping Reference

Ideal Postcodes provides more detailed address components than GetAddress.io. Here's how to map them:

Address Component	GetAddress.io Field	Ideal Postcodes Field	Example Value
First address line	formatted_address_2 (combined)	line_1	"2 Barons Court Road"
Second address line	formatted_address_2 (combined)	line_2	"Barons Court"
Third address line	Not available	line_3	""
Town/City	formatted_address_2 (combined)	post_town	"LONDON"
Postcode	postcode	postcode	"W14 9DP"

Additional Fields (Optional)

Ideal Postcodes supports additional address fields not available in GetAddress.io:

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"]',
  county: 'input[name="input_6"]',     // Optional: County field
  country: 'input[name="input_7"]',    // Optional: Country field
  postcode: 'input[name="input_5"]',
}

See the full list of available address fields.

Alternative: Postcode Lookup

If you prefer a traditional "Enter Postcode → Select Address" workflow instead of autocomplete, Ideal Postcodes offers Postcode Lookup:

Postcode Lookup Implementation

Add HTML for Lookup Fields

Add a HTML Content field above your address fields:

<div class="gform_wrapper">
  <div class="ginput_container ginput_container_text">
    <input
      type="text"
      placeholder="Lookup your postcode"
      class="medium"
      id="idpc_input"
    />
  </div>
  <div class="gform_footer" style="margin: 0;">
    <input
      type="button"
      id="idpc_button"
      class="gform_button button"
      value="Lookup Postcode"
    />
    <div id="idpc_dropdown" style="margin-top: 1em"></div>
    <div id="idpc"></div>
  </div>
</div>

Add Postcode Lookup Script

Add another HTML block at the bottom of your form:

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

<script>
  document.addEventListener("DOMContentLoaded", function () {
    IdealPostcodes.PostcodeLookup.setup({
      apiKey: "ak_test", // Replace with your API key
      context: "#idpc",
      button: "#idpc_button",
      input: "#idpc_input",
      selectClass: "#idpc_dropdown",
      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>

Configuration Options

Ideal Postcodes provides extensive configuration options not available in GetAddress.io:

Customizing Address Finder

IdealPostcodes.AddressFinder.setup({
  apiKey: "YOUR_API_KEY",

  // Populate fields on address selection
  outputFields: {
    /* ... */
  },

  // Customize input placeholder
  placeholder: "Start typing your address...",

  // Set minimum characters before search
  minLength: 3,

  // Customize suggestion list styling
  style: {
    // Add custom CSS
  },

  // Filter results by postcode outward
  filter: "SW1A",

  // Customize dropdown behavior
  maxSuggestions: 10,
});

See the Address Finder documentation for all configuration options.

Styling and Theming

You can override CSS styles in the same HTML field to match your theme:

<style>
  @media only screen and (min-width: 641px) {
    ul.idpc_ul {
      min-width: 0 !important;
      width: calc(50% - 8px);
    }
  }

  /* Customize suggestion list */
  .idpc_ul {
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  /* Customize suggestion items */
  .idpc_li {
    padding: 10px;
  }
</style>

Need Help?

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