¿Cómo tener el código de país en tu campo de teléfono en Elementor WordPress?#

Si tienes un formulario en tu sitio web hecho con Elementor y quieres que el campo de teléfono incluya automáticamente un código de país, puedes lograrlo fácilmente usando complementos y scripts adicionales. Esto mejora la experiencia del usuario y asegura que los números ingresados sean válidos para tu negocio.

1. Usando un complemento especializado#

Existen plugins para WordPress que integran la funcionalidad de selección de código de país en los campos de teléfono, como:

• International Telephone Input for WordPress
• CF7 International Telephone Input (compatible con Contact Form 7, pero adaptable a Elementor)
• Elementor Pro + Addons como Essential Addons o Premium Addons que incluyen campos avanzados de teléfono.

2. Integrando el script «intl-tel-input»#

Otra forma es usar la librería JavaScript intl-tel-input para mostrar el selector de país con su respectivo prefijo. Los pasos serían:

1. Descargar la librería desde GitHub o CDN.
2. En Elementor, añade un campo de tipo «tel» con un id específico, por ejemplo phone.
3. En tu tema (o usando un plugin de código personalizado), agrega este script:

   
     <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
     <script>
       var input = document.querySelector("#phone");
       window.intlTelInput(input, {
         initialCountry: "pe", // Código de país inicial (ejemplo: Perú)
         preferredCountries: ["pe", "mx", "co"], // Países destacados
         separateDialCode: true
       });
     </script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.min.css"/>
     
   

3. Beneficios de tener el código de país en el formulario#

• Facilita el envío de datos correctos para WhatsApp, CRM o campañas de marketing.
• Reduce errores de formato.
• Mejora la experiencia de usuario y la conversión de leads.

Conclusión#

Agregar un código de país en el campo de teléfono en Elementor es posible con plugins listos para usar o integrando librerías como intl-tel-input. Esto hará tus formularios más profesionales, funcionales y amigables para usuarios de cualquier país.