Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Forms

Cómo personalizar Contact Form 7 para WordPress: etiquetas flotantes

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Es posible que hayas visto formularios en los que el texto marcador de posición es animado cuando comienzas a escribir en ese campo de entrada. Este patrón no es nuevo, pero sigue siendo una tendencia popular en el diseño de formularios enfocado a la experiencia de usuario.

Hoy aprenderemos los pasos necesarios para añadir este comportamiento en un formulario creado con Contact Form 7 (CF7), uno de los complementos más populares para formularios de contacto de WordPress disponible.

Lo que vamos a construir

Aquí puedes ver una demostración rápida en video del formulario de WordPress en acción:

Nota: este tutorial asume que estás en cierto modo familiarizado con WordPress y Contact Form 7.

Complementos para Contact Form 7 en CodeCanyon

¿Estás interesado en extender tu Contact Form 7 de forma rápida y sencilla? CodeCanyon alberga una gran cantidad de scripts y complementos para llevar tus formularios CF7 al siguiente nivel. Por ejemplo, Multi Step for Contact Form 7 Pro (Múltiples pasos para Contact Form 7 Pro) es una excelente forma de mejorar la experiencia de usuario de tus formularios largos:

Multi step contact form 7

Dicho eso, suponiendo que ya has instalado Contact Form 7 en un proyecto de WordPress, regresemos al tutorial y discutamos los pasos necesarios para animar las etiquetas de nuestro formulario CF7.

1. Elimina las etiquetas innecesarias

El primer paso es eliminar las etiquetas adicionales que Contact Form 7 agrega al formulario.

The extra tags that Contact Form 7 throws in the form

Para hacer esto, vamos a establecer el valor de la constante WPCF7_AUTOP en false en el archivo wp-config.php, de esta forma:

Change the value of the WPCF7_AUTOP to false

2. Crea el formulario de contacto

El segundo paso es crear el formulario desde el panel de control de WordPress.

Contact Form 7 Shortcode

Usaremos una combinación de códigos cortos de Contact Form 7 junto con un poco de HTML personalizado.

El formulario estará compuesto por dos elementos input, un elemento textarea y un botón de envío. Además, asociaremos cada uno de los elementos input y textarea con un elemento label. Cada elemento label se comportará como un marcador de posición.

Este es el código que tenemos que agregar al editor de Contact Form 7:

3. Agrega los estilos de formulario CSS

Para continuar, pondremos en cola un nuevo archivo CSS en el archivo functions.php de nuestro proyecto, de esta forma (aunque tu carpeta destino puede diferir):

En su interior, colocaremos un grupo de estilos:

  • Comenzaremos con algunos de restablecimiento (genéricos). Solo para hacer que el formulario se vea un poco más atractivo, usaremos una fuente de Google personalizada. Asegúrate de poner esta fuente en cola si quieres usarla en tu proyecto.
  • A continuación, definiremos los estilos principales para nuestro formulario. Como veremos más adelante, el formulario recibirá la clase form-with-animated-labels. Esto nos ayudará a aislarla y evitar conflictos con otros estilos.
  • Finalmente, personalizaremos un poco la apariencia de algunos de los mensajes de respuesta de CF7.

Lo más importante es que eches un vistazo a la manera en la que estilizamos las etiquetas. Estos son elementos con una posición absoluta y centrados verticalmente en el interior de su padre .form-wrapper. Como veremos en un momento, cuando su elemento relacionado del formulario recibe el foco, estos se moverán encima de él a través de la clase focused.

Aquí están todos los estilos requeridos:

Nota: para este ejemplo estoy usando un tema básico. Sin embargo, dependiendo de tu tema algunos de estos estilos podrían ser anulados. Teniendo en cuenta ese hecho, si el formulario no se ve como era de esperarse en tu proyecto, asegúrate de revisar los estilos de tu tema y hacer los cambios necesarios.

Consejo: puedes usar etiquetas condicionales para cargar este archivo CSS solamente en las páginas que incluyan al formulario.

Por qué un enfoque que usa CSS solamente no funcionará

Antes de continuar, permíteme aclarar una cosa.

Probablemente has visto muchas implementaciones que usan solamente CSS para crear etiquetas flotantes en la web. Estos aprovechan principalmente la "técnica del truco con el checkbox en CSS". Ciertamente es una técnica muy útil que hemos discutido muchas veces en el pasado.

Desafortunadamente, en este caso no podemos usarla. Si inspeccionas el marcado generado por los códigos cortos de Contact Form 7, notarás que todos los controles del formulario están envueltos por un elemento span.

Wrapper around a form control in Contact Form 7

Como resultado, los controles y sus etiquetas asociadas no son hermanos, y un estilo como este no tendrá ningún efecto:

4. Agrega el código JavaScript

Como siguiente paso, pondremos en cola un nuevo archivo JavaScript en el archivo functions.php de nuestro proyecto, de esta forma (aunque tu carpeta destino puede diferir):

En su interior, llevaremos a cabo las siguientes acciones:

  1. Vamos a recorrer con un bucle todos los formularios .form-with-animated-labels.
  2. Para cada formulario, tomaremos sus controles destino (inputs, textarea). En tu caso, estos podrían ser diferentes.
  3. Después, para cada control, escucharemos los eventos focus y blur. Estos eventos serán los responsables de animar las etiquetas cambiando la clase focused que definimos anteriormente.
  4. Por último, usaremos uno de los eventos AJAX de CF7 para colocar de nuevo las etiquetas en sus posiciones iniciales. Siéntete libre de usar cualquier de esos eventos según tus necesidades.

Aquí puedes ver el código JavaScript correspondiente:

Consejo: puedes usar etiquetas condicionales para cargar este archivo de JavaScript solamente en las páginas que incluyan al formulario.

5. Llama al formulario de contacto

Por último, pero no por eso menos importante, vamos a incluir el código corto generado por Contact Form 7 en la parte que deseemos en nuestro proyecto:

Observa la clase añadida a través del atributo html_class. Esta es nuestra conocida clase form-with-animated-labels.

Conclusión

¡Y hemos terminado, amigos! En este breve tutorial, discutimos un método sencillo para personalizar la apariencia de un formulario de Contact Form 7 agregando etiquetas flotantes. Estoy seguro de que también habrán otras soluciones eficaces, ¡pero esta parece hacer su trabajo! Con suerte la probarás en alguno de tus próximos proyectos de WordPress.

¿Alguna vez has creado un efecto así con Contact Form 7? ¿Has logrado encontrar una solución basada solamente en CSS? Comparte tus pensamientos en los comentarios a continuación.

Como siempre, ¡muchas gracias por leer!

Más personalización para Contact Form 7 y etiquetas flotantes

Si sientes la curiosidad de aprender cómo crear un formulario SVG responsivo hecho a mano con Contact Form 7, o si te gustaría profundizar en el tema de las etiquetas flotantes, echa un vistazo a estos tutoriales:

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.