Contact Form 7 es de un plugin de WordPress que permite crear formularios de contacto, se trata de un plugin muy popular dentro de la comunidad de WordPress que cuenta con más de 5 millones de instalaciones activas.
En esta entrada se va a explicar cómo crear una máscara para el campo teléfono del formulario Contact Form 7, el motivo es el control de que tan solo se puedan introducir números de teléfonos de origen español.
Para ello se va a utilizar una expresión regular que permita introducir un total de 9 dígitos con la particularidad de que el primer número sea 6, 7 o 9. En el caso de que se escriba un número no correcto, apacerá un mensaje, que se podría personalizar, indicando que el teléfono introducido no es correcto.
El código que crea está máscara para el teléfono, se debe incluir en el fichero functions.php de tu tema, pero debieras de valorar el crear un tema hijo para no perder esta personalización si actualizas el tema.
function custom_filter_wpcf7_is_tel( $result, $tel ) add_filter( 'wpcf7_is_tel', 'custom_filter_wpcf7_is_tel', 10, 2 );
El método de arriba permite aplicar cualquier expresión regular para aplicar una máscara de entrada de datos al campo teléfono, en este caso, la expresión regular está creada para el lenguaje PHP. Se puede comprobar su funcionalidad en esta página web.
Para personalizar el mensaje adecuado con esta máscara de teléfono, se tendría que modificar dentro de la administración de WordPress, acudir a la opción de «Contacto, «Formularios de contacto», seleccionar el formulario donde se ha aplicado la máscara e ir a la pestaña de «Mensajes».
Se debe modificar el mensaje de texto del campo «El número de teléfono que ha introducido el remitente no es válido» como se observa en la imagen.
¿Hay alguna opción en esa función para evitar los espacios? Sería ideal que no dejase meter ningún espacio.
Hola Pedro,
Puedes probar alguna expresión regular para eliminar espacios, prueba con algo tipo a
preg_replace("/\s+/"," ",$texto);¡Un saludo!
Y se puede usar en conjunto ambas? Tengo un campo de formulario de tipo teléfono. Me gustaría poder implementar que no coja espacios y además, haga lo que hace la función del artículo, limitar a 9 caracteres que empiecen por 6,7 y 9.
Hola Pedro,
Se que puedes «encadenar» varios regex o expresiones regulares, lo único el mensaje de error, igual queda raro para el usuario.
Si limitas los caracteres a 9 (en Contact Form 7 es fácil de hacer) ya fuerzas a introducir el número sin espacios.
Otra opción, es que cuando se pulse el espacio en ese campo «no haga nada» (esto se hace por JavaScript) –> Aqui un ejemplo: https://stackoverflow.com/questions/14236873/disable-spaces-in-input-and-allow-back-arrow
¡Un saludo!