Es muy común que podamos encontrar a lo largo de múltiples sitios web formularios creados con la intención principal de captar nuestros datos relevantes, estamos hablando de nombre, apellido, correo electrónico y teléfono, además en algunos casos si son muy atrevidos el número que este asociado al WhatsApp.
En estos últimos mencionados los campos que corresponden al número de teléfono tienen una peculiaridad, la cual es que en el campo por defecto no es posible definir de forma visual un código de área qué este asociado a un país, de hecho el solo pensar en crear un selector con todos los países es una labor que dependiendo de la herramienta que estemos utilizando debe hacerse de forma manual.
A continuación vamos a ver como podemos agregar un selector de país de ser necesario y una alternativa de como agregar códigos de país al campo de números de teléfono en formularios construidos con Contact Form 7.
Tabla de contenidos
Crear Selector de Paises
Primero que nada para fines de este ejemplo debemos tener instalado el plugin de Contact Form 7.
Con nuestro formulario ya creado vamos a proseguir a añádir el siguiente selector que hemos creado solo para que hagas copy/paste.
Selector de países en Ingles
[select* pais first_as_label "Selecciona un País" "Afghanistan" "Albania" "Algeria" "Andorra" "Angola" "Antigua & Deps" "Argentina" "Armenia" "Australia" "Austria" "Azerbaijan" "Bahamas" "Bahrain" "Bangladesh" "Barbados" "Belarus" "Belgium" "Belize" "Benin" "Bhutan" "Bolivia" "Bosnia Herzegovina" "Botswana" "Brazil" "Brunei" "Bulgaria" "Burkina" "Burundi" "Cambodia" "Cameroon" "Canada" "Cape Verde" "Central African Rep" "Chad" "Chile" "China" "Colombia" "Comoros" "Congo" "Congo {Democratic Rep}" "Costa Rica" "Croatia" "Cuba" "Cyprus" "Czech Republic" "Denmark" "Djibouti" "Dominica" "Dominican Republic" "East Timor" "Ecuador" "Egypt" "El Salvador" "Equatorial Guinea" "Eritrea" "Estonia" "Ethiopia" "Fiji" "Finland" "France" "Gabon" "Gambia" "Georgia" "Germany" "Ghana" "Greece" "Grenada" "Guatemala" "Guinea" "Guinea-Bissau" "Guyana" "Haiti" "Honduras" "Hungary" "Iceland" "India" "Indonesia" "Iran" "Iraq" "Ireland {Republic}" "Israel" "Italy" "Ivory Coast" "Jamaica" "Japan" "Jordan" "Kazakhstan" "Kenya" "Kiribati" "Korea North" "Korea South" "Kosovo" "Kuwait" "Kyrgyzstan" "Laos" "Latvia" "Lebanon" "Lesotho" "Liberia" "Libya" "Liechtenstein" "Lithuania" "Luxembourg" "Macedonia" "Madagascar" "Malawi" "Malaysia" "Maldives" "Mali" "Malta" "Marshall Islands" "Mauritania" "Mauritius" "Mexico" "Micronesia" "Moldova" "Monaco" "Mongolia" "Montenegro" "Morocco" "Mozambique" "Myanmar, {Burma}" "Namibia" "Nauru" "Nepal" "Netherlands" "New Zealand" "Nicaragua" "Niger" "Nigeria" "Norway" "Oman" "Pakistan" "Palau" "Panama" "Papua New Guinea" "Paraguay" "Peru" "Philippines" "Poland" "Portugal" "Qatar" "Romania" "Russian Federation" "Rwanda" "St Kitts & Nevis" "St Lucia" "Saint Vincent & the Grenadines" "Samoa" "San Marino" "Sao Tome & Principe" "Saudi Arabia" "Senegal" "Serbia" "Seychelles" "Sierra Leone" "Singapore" "Slovakia" "Slovenia" "Solomon Islands" "Somalia" "South Africa" "South Sudan" "Spain" "Sri Lanka" "Sudan" "Suriname" "Swaziland" "Sweden" "Switzerland" "Syria" "Taiwan" "Tajikistan" "Tanzania" "Thailand" "Togo" "Tonga" "Trinidad & Tobago" "Tunisia" "Turkey" "Turkmenistan" "Tuvalu" "Uganda" "Ukraine" "United Arab Emirates" "United Kingdom" "United States" "Uruguay" "Uzbekistan" "Vanuatu" "Vatican City" "Venezuela" "Vietnam" "Yemen" "Zambia" "Zimbabwe"]
Selector de paises en Español
[select* pais first_as_label "Selecciona un País" "Afghanistan" "Albania" "Algeria" "Andorra" "Angola" "Antigua & Deps" "Argentina" "Armenia" "Australia" "Austria" "Azerbaijan" "Bahamas" "Bahrain" "Bangladesh" "Barbados" "Belarus" "Belgica" "Belize" "Benin" "Butan" "Bolivia" "Bosnia Herzegovina" "Botsuana" "Brasil" "Brunei" "Bulgaria" "Burkina" "Burundi" "Camboya" "Camerun" "Canada" "Cabo Verde" "Republica Centroafricana" "Chad" "Chile" "China" "Colombia" "Comoras" "Congo" "Republica Democratica del Congo" "Costa Rica" "Croacia" "Cuba" "Chipre" "Republica Checa" "Dinamarca" "Yibuti" "Dominica" "Republica Dominicana" "Timor Oriental" "Ecuador" "Egipto" "El Salvador" "Guinea Ecuatorial" "Eritrea" "Estonia" "Etiopía" "Fiji" "Finlandia" "Francia" "Gabon" "Gambia" "Georgia" "Alemania" "Ghana" "Grecia" "Granada" "Guatemala" "Guinea" "Guinea-Bissau" "Guyana" "Haiti" "Honduras" "Hungria" "Islandia" "India" "Indonesia" "Iran" "Irak" "Irlanda {Republica}" "Israel" "Italia" "Costa de Marfil" "Jamaica" "Japon" "Jordania" "Kazajistán" "Kenia" "Kiribati" "Corea del Norte" "Corea del Sur" "Kosovo" "Kuwait" "Kirguistan" "Laos" "Letonia" "Líbano" "Lesoto" "Liberia" "Libia" "Liechtenstein" "Lituania" "Luxemburgo" "Macedonia" "Madagascar" "Malawi" "Malasia" "Maldivas" "Mali" "Malta" "Islas Marshall" "Mauritania" "Mauricio" "México" "Micronesia" "Moldavia" "Monaco" "Mongolia" "Montenegro" "Marruecos" "Mozambique" "Myanmar, {Birmania}" "Namibia" "Nauru" "Nepal" "Paises Bajos" "Nueva Zelanda" "Nicaragua" "Níger" "Nigeria" "Noruega" "Oman" "Pakistan" "Palau" "Panama" "Papúa Nueva Guinea" "Paraguay" "Peru" "Filipinas" "Polonia" "Portugal" "Qatar" "Rumania" "Federacion de Rusia" "Ruanda" "San Cristobal y Nieves" "Santa Lucía" "San Vicente y las Granadinas" "Samoa" "San Marino" "Santo Tomé y Príncipe" "Arabia Saudí" "Senegal" "Serbia" "Seychelles" "Sierra Leona" "Singapur" "Eslovaquia" "Somalia" "Sudáfrica" "Sudan del Sur" "España" "Sri Lanka" "Sudan" "Surinam" "Suazilandia" "Suecia" "Suiza" "Siria" "Taiwan" "Tayikistan" "Tanzania" "Tailandia" "Togo" "Tonga" "Trinidad y Tobago" "Tunez" "Turquia" "Turkmenistan" "Tuvalu" "Uganda" "Ucrania" "Emiratos Arabes Unidos" "Reino Unido" "Estados Unidos" "Uruguay" "Uzbekistan" "Vanuatu" "Ciudad del Vaticano" "Venezuela" "Vietnam" "Yemen" "Zambia" "Zimbabwe"]
Veamos el resultado de el selector que hemos recien compartido.
Crear Selector de Países asociado al Número de teléfono
Si bien es posible crear el selector de paises de forma manual aun no tenemos un campo que se asocie de forma directa con el codigo de pais de un telefono en especifico, esto sin contar de que aun tampoco hemos hecho visible las banderitas que ademas de identificar el pais correspondiente son una forma vas visible de mostrar la seleccion al usuario.
Vamos a instalar un plugin complementario a Contact form 7 llamado “Country & Phone Field Contact Form 7”
Una vez instalado tendremos una opción nueva desde el apartado de Contacto-> CPF Settings.
Desde las cuales podremos ver las siguientes opciones divididas en dos pestañas.
Opciones del campo selector de país
Donde encontraremos los siguientes campos a configurar.
- Default Country: Permite colocar un país en específico por defecto
- Include Countries: De existir un país que no ha sido contemplado se puede agregar
- Exclude Countries: Si se desea que un país no aparezca en el listado, se puede excluir
- Preferred Countries: Se pueden destacar ciertos países en el orden del listado de países
- Enable Auto Country Select: Si se activa esta opción el selector va a determinar el país acorde a la IP del usuario
Opciones del campo teléfono
Donde encontraremos los siguientes campos a configurar.
- Default Country: Permite colocar un país en específico por defecto
- Include Countries: De existir un país que no ha sido contemplado se puede agregar
- Exclude Countries: Si se desea que un país no aparezca en el listado, se puede excluir
- Preferred Countries: Se pueden destacar ciertos países en el orden del listado de países
- Disable International dial codes: Al activar esta opción se ocultarán los códigos de país que acompañan al número de teléfono
- Enable Auto Dial Code Select: Si se activa esta opción, el código del país se va a determinar acorde a la IP del usuario
Añadir nuevos campos a nuestro formulario en Contact Form 7
Ya dentro de nuestro formulario vamos a apreciar que tenemos dos campos nuevos que podemos agregar, el de “country drop-down” y el de “phone number” los cuales difieren de los campos ya por defecto de el caso de “tel”.
Vamos a proseguir a agregar los campos de “country drop-down” y el de “phone number”, al agregar el campo de “phone number” tenemos la opción de hacer que la validación se aplique al número con el código de país o solo al número de teléfono ignorando el código de país.
Este es el aspecto de los campos en la estructura de nuestro formulario.
Y este es el resultado en la vista del formulario.
Veamos de forma animada como se comportan ambos campos nuevos.
Conclusiones
Construir formularios en Contact form 7 quizás no sea la preferencia de algunos, pero vaya que si es diverso y práctico a la hora de o bien construir el formulario a medida y crear un selector bastante extenso con todo el listado de países o usar plugins complementarios que agregan funcionalidades como la que acabamos de revisar.
Recordemos que lo mejor de todo es que siguen siendo plugins ligeros y gratuitos que debemos considerar para nuestros futuros desarrollos web.
Si deseas conocer que otras opciones nos presenta Contact form 7 puedes echarle un vistazo a los siguientes artículos.
- Contact Form 7 en WordPress con CFDB7 ¡no pierdas los mensajes!
- Enlazar Contact Form 7 con Google Sheets
- Configurar múltiples receptores determinados por selección en Contact form 7
- Evitar la carga del plugin Contact form 7 en todas las paginas
¿Te ha resultado útil este artículo?
Equipo de soporte WordPress y Woocommerce en Webempresa.
