Seleccionar página

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.

Contact Form 7 Ejemplo

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

Contact Form 7 Plugin

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.

Contact Form 7 Contador Caracteres

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.

Contact Form 7 Placeholder

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.

Conditional Fields For Contact Form 7Yo quería habilitar una caja de texto cuando el usuario selecciona la opción otros.

Logica Condicional Campo Otro

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

Logica Condicional Grupo

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.

Logica Condicional Regla

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

Contact Form 7 Multi Step Forms

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.

¿Quieres ver el resultado final? puedes seguir este enlace Presupuesto Web WordPress.

 

¡Hasta Pronto!

 

Lux Your business &

Love Your Website!