Skip to main content

Jotform Migration

This guide provides step-by-step instructions for migrating your Jotform address validation integration from GetAddress to Ideal Postcodes.

Migration Overview​

Migrating your Jotform integration involves:

  1. Removing the GetAddress script reference
  2. Adding the Ideal Postcodes Address Finder script
  3. Updating the initialization code with correct field mappings
  4. Replacing your API key

Side-by-Side Comparison​

GetAddress Implementation​

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

<script>
  document.addEventListener("DOMContentLoaded", () => {
    getAddress.autocomplete("input_3_addr_line1", "YOUR_GETADDRESS_API_KEY", {
      output_fields: {
        formatted_address_1: "input_3_addr_line2",
        town_or_city: "input_3_city",
        county: "input_3_state",
        postcode: "input_3_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_3",
        line_2: "#input_4",
        line_3: "#input_5",
        post_town: "#input_6",
        postcode: "#input_7",
      },
    });
  });
</script>

Key Differences​

AspectGetAddressIdeal Postcodes
Script Sourcecdn.getaddress.iocdn.jsdelivr.net (global CDN)
Function NamegetAddress.autocomplete()IdealPostcodes.AddressFinder.watch()
Field MappingUses Jotform's compound address field IDsUses individual Short Text field IDs
Address Fieldsformatted_address_1, town_or_city, county, postcodeline_1, line_2, line_3, post_town, postcode
Selector FormatDirect field IDCSS selector (#input_X)

Migration Steps​

Step 1: Update Your Form Structure​

If you're using Jotform's built-in Address element, you'll need to switch to individual Short Text fields for better control and PAF compliance.

Create these Short Text fields:

  1. Address Line One
  2. Address Line Two
  3. Address Line Three
  4. Post Town
  5. Postcode

Create address fields

Note the Field ID for each field in the Short Text Properties panel (e.g., input_3, input_4, etc.).

Field ID location

Step 2: Remove GetAddress Script​

Locate and delete the HTML block containing the GetAddress script:

<!-- DELETE THIS -->
<script src="https://cdn.getaddress.io/scripts/getaddress-autocomplete-1.0.24.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", () => {
    getAddress.autocomplete(/* ... */);
  });
</script>

Step 3: Add Ideal Postcodes Script​

Add a new HTML block with the Ideal Postcodes Address Finder:

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

<script>
  document.addEventListener("DOMContentLoaded", function () {
    IdealPostcodes.AddressFinder.watch({
      apiKey: "ak_test", // Replace with your live 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>

Step 4: Update Field Mappings​

Replace the Field IDs in outputFields with your actual Field IDs:

Example mapping:

Field NameGetAddressIdeal PostcodesYour Field ID
Address Line 1formatted_address_1line_1#input_3
Address Line 2N/Aline_2#input_4
Address Line 3N/Aline_3#input_5
Town/Citytown_or_citypost_town#input_6
Postcodepostcodepostcode#input_7
Adding County

If you need a county field, add it to the configuration:

outputFields: {
  line_1: "#input_3",
  line_2: "#input_4",
  line_3: "#input_5",
  post_town: "#input_6",
  county: "#input_8",    // Add county field
  postcode: "#input_7",
}

Step 5: Replace Your API Key​

  1. Create an Ideal Postcodes account (free test account available)
  2. Copy your API key from the dashboard
  3. Replace "ak_test" in the apiKey field with your live API key
apiKey: "ak_live_YourActualAPIKey",  // Replace this

Step 6: Test Your Form​

  1. Preview your form in Jotform
  2. Start typing an address in the first address line field
  3. Verify that address suggestions appear
  4. Select an address and confirm all fields populate correctly

Additional Configuration Options​

Ideal Postcodes Address Finder supports extensive customization. Common options include:

IdealPostcodes.AddressFinder.watch({
  apiKey: "ak_live_YourKey",
  outputFields: {
    /* ... */
  },

  // Optional configuration
  injectStyle: true, // Apply default styling
  checkKey: true, // Validate API key on load
  placeholder: "Search address", // Custom placeholder text

  // Callbacks
  onAddressRetrieved: function (address) {
    console.log("Address selected:", address);
  },
});

For complete configuration options, see the Address Finder Plugin Documentation.

Need Help?​

Our support team is available to assist with your migration: