Resumen de IA
¿Te gustaría añadir Material Design a tus campos de WPForms? Este tipo de diseño es una forma muy popular de añadir 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.
Creación de su formulario
Primero, necesitarás crear tu formulario y añadir los campos que desees. Si necesitas ayuda para crear tu formulario, por favor, consulta este tutorial.
Para el propósito del tutorial, solo estamos creando un formulario de comentarios simple. Nuestro ejemplo incluirá los campos de formulario Nombre, Email, Asunto y Párrafo de texto.
Es importante recordar que nuestro tutorial se centra en añadir este tipo de diseño solo a los campos que aceptan entrada de texto directa. Añadir 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 es exactamente el que buscas.
Material Design – Fragmento de PHP
A continuación, vamos a añadir un pequeño fragmento de PHP. Necesitamos hacer esto para mover la etiqueta del campo del formulario de antes del campo a después.
Para obtener ayuda sobre cómo añadir un fragmento de código a tu sitio, por favor, consulta este tutorial.
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 de PHP que establece que la etiqueta del campo se muestre antes del campo del formulario. La siguiente función forzará entonces a que la etiqueta aparezca después del campo del formulario.
Material Design – Fragmento de CSS
Tu último paso es añadir este CSS a tu sitio que añadirá el aspecto de diseño Material a todos nuestros campos de formulario.
Si necesitas ayuda para añadir CSS a tu sitio, por favor, consulta este tutorial.
¡Y eso es todo! Ahora has añadido el aspecto de Material Design a los campos de tu formulario. Si deseas probar otras soluciones de CSS, echa un vistazo a toda nuestra Documentación de Estilos.