### [Cómo agregar Material Design a los campos de tu formulario usando CSS](https://wpforms.com/developers/how-to-add-material-design-to-your-form-fields-using-css/) **Publicado:** 26 de agosto de 2020 **Autor:** Umair Majeed **Extracto:** Este tutorial te mostrará cómo usar PHP y CSS para agregar Material Design a los campos de tu formulario. **Contenido:** ¿Te gustaría agregar Material Design a tus campos de WPForms? Este tipo de diseño es una forma muy popular de agregar un aspecto moderno y limpio a los campos de tu formulario. Usando un pequeño fragmento de PHP junto con CSS, puedes aplicar fácilmente este aspecto a tus WPForms. En este tutorial, te guiaremos paso a paso sobre cómo lograr esto. Para obtener más información sobre los principios de Material Design, puedes consultar la [documentación de Material Design de Google](https://m3.material.io/). ## Creando tu formulario Primero, necesitarás crear tu formulario y agregar los campos que deseas. Si necesitas ayuda para crear tu formulario, [por favor revisa este tutorial](https://wpforms.com/docs/creating-first-form/ "Cómo crear tu primer formulario"). Para el propósito del tutorial, solo estamos creando un formulario de comentarios simple. Nuestro ejemplo incluirá los campos de formulario **Nombre**, **Correo electrónico**, **Asunto** y **Texto de párrafo**. Es importante recordar que nuestro tutorial se enfoca en agregar este tipo de diseño **solo** a los campos que aceptan entrada de texto directa. Agregar este tipo de diseño a todos los campos del formulario puede no tener el efecto deseado que esperas, así que recuerda probar tu formulario primero para asegurarte de que el aspecto sea exactamente el que buscas. ## Material Design – Fragmento PHP A continuación, agregaremos un pequeño fragmento de PHP. Necesitamos hacer esto para mover la etiqueta del campo del formulario de antes del campo del formulario a después. Para obtener ayuda sobre cómo agregar un fragmento de código a tu sitio, [por favor revisa este tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Cómo agregar PHP o JavaScript personalizado para WPForms"). Este fragmento solo se ejecutará en el ID de formulario **697**. Si el ID del formulario coincide, nuestra primera función **wpf\_dev\_display\_field\_before** eliminará la acción PHP que establece que la etiqueta del campo se muestre **antes** del campo del formulario. La siguiente función forzará entonces que la etiqueta aparezca **después** del campo del formulario. ## Material Design – Fragmento CSS Tu último paso es agregar este CSS a tu sitio que agregará el aspecto de diseño Material a todos nuestros campos de formulario. Reemplaza **697** en todos los selectores con el ID de tu formulario. Si necesitas ayuda para agregar CSS a tu sitio, [por favor revisa este tutorial.](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Cómo agregar estilos CSS personalizados para WPForms") ¡Y eso es todo! ¡Ahora has agregado el aspecto de Material Design a los campos de tu formulario! Si deseas probar otras soluciones CSS, consulta toda nuestra [Documentación de Estilos](https://wpforms.com/categories/docs/styling/ "Documentación de Estilos de WPForms"). ## Acciones de Referencia - [wpforms\_display\_field\_after](https://wpforms.com/developers/wpforms_display_field_after/ "Usando la acción wpforms_display_field_after") - [wpforms\_display\_field\_before](https://wpforms.com/developers/wpforms_display_field_before/ "Usando la acción wpforms_display_field_before") **Categorías:** Tutoriales **Etiquetas:** CSS, PHP ---