Cómo añadir un desplegable de países a tu formulario web
Las listas fijas de países se quedan viejas. Cambian códigos ISO, regiones y estados. El widget de CountriesDB rellena tus desplegables con datos que mantenemos al día. Pegas un trozo de HTML y creas una cuenta gratuita.
Para quién
Quieres campos de país (y a veces estado o provincia) en:
- Formularios de contacto o leads
- Checkout o envío
- Registro
No necesitas una API propia para empezar. Si puedes pegar HTML, o usar un bloque HTML personalizado en WordPress o Webflow, vale.
Qué necesitas
- Un sitio en un dominio tuyo (plan gratis: lista de dominios permitidos)
- Sitio donde pegar HTML
- Unos diez minutos
Configuración
1. Cuenta y proyecto
Regístrate gratis, abre el panel y crea un proyecto. Ahí van claves, dominios y plan.
2. Clave pública
En Credentials, crea credenciales y copia la clave pública para la URL del script.
La clave privada solo en el servidor, nunca en el HTML público.
3. Dominio permitido
En Domains, el host donde está el formulario (p. ej. www.ejemplo.com). Los subdominios cuentan. El widget no corre en otros sitios.
Prueba en el dominio real. En local puede ir distinto.
4. Script y selects
Pega el script y dos <select> vacíos. Cambia YOUR_PUBLIC_KEY por la clave del paso 2. El bloque completo está abajo.
5. Comprobar
Publica, abre la página en el dominio permitido y mira que se rellenan los dos desplegables. Cambia el país y revisa las regiones.
Ejemplo
<!-- Widget CountriesDB: sustituye YOUR_PUBLIC_KEY -->
<script src="https://unpkg.com/@countriesdb/widget@latest/dist/index.js?public_key=YOUR_PUBLIC_KEY"></script>
<label for="country">País</label>
<select id="country" class="country-selection" name="country">
<option value="">Seleccionar país</option>
</select>
<label for="region">Estado / provincia</label>
<select id="region" class="subdivision-selection" name="state">
<option value="">Seleccionar estado o provincia</option>
</select>
Más opciones: documentación del widget.
País y región
El segundo select muestra subdivisiones ISO 3166-2 del país elegido. Al cambiar el país, el widget recarga regiones.
Geolocalización
El widget puede sugerir el país del visitante. Para desactivarlo: desactivar geolocalización.
FAQ
¿Necesito un desarrollador?
Casi nunca si pegas HTML tú. Temas raros: un dev un momento, o contacto en plan de pago.
¿Plan gratis?
Sí: 1.000 peticiones al mes y un dominio de widget. Precios, plan gratis.
¿Estados y provincias?
Las dos clases del ejemplo: country-selection y subdivision-selection.
¿WordPress o Webflow?
Pega el snippet en HTML personalizado o embed. Más guías por plataforma abajo.
¿Clave pública secreta?
En el navegador está bien. La privada solo en el servidor. API de validación.
¿Copiar una lista de internet?
Se caduca y suele faltar regiones. El widget usa los mismos datos que la API.
¿Atascado?
Plan de pago: contacto para configuración gratuita.
Enlaces
Más guías
Publicaremos guías paso a paso para configuraciones concretas. Cada una enlazará de vuelta a esta página para el fragmento principal:
- Campos de país y estado/provincia para formularios de dirección y checkout (próximamente)
- Añadir un desplegable de país a un formulario de contacto en WordPress (próximamente)
- Insertar selects de país en Webflow o Squarespace (próximamente)
- Desplegable de país en React en 5 minutos (próximamente)
Validación en servidor
En producción conviene verificar códigos en el servidor. API de validación backend con clave privada. Widget en el formulario, API para comprobar lo enviado.