¿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.
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.
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.
Si necesitas ayuda para añadir CSS a tu sitio, consulta este tutorial.
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.