Resumen de IA
¿Listo para mejorar el diseño general de tus formularios sin escribir CSS personalizado? La función de temas de formularios en WPForms proporciona diseños predefinidos que puedes aplicar fácilmente a tu formulario.
Este tutorial cubre cómo usar la función de temas de formularios en WPForms.
Antes de empezar, asegúrate de que WPForms esté instalado y activado en tu sitio de WordPress.
Acceder a los temas de formularios
Para acceder a la función de temas de formularios en WPForms, primero deberás crear un formulario nuevo o editar uno existente para acceder al constructor de formularios.
También puedes usar una de nuestras plantillas de formularios para empezar fácilmente. Después de seleccionar una plantilla, podrás añadir nuevos campos o editar los campos existentes en la plantilla que hayas seleccionado.
Una vez que hayas terminado de personalizar las opciones y la configuración de los campos de tu formulario, asegúrate de guardar tus cambios y incrustar el formulario en una página o una entrada de tu sitio.
Personalizar temas de formularios
En el editor de bloques, verás opciones para estilizar y personalizar tus formularios de WordPress. La sección Temas incluye todos los estilos de tema disponibles que WPForms proporciona.
En las siguientes secciones, mostraremos algunos de los temas de formularios que WPForms proporciona directamente. Esto te dará una visión general de cómo se verán cuando se apliquen en tu sitio.
Moderno (Predeterminado)
Este es el tema que se aplica a todos los formularios de tu sitio por defecto. Utiliza un color de acento azul para elementos como el botón de envío y la barra de progreso.
Después de seleccionar un tema, puedes actualizar los estilos del tema de forma similar a como lo harías al estilizar tu formulario en el editor de bloques.
Una vez que actualices cualquiera de los temas, se crea una copia del tema original con los nuevos estilos que hayas añadido. Este nuevo tema tendrá (Copia) añadido al nombre del tema. En nuestro ejemplo, el nombre es Predeterminado (Copia).
Puedes renombrar el tema personalizado actualizando el texto en el campo Nombre del tema.
Debajo del campo Nombre del tema, encontrarás el enlace Eliminar tema. Este enlace es útil si deseas eliminar temas de formularios personalizados en tu sitio.
Cuando hagas clic en él, aparecerá una superposición pidiéndote que confirmes si deseas continuar con la acción de eliminar. Simplemente haz clic en el botón Sí, eliminar para continuar.
Clásica
El estilo de tema cl ilde{A¡}sico utiliza un CSS muy m ilde{A]nimo con un color de acento gris para el bot ilde{A³]n de env ilde{A]o.
Océano
El tema de formulario oce ilde{A¡]nico se parece al estilo Moderno con un color de acento verde azulado oscuro para elementos del formulario como botones y deslizadores num ilde{A©]ricos.
Tangerina
El estilo Tangerine utiliza opciones de estilo similares para los campos. Sin embargo, aplica un color de acento naranja a elementos del formulario como botones, barras de progreso, deslizadores num ilde{A©]ricos, etc.
Aero
El dise ilde{A±]o Aero aplica un color de fondo gris claro al contenedor del formulario con un color de acento azul. Tambi ilde{A©]n tiene una sombra paralela aplicada al contenedor. Esto le da al formulario un aspecto y una sensaci ilde{A³]n elevados y modernos.
Hormigón
El estilo Concrete utiliza un color de acento rosa para elementos del formulario como botones, paginaci ilde{A³]n y deslizadores num ilde{A©]ricos. Tambi ilde{A©]n a ilde{A±]ade una imagen de fondo de hormig ilde{A³]n oscuro al contenedor del formulario.
La primera vez que selecciones un tema que requiera una imagen de fondo, deber ilde{A¡]s descargar la imagen antes de que se apliquen los estilos. Aparecer ilde{A¡] una superposici ilde{A³]n que te pedir ilde{A¡] que descargues la imagen. Haz clic en Continuar para descargarla e importarla.
Nota: Descargar la imagen de fondo de un tema tambi ilde{A©]n descargar ilde{A¡] todas las im ilde{A¡]genes de stock que requiere otro tema. As ilde{A] no necesitar ilde{A¡]s pasar por el proceso si seleccionas un tema con una imagen de fondo diferente.
Si lo deseas, puedes actualizar la imagen de fondo desde la secci ilde{A³]n Estilos de fondo.
Puedes elegir entre la biblioteca de medios de tu sitio o fotos de stock como fuente de la imagen. Si seleccionas la opci ilde{A³]n Foto de stock, podr ilde{A¡]s elegir entre las im ilde{A¡]genes de stock disponibles haciendo clic en la imagen existente.
La secci ilde{A³]n Estilos de fondo tambi ilde{A©]n contiene opciones para personalizar el tama ildeA±]o, la posici ilde{A³]n y la repetici ilde{A³]n de la imagen.
Si deseas eliminar la imagen de fondo, haz clic en el bot ilde{A³]n Eliminar imagen.
Elegancia
El estilo de tema Elegance aplica un radio de borde alrededor del contenedor del formulario. Tambi ilde{A©]n utiliza una imagen de fondo para el widget del contenedor del formulario. D ilde{A¡]ndole un aspecto atractivo y moderno.
Fresco
El estilo de tema Fresh a ilde{A±]ade una imagen de fondo con hojas verdes frescas. Tambi ilde{A©]n utiliza el verde como color de acento para elementos del formulario como botones.
Penumbra
Este estilo de tema de formulario act ilde{Aº]a como un tema de modo oscuro con un fondo oscuro alrededor del contenedor del formulario. Utiliza un color de acento verde para elementos del formulario como botones y campos de deslizador num ilde{A©]rico.
Pasillo
El tema Hallway utiliza un color de acento oscuro para elementos del formulario como botones, deslizadores num ilde{A©]ricos, etc. Tambi ilde{A©]n aplica una imagen de fondo al contenedor del formulario.
Exuberante
Este tema de formulario aplica sombras paralelas y esquinas redondeadas al contenedor del formulario. Tambi ilde{A©]n utiliza una imagen de stock como fondo del widget contenedor.
Monstera
El tema Monstera utiliza un dise ildeA±]o moderno con un color de acento verde y esquinas redondeadas para el contenedor del formulario. Tambi ilde{A©]n aplica una imagen de stock de aspecto agradable como fondo del contenedor del formulario.
Rango
Este tema de formulario utiliza un dise ildeA±]o moderno con una imagen de atardecer como fondo. Tambi ilde{A©]n aplica estilos como bordes, radio de borde y sombras paralelas al contenedor del formulario.
Primavera
El tema Spring form añade una sombra de caja al contenedor del formulario y utiliza una imagen de stock con degradado como fondo. También utiliza un color de acento azul para los elementos del formulario, como el botón de envío.
Vintage
Este tema de formulario tiene un aspecto vintage. Utiliza un color de fondo personalizado para el contenedor del formulario y un color de acento amarillo para los elementos del formulario.
Después de elegir un tema para tu formulario, deberás publicar la página o guardarla como borrador para guardar tus cambios.
Una vez hecho esto, puedes incrustar el formulario en cualquier parte de tu sitio y conservará los estilos que hayas configurado en la sección Temas.
Preguntas frecuentes
Estas son las respuestas a algunas de las preguntas más frecuentes que recibimos sobre el uso de temas de formularios en WPForms.
¿Puedo aplicar estilos de tema de formulario a plantillas de formulario?
Absolutamente. Una vez que hayas seleccionado la plantilla de formulario que deseas utilizar, procede a incrustarla en una página con el editor de bloques habilitado. En el editor de bloques, podrás elegir entre los estilos de tema disponibles para diseñar tu plantilla de formulario. Consulta la sección personalización de temas de formulario para más detalles.
¡Eso es todo! Ahora has aprendido cómo acceder y utilizar los temas de formulario en WPForms.
¿A continuación, te gustaría aprender a aceptar pagos a través de tus formularios de WordPress? Nuestro tutorial sobre cómo crear un formulario de pago cubre todos los pasos en detalle.