### [Creación de un formulario con etiquetas flotantes](https://wpforms.com/developers/how-to-create-a-form-with-floating-labels/)

**Publicado:** 31 de agosto de 2020
**Autor:** Umair Majeed

**Resumen:** Este tutorial te guiará a través de los pasos para utilizar PHP y CSS con el fin de personalizar tu formulario y utilizar etiquetas flotantes para los campos del mismo. 

**Contenido:**

¿Te gustaría dar a tus formularios un aspecto moderno e interactivo con etiquetas flotantes? Las etiquetas flotantes ofrecen una forma elegante de mostrar etiquetas de campo que se animan cuando los usuarios interactúan con los campos de tu formulario.

Esta guía te mostrará cómo implementar esta función utilizando WPForms.

Si necesitas inspiración para el diseño de etiquetas flotantes, puedes consultar la [documentación de Material Design](https://material.io/develop/web/supporting/floating-label) sobre campos de texto.

## Creación de tu formulario

Comenzaremos creando un sencillo formulario de contacto. Si necesitas ayuda para crear un formulario, [consulta esta documentación](https://wpforms.com/docs/creating-first-form/ «Crear tu primer formulario»).

Si hay un campo **Teléfono** en el formulario, deberás establecer el formato en **EE. UU.** o **Internacional**. Este fragmento de código no funcionará con el formato **Inteligente**.

También tendrás que añadir un texto **de marcador de posición** a cada campo. Para ello, selecciona el campo y haz clic en la pestaña **Avanzado**.

Si necesitas ayuda para hacerlo, consulta nuestra guía sobre [cómo añadir texto de marcador de posición a un campo](https://wpforms.com/docs/how-to-add-placeholder-text-to-a-form-field/).

![Recuerda añadir texto de marcador de posición a cada campo](https://wpforms.com/wp-content/uploads/2022/08/wpforms-float-labels-add-placeholder.jpg)## Añadir clases CSS

A continuación, vamos a añadir una clase CSS de `floating` a los campos en los que queremos que las etiquetas floten.

Selecciona cada campo uno por uno, haz clic en la pestaña **Avanzado** y añade `floating` en el campo **Clases CSS**.

Si utilizas más de una clase CSS para un campo, asegúrate de dejar un espacio entre cada nombre de clase.

![Dentro del generador de formularios, en Opciones de campo, añade el nombre de la clase «floating» a las Clases CSS](https://wpforms.com/wp-content/uploads/2022/08/wpforms-floating-add-css-class.jpg)## Etiquetas flotantes – Fragmento de PHP

Vamos a añadir un par de pequeños fragmentos de código PHP que harán que la etiqueta pase de estar encima de los campos del formulario a estar justo debajo de ellos.

Sustituya **1289** en la **línea 10** y en la **línea 28** por el ID de su formulario.

Si necesitas ayuda sobre cómo y dónde añadir fragmentos de código a tu sitio web, [consulta este tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ «Cómo añadir PHP o JavaScript personalizados para WPForms»).

Lo que hace este fragmento de código es eliminar la posición de la etiqueta del campo para que no se muestre **antes** del campo y colocarla **después** del campo.

## Etiquetas flotantes – Fragmento de código CSS

Ahora que nuestro formulario está creado y nuestros fragmentos de código están en su sitio, necesitamos añadir el CSS personalizado a nuestro sitio para que todo quede bien integrado.

Si necesitas ayuda sobre cómo y dónde añadir CSS personalizado, [consulta este tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ «Cómo añadir estilos CSS personalizados para WPForms»).

Sustituye **1682** en la **línea 1** y la **línea 4** por el ID de tu formulario.

![Ha añadido correctamente etiquetas flotantes a su WPForms](https://wpforms.com/wp-content/uploads/2022/08/wpforms-create-floating-label.jpg)## Preguntas frecuentes

#### P: ¿Seguirá mostrándose la validación de los campos?

**R:** ¡Por supuesto! Los errores de validación mantendrán el mismo estilo.

![Etiquetas flotantes con error de validación de campo](https://wpforms.com/wp-content/uploads/2022/08/wpforms-floating-labels-validation-error.jpg)#### P: ¿Por qué no me funciona?

**R:** Asegúrate de volver a seguir los pasos anteriores; si no has colocado el texto **Placeholder** en los campos, las etiquetas no parecerán tener el efecto flotante cuando un usuario haga clic dentro del campo.

¡Y eso es todo! Ya has creado un formulario con etiquetas flotantes que aparecen cuando el usuario empieza a escribir en el campo. A continuación, ¿te gustaría cambiar el color del mensaje de confirmación o simplemente eliminarlo por completo? Echa un vistazo a nuestro artículo sobre [Cómo eliminar el estilo del cuadro de mensaje de confirmación](https://wpforms.com/developers/how-to-remove-confirmation-message-box-styling/ "Cómo eliminar el estilo del cuadro de mensaje de confirmación").

## Acciones de referencia

- [wpforms\_display\_field\_after](https://wpforms.com/developers/wpforms_display_field_after/ "Uso de la acción wpforms_display_field_after")
- [wpforms\_display\_field\_before](https://wpforms.com/developers/wpforms_display_field_before/ «Uso de la acción wpforms_display_field_before»)

**Categorías:** Tutoriales

**Etiquetas:** CSS, PHP

---