Mucho más que un formulario de contacto

Seguro que te suena el plugin Contact Form 7, con tres millones de descargas activas, es uno de los imprescindibles del repositorio de plugins.

Lo normal es utilizarlo para añadir un formulario de contacto a nuestra página WordPress.

¿Pero sabías que se pueden hacer cosas más complicadas?

Por ejemplo, yo quería tener un formulario para los clientes puedan enviar la información de su proyecto de página web.

Había probado varias opciones, y por fin di con la receta para tener lo que quería utilizando como base este plugin.

Vamos a ver los ingredientes poco a poco.

Plugin Contact Form 7

Necesitamos tener el plugin instalado y activo, puedes encontrar el plugin aquí.

La documentación oficial del plugin está bastante bien y al día, pero además tienes miles de tutoriales con personalizaciones interesantes.

Contador de palabras en los campos de texto

Estamos acostumbrados a ver un contador de palabras cuando utilizamos otras aplicaciones.

Me parece buena idea añadir un contador para que resulte familiar a los usuarios.

Además puedes limitar el número de caracteres a introducir en un campo y mostrar un contador que va descontando, como una cuenta atrás.

Un ejemplo de contador puede ser así:

[textarea* tu-mensaje maxlength:140]
[count tu-mensaje]

Recuerda hacer referencia al campo de texto que quieres mostrar la cuenta de caracteres.

Placeholder

Una opción muy interesante para dar pistas al usuario sobre lo que debe contener el campo.

Añade el atributo placeholder y a continuación el contenido entre comillas como puedes ver.

[text tu-nombre placeholder "Tu nombre va aquí"]

Es muy sencillo y el resultado muy vistoso.

Lógica condicional

En un formulario complejo, es normal activar o desactivar opciones en función de lo que hemos rellenado en un campo.

Y esto se consigue añadiendo lógica condicional. En este caso utilizando un plugin para lógica condicional para el plugin contact form 7.

Yo quería habilitar una caja de texto cuando el usuario selecciona la opción otros.

Lo primero es añadir una etiqueta para crear un grupo condicional en el formulario.

Dentro de este grupo pondremos las etiquetas de los campos que queremos que aparezcan o desaparezcan en función de lo que elegimos entre otro campo.

Esto se consigue añadiendo la regla correspondiente en la pestaña de campos condicionales.

Y ya lo tenemos, sólo queda probar que funciona y ajustar si es necesario.

Por último, muy interesante la opción de importar y exportar las reglas del formulario condicional, esto te permite reutilizar las reglas en otros formularios, o hacer pruebas en local antes de subir a producción.

Formulario en varios pasos

Un formulario para recopilar la información inicial del proyecto en una única página queda un poco largo y difícil de utilizar para el usuario.

Y por eso.

Necesitas crear tantos formularios y páginas como pasos quieres que tenga tu formulario.

Añadir y rellenar una etiqueta especial para indicar que se trata de un formulario en varios pasos.

Tienes que indicar cuántos pasos tiene el formulario, en que paso nos encontramos, y la url de la página que contiene el siguiente paso.

[multistep "1-3-https://tupaginaweb.es/paso-2/"]

Tienes la posibilidad de añadir una etiqueta para volver atrás si quieres cambiar algo.

[previous  "Volver"]

El plugin funciona mejor si tienes tres pasos como máximo.

Hay otras opciones

Gravity forms y Caldera forms son muy buenas opciones para crear formularios complejos.

Es cuestión de probar y ver con cuál te gusta más.

Conclusiones

Rellenar un formulario online puede ser un suplicio para nuestros usuarios y por eso merece la pena

El plugin contact form 7 encierra muchas posibilidades si le dedicas un poco de trabajo.

¿Cómo Complementar el Plugin Contact Form 7 con un Diseño Web WordPress Profesional?

Contar con un Diseño Web WordPress Profesional es clave para sacar el máximo partido al plugin Contact Form 7.

Este plugin te permite crear formularios funcionales y personalizables, pero su integración en un sitio con un diseño coherente y optimizado puede marcar la diferencia en la experiencia del usuario.

Desde la personalización visual de los formularios hasta su adaptación a dispositivos móviles, un diseño profesional asegura que cada elemento de tu sitio web contribuya a captar la atención de tus visitantes y a convertirlos en clientes.

Si estás buscando potenciar la apariencia y funcionalidad de tu web, integrar Contact Form 7 con un diseño bien estructurado puede ser el primer paso hacia una presencia online más efectiva.