How to Pre-fill Country, Phone Code and Currency from the Visitor's IP
- API or service
- IP Geolocation API
- Task
- Visitor's IP → country, calling code, currency → editable form fields
- Examples
- Difficulty
- Beginner
- Time
- 5 min
You have a checkout, sign-up, or contact form with country, phone, and currency fields, and want to fill them in for the visitor before they start typing. The Geoapify IP Geolocation API returns the country of the visitor's IP address with its two-letter code, calling code, and currency.
Call the API once when the form opens, set the country, the phone prefix, and the currency from the response, and keep every field editable. The location comes from the IP address and is approximate: visitors who travel, use a VPN, or sit behind a company network can get another country. The pre-fill saves typing; the visitor's choice is what counts.
Task flow: visitor's IP address → IP Geolocation API → country, calling code, currency → pre-filled, editable form fields.
Plan the pre-fill
Map each form field to one response property:
| Form field | Response property | How to use it |
|---|---|---|
| Country | country.iso_code |
Two-letter code, for example CA. Use it as the value of the country select. Use country.name only as a label when your list doesn't have the code. |
| Phone prefix | country.phone_code |
Calling code without the +, for example 1. Add the + yourself: +1. |
| Currency | country.currency |
Currency code, for example CAD. It can list several codes separated by commas: split the value and select the first code. |
| Flag (optional) | country.flag |
Flag emoji to show next to the country name. |
Choose the country by country.iso_code, not by the calling code: several countries share one calling code, for example 1 for Canada and the United States.
Rules for a form the visitor trusts:
- Fill only empty fields. Never overwrite something the visitor has already typed or chosen, and don't fill the form again after they change it.
- Keep every field editable. Don't lock or hide a pre-filled field. A short note such as "Pre-filled from your approximate location. You can change it." explains where the values come from.
- Don't wait for the API. Show the form right away and apply the values when the response arrives. If the request fails or returns no
country, leave the fields empty for the visitor. - Call it once per form. One request is one credit; see IP Geolocation pricing. Cache the result for the session instead of calling the API on every page.
Where to call the API:
- From the browser: send the request without
ip. The API uses the IP address of whoever sends the request, which is the visitor's. - From your backend: the API would see your server's IP address. Pass the visitor's IP address in
ipinstead.
An IP address can be personal data under some privacy laws. Follow your own privacy requirements when you send it to the API.
Request the visitor's country
From the browser, send the request without ip. The API looks up the IP address the request comes from:
https://api.geoapify.com/v1/ipinfo?apiKey=YOUR_API_KEY
To test with a known address, or from a backend, set ip. This request looks up 132.246.11.229, a public time server of the National Research Council Canada (time.nrc.ca) in Ottawa:
https://api.geoapify.com/v1/ipinfo?ip=132.246.11.229&apiKey=YOUR_API_KEY
Reduced response: The response below keeps the fields the form uses and a few for context. The names objects and other country fields are left out.
{
"ip": "132.246.11.229",
"city": {
"name": "Ottawa (Downtown)"
},
"state": {
"name": "Ontario"
},
"country": {
"name": "Canada",
"iso_code": "CA",
"phone_code": "1",
"currency": "CAD",
"flag": "🇨🇦",
"languages": [
{ "iso_code": "en", "name": "English", "name_native": "English" },
{ "iso_code": "fr", "name": "French", "name_native": "Français" }
]
},
"location": {
"latitude": 45.4173,
"longitude": -75.7081
}
}
The form fields from this response:
| Form field | Value |
|---|---|
| Country | CA (Canada 🇨🇦) |
| Phone prefix | +1 |
| Currency | CAD |
The city and coordinates are approximate and not needed for these fields. See the API reference for every response field.
Handle the other outcomes:
| Status | Meaning | What the form does |
|---|---|---|
200 without country |
The response has no country data to use. | Leave the fields empty. |
| 400 | The ip value isn't a valid IP address. |
Leave the fields empty; check the value your backend sends. |
| 401 | The API key is missing or invalid. | Leave the fields empty and log the error. |
| 429 | Too many requests. | Leave the fields empty; don't retry on the visitor's page load. |
In every case the visitor can still fill in the fields themselves.
Form pre-fill with an AI coding agent
Copy this prompt into Codex, Claude Code, Cursor, or another coding agent to pre-fill the country, phone prefix, and currency in a form of your project.
Pre-fill the country, phone prefix, and currency fields of a form in my project from the visitor's IP address with the Geoapify IP Geolocation API. Every field must stay editable.
Before you start
- Inspect the existing project first. Reuse its current framework, form components, validation, styling, HTTP client, and conventions. Make the smallest necessary changes.
- Ask only what the project doesn't answer: which form and fields to pre-fill, and whether the request runs in the browser or on the backend.
- Ask me to configure a Geoapify API key before live requests. On a backend, read it from GEOAPIFY_API_KEY. In a browser, ask whether to use a restricted key or a backend proxy. Never hardcode, print, or log the key.
API flow
1. In the browser, send GET https://api.geoapify.com/v1/ipinfo?apiKey=... without ip: the API uses the IP address the request comes from. On a backend, pass the visitor's IP address in ip; without it, the API would look up the server.
2. Country: set the country field to country.iso_code (two letters, for example CA). Phone prefix: "+" plus country.phone_code (returned without "+"). Currency: country.currency can list several codes separated by commas; split it and select the first code.
3. Choose the country by iso_code, never by phone_code: several countries share one calling code.
Requirements
- Fill only empty fields, and never overwrite a value the visitor has typed or chosen. Don't fill the form again after the visitor changes it.
- Keep every field editable and show a short note that the values come from the approximate location.
- Render the form immediately; apply the values when the response arrives.
- If the response has no country or the request fails (400, 401, 429, timeout), leave the fields empty without blocking the form. Don't retry on page load.
- Call the API once per session and reuse the result; each request costs one credit.
Review the generated code against this guide. Check that it never overwrites the visitor's input, keeps the fields editable, splits currency, adds the + to the phone code, and doesn't expose the API key.