Cómo añadir Material Design a los campos de formulario mediante CSS

¿Le gustaría añadir Material Design a sus campos WPForms? Este tipo de diseño es una forma muy popular de añadir un aspecto moderno y limpio a sus campos de formulario. Usando un pequeño fragmento de PHP junto con CSS puede aplicar fácilmente este aspecto a sus WPForms.

En este tutorial te explicaremos paso a paso cómo conseguirlo.

Para obtener más información sobre los principios de Material Design, puedes consultar la documentación de Material Design de Google.

Creación del formulario

En primer lugar, tendrá que crear su formulario y añadir los campos que desee. Si necesitas ayuda para crear tu formulario, revisa este tutorial.

Para el propósito del tutorial, vamos a crear un simple formulario de comentarios. Nuestro ejemplo incluirá los campos de formulario Nombre, Correo electrónico, Asunto y Texto de párrafo.

cree su formulario y añada sus campos

Es importante recordar que nuestro tutorial se centra en añadir este tipo de diseño sólo a los campos que aceptan la introducción directa de texto. Añadir este tipo de diseño a todos los campos de formulario puede no tener el efecto deseado, así que recuerda probar primero tu formulario para asegurarte de que el aspecto es exactamente el que buscas.

Material Design - Fragmento PHP

A continuación, vamos a añadir un pequeño fragmento de PHP. Necesitamos hacer esto para mover la etiqueta del campo de formulario de antes del campo de formulario a después.

Para obtener ayuda sobre cómo añadir un fragmento de código a su sitio, consulte este tutorial.

Este fragmento sólo se ejecutará en el formulario ID 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 de campo se muestre antes del campo de formulario. La siguiente función forzará a la etiqueta a aparecer después del campo de formulario.

Material Design - Fragmento CSS

Tu último paso es añadir este CSS a tu sitio que añadirá el aspecto Material design a todos nuestros campos de formulario.

Sustituya 697 en todos los selectores por el ID de su formulario.

Si necesitas ayuda para añadir CSS a tu sitio, consulta este tutorial.

ha añadido material design a su formulario

Y ya está. Ya has añadido el aspecto Material Design a tus campos de formulario. Si quieres probar otras soluciones CSS, echa un vistazo a toda nuestra documentación sobre estilos.

Acciones de referencia