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