Personaliza los mensajes de error de tu formulario de contacto

Los formularios de contacto son una de las herramientas esenciales que debe tener todas web que quiera tener una forma de comunicación con el visitante. Esta forma de comunicación tiene múltiples finalidades: para que nos hayan llegar un mensaje, para que el usuario se pueda suscribir a una newsletter, para responder a una oferta de empleo… Y este amplio espectro de funcionalidades hace que también haya un amplio espectro de personas, con mayor o menor manejo de las herramientas propias de una web, que hagan uso de un formulario de contacto. Es por ello que hay que preveer que es posible que puedan cometer algún tipo de error al completar un formulario, y que les demos la información adecuada para que puedan subsanarlo.

Por esto, es muy importante trabajar los mensajes de error lanza nuestro formulario de contacto cuando se ha rellenado con información incorrecta un campo, o cuando falta algún campo obligatorio por rellenar. Por ejemplo, es muy común encontrar formularios en los que nos aparece un mensaje de error que nos dice «Hay un campo incorrecto», pero no nos marca mediante algún tipo de señal cual es ese campo. Y empieza la tediosa tarea de volver a repasar cada uno de los campo para ver donde se encuentra el error.

En este texto vamos a poner remedio a esto utilizando Contact Form 7, uno de nuestros plugins favoritos para crear formularios de contacto en WordPress, y centrándonos en tres puntos: personalizar los mensajes de error con las opciones que nos ofrece el propio Contact Form 7, como ir un paso más allá con estos mensajes utilizando otro plugin, y como darles estilos gracias a CSS para hacerlos visualmente más evidentes y fáciles de localizar.

mensajes de error predeterminados de contact form 7 en formulario de contacto
Esto son los mensajes de error por defecto que nos ofrece Contact Form 7. Vamos a ver como podemos mejorarlos.

Personalizando los mensajes de error desde Contact Form 7

Por supuesto, lo primero es tener instalado Contact Form 7 en nuestro WordPress. Si nunca has utilizado este plugin, te recomendamos echar un vistazo a nuestro artículo sobre como crear un formulario de contacto de forma sencilla. Una vez dicho esto, vamos a entrar la lista de formularios de contactos dentro del panel de administración de WordPress, y vamos a editar un formulario. En mi caso, voy a utilizar el formulario por defecto que me ofrece el plugin.

En la pantalla de edición de formulario, veremos que hay varias pestañas. Nos iremos a la de Mensajes, donde tendremos un listado de los mensajes o notificaciones por defecto que le aparecerán al usuario que haga uso del formulario. Estos mensajes van desde informarle que ha rellenado el formulario de forma correcta, hasta diferentes mensajes de error. Va a ser en estos últimos en los que nos vamos a detener.

opciones de mensajes del plugin para wordpress contact form 7

Como hemos dicho antes, podemos resumir a grosso modo los mensajes de error en dos tipos: los mensaje que aparecen cuando rellenamos un campo de forma incorrecta, y lo que aparecen cuando no rellenamos un campo. Para los del primer tipo, Contact Form 7 nos da opciones adecuadas para esta personalización. Por ejemplo, cuando en el campo email alguien lo rellena con algo que no es un correo electrónico, o que en el campo teléfono escriban más o menos números de los que tiene un teléfono.

Si nos vamos a la línea La dirección de correo electrónico que ha introducido el remitente no es válida dentro de la pestaña Mensajes, la respuesta que le aparecerá al usuario será Por favor, introduce una dirección de correo electrónico. Esta última frase es la que vamos a poder modificar para mostrar un mensaje que creamos más adecuado. Hablando de esto último, hagamos un pequeño paréntesis para tratar este tema.

Consejos sobre la información dada en los mensaje de error

Muchas veces, los mensajes de error por defecto que nos dan Contact Form 7 no son tan descriptivos como sería conveniente. Este es un punto que muchos desarrolladores y diseñadores olvidan, y que es esencial para hacer la web más accesible. Si seguimos con el ejemplo del mensaje de error que aparece al introducir de forma incorrecta un correo electrónico, vemos que es Por favor, introduce una dirección de correo electrónico. ¿Cómo podríamos mejorarlo?.

En este caso, puede ser tan sencillo como dar información extra de como se estructura un email. Por ejemplo, nuestro mensaje de error podría ser Por favor, la dirección de correo electrónico introducida no es válida. Esta dirección de correcto tiene que tener un formato [email protected]. No solo estamos avisando al usuario del error, sino que estamos dando información básica sobre como rellenar ese campo concreto. Es muy importante salir de nuestra zona de conocimiento y ponerse en lugar de una persona que quizás nunca haya rellenado un formulario de contacto, o que no suela dar su correo electrónico habitualmente.

comparativa mensaje error formulario info extra

A partir de aquí, podemos mejorar el resto de mensajes de error. En el campo de nombre, decir que no se pueden usar número y símbolos. O en el de teléfono, indicar cuantas cifras se requieren. Aunque pueda parecer que esto es un trabajo extra para nosotros e inútil, puede ser la diferencia entre que alguien rellene un formulario de forma correcta, o que se frustre y se vaya de nuestra web.

Creando nuevos mensajes de error con el plugin Custom Validation Message

Ya hemos visto que Contact Form 7 nos da opciones para los mensajes de error en el caso de que se rellene un campo de forma incorrecta. Pero en el caso de que falte algún campo por rellenar, el mensaje va a ser el mismo, sea el campo nombre, teléfono o email.

mensajes de error predeterminado con campo vacio en contact form 7
Estos son los mensajes de error que nos dará Contact Form 7 si dejamos un campo vacío en el formulario

Para esto, vamos a utilizar el plugin Custom Validation Message, que nos va a permitir una personalización mucho más profunda. Una vez lo tengamos instalado y activado, veremos que en el editor de formularios tendremos una nueva pestaña llamada Mensaje de validación personalizados. Aquí nos podemos añadir mensajes personalizados de tantos campos como tengamos en nuestro formulario. Si añadimos algún mensaje a posteriori, solo tendremos que guardar el formulario y las opciones de esta pestaña se actualizarán.

ventana de mensjaes de validacion de formulario de contacto con el plugin para wordpress custom validation messages

Por supuesto, no olvidar de activarlo para que los mensajes no aparezcan en el formulario.

mensaje error personalizado al tener un campo vacio en el formulario
Mensajes de error personalizados al tener un campo vacío en el formulario gracias al plugin Custom Validation Message

Dando estilo a los mensajes de error con CSS

Ya sabemos como hacer mensajes de error personalizados en nuestro formulario. Eso sí, siempre podemos hacerle un poco más fácil la vida a nuestros visitantes. Y es que a veces, no siempre es tan obvio saber cual es el campo donde aparece el error. Pero vamos a solucionarlo gracias a CSS. Eso sí, recomendamos tener al menos un conocimiento básico sobre CSS para saber que es lo que estamos haciendo.

Vamos a crear un nuevo diseño en el que, no solo vamos a remarcar aun más el mensaje de error con un fondo distinto, sino que además vamos a cambiar el borde del campo para que el usuario sepa exactamente donde falta información o esta es errónea. Nos quedaría algo así:

mensajes de error en formularios con estilos css aplicado

Lo primero es encontrar las dos clases HTML que vamos necesitar. Una es para dar estilo al campo en sí, y la otra para dar estilo al mensaje de error. Con el inspector del navegador web es una tarea sencilla, pero vamos a ahorraros ese trámite. En el caso del campo, su clase HTML es wpcf7-not-valid. Y para el mensaje de error wpcf7-not-valid-tip. Sabiendo esto, demos estilo con CSS. Este sería el código CSS para el diseño de mi formulario:

/* Estilo del campo del formulario */
.wpcf7-not-valid {
    border: 2px solid red;
    background-color: #ffeded;
}

/* Estilo del mensaje de error del formulario */
.wpcf7-not-valid-tip {
    font-size: 0.8rem;
    font-weight: 700;
    background-color: #ffc4c4;
    padding: 10px 20px;
}

Podéis modificar todo lo que queráis: el color del borde del campo, su grosor, el color del fondo, el tamaño, color y tipografía del mensaje de error. Todo depende del diseño que queráis aplicar, o de como queráis que sean de visibles los mensajes de error para que la persona que este rellenándolo siempre sea capaz de localizar y subsanar los errores.

Conclusiones

Aunque en un principio nos pueda resultar un asunto secundario, los mensajes de error en un formulario de contacto so una parte esencial de este. No solo permiten al usuario saber que hay algún tipo de problema, sino que sea capaz por sus propios medios de localizar donde está dicho problema y que tenga la información suficiente para subsanarlo.

Y todo esto es esencial para crear una web más accesible para todos, estén más o menos habituados a ciertas rutinas que, por el tiempo que pasamos navegando por diferentes web, a nosotros nos puedan parecer evidentes. Porque si somos capaces de eliminar esas barreras y hacer que algo que, a nosotros nos resulta tan trivial como rellenar un formulario de contacto, no sea un impedimento para cualquier persona, es cuando estaremos consiguiendo una web más plural y universal.

Con esto terminamos. Esperamos que os haya resultado un tema interesante y de utilidad. Y, como siempre, tenéis disponibles los comentarios para hacernos llegar vuestras dudas, sugerencias y experiencias sobre formularios de contacto.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *