Skip to main content

Jotform Integration Migration

Migrate your Jotform address validation from GetAddress.io to Ideal Postcodes by replacing the script and updating field mappings.

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_1_addr_line1", "YOUR_GETADDRESS_API_KEY", {
      output_fields: {
        formatted_address_1: "input_1_addr_line2",
        town_or_city: "input_1_city",
        county: "input_1_state",
        postcode: "input_1_postal",
      },
    });
  });
</script>

Ideal Postcodes Implementation​

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

<script>
  document.addEventListener("DOMContentLoaded", function () {
    IdealPostcodes.AddressFinder.watch({
      apiKey: "YOUR_IDEAL_POSTCODES_API_KEY",
      outputFields: {
        line_1: "#input_1_addr_line_1",
        post_town: "#input_1_state",
        postcode: "#input_1_postal",
      },
    });
  });
</script>

Key differences:

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

Migration Steps​

1. Add Script​

Replace GetAddress.io script with Ideal Postcodes CDN:

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

2. Identify Field IDs​

Create individual Short Text fields (not Jotform's compound Address element). Note each field's ID from the Short Text Properties panel:

  • Address Line 1: e.g., input_3
  • Address Line 2: e.g., input_4
  • Address Line 3: e.g., input_5
  • Post Town: e.g., input_6
  • Postcode: e.g., input_7

Convert Field IDs to CSS selectors by adding # prefix: input_3 → #input_3

3. Add Initialization​

Replace GetAddress.io initialization with Ideal Postcodes, using your field IDs:

<script>
  document.addEventListener("DOMContentLoaded", function () {
    IdealPostcodes.AddressFinder.watch({
      apiKey: "ak_test", // Replace with your API key
      outputFields: {
        line_1: "#input_3",    // Update to match your Field IDs
        line_2: "#input_4",
        line_3: "#input_5",
        post_town: "#input_6",
        postcode: "#input_7",
      },
    });
  });
</script>

Replace ak_test with your API key and update #input_X with your field IDs.

See the Address Field Mapping Reference for additional fields.

Further Configuration​