Hosting WordPress Webempresa

Formulario con campo de código de país para teléfonos en Contact Form 7

por | Nov 30, 2022 | Plugins WordPress

Formulario con campo de código de país para teléfonos en Contact Form 7

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.

  Crear Selector de Paises


Primero que nada para fines de este ejemplo debemos tener instalado el plugin de Contact Form 7.

Contact Form 7

Si deseas conocer los principios basicos y como funciona Contact Form 7 puedes echarle un vistazo al siguiente articulo Cómo crear formularios con 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.

campo-pais-cf7-gif

  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”

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

campo-pais-cf7-1

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
Para colocar países en los campos antes descritos es necesario hacerlo en el formato ISO, por ejemplo US, CO, ES, para ver un listado completo puedes consultar el siguiente enlace Lista de códigos de países ISO 3166

Opciones del campo teléfono

campo-pais-cf7-3

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”.

campo-pais-cf7-3

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.

campo-pais-cf7-4

Este es el aspecto de los campos en la estructura de nuestro formulario.

campo-pais-cf7-5

Y este es el resultado en la vista del formulario.

campo-pais-cf7-6

Veamos de forma animada como se comportan ambos campos nuevos.

campo-pais-cf7-gif

  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.

¿Te ha resultado útil este artículo?

Hosting Divi - Wp Fácil - Webempresa