Resumen de IA
¿Estás buscando cómo estilizar WPForms usando el editor de bloques para crear formularios visualmente atractivos y fáciles de usar en tu sitio de WordPress?
WPForms es un plugin intuitivo que simplifica la creación y gestión de formularios, al tiempo que ofrece amplias opciones de personalización. Al aprovechar el editor de bloques, puedes estilizar tus formularios sin esfuerzo para mejorar la experiencia de usuario.
Sigue este tutorial paso a paso para dominar el estilizado de WPForms usando el editor de bloques y mejorar la funcionalidad general de tu sitio.
Crea tu formulario de WordPress ahora
¿Por qué necesitas estilizar tus formularios?
Al estilizar tus formularios, puedes mejorar la estética de tu sitio web, asegurando que contribuya a una experiencia de usuario positiva. Aquí tienes otras razones clave por las que el estilo de los formularios es crucial para tu sitio web:
- Marca Consistente: Crear un formulario de marca que coincida con el diseño y la paleta de colores de tu sitio web garantiza una imagen de marca coherente.
- Mejor Experiencia de Usuario: Los formularios bien diseñados facilitan la navegación/envío de la información requerida por los usuarios, lo que conduce a tasas de finalización de formularios más altas.
- Diseño Adaptable: Un formulario bien estilizado se adapta sin esfuerzo a varios tamaños de pantalla y dispositivos, garantizando una experiencia de usuario fluida para todos los visitantes.
- Aumento de Conversiones: Un formulario visualmente atractivo puede captar la atención del usuario y motivarlo a completar la acción deseada, ya sea suscribirse a un boletín, realizar una compra o enviar una consulta.
- Accesibilidad Mejorada: Estilizar tus formularios con etiquetas claras, espaciado adecuado y colores contrastantes puede mejorar la accesibilidad para usuarios con discapacidad visual, asegurando que tu sitio web atienda a una audiencia más amplia.
Ahora que entiendes la importancia de estilizar tus WPForms, es hora de sumergirse en el proceso paso a paso para estilizar eficazmente tus formularios utilizando el editor de bloques y sacar el máximo provecho del plugin WPForms.
Cómo estilizar WPForms usando el editor de bloques
Sigue estos pasos para aprender a estilizar tus WPForms utilizando el editor de bloques de Gutenberg sin necesidad de escribir ningún CSS personalizado.
Paso 1: Instalar y activar WPForms
WPForms simplifica el proceso de creación y gestión de formularios en tu sitio web. El plugin crea sin esfuerzo varios formularios, incluyendo formularios de contacto, encuestas, sondeos y formularios de registro, sin necesidad de conocimientos de codificación, y te ofrece más de 2100 plantillas listas para empezar.
Lo que más me gusta de estilizar WPForms es que cada control se encuentra en la barra lateral del bloque, justo al lado del formulario que estás editando. Cambia el radio del borde o el color de un botón y el formulario se actualiza mientras miras, por lo que nunca te quedarás atrapado en un bucle de guardar, actualizar y comprobar.
Tampoco necesitas una licencia de pago para nada de esto. El estilo del formulario y la biblioteca completa de más de 40 temas están disponibles en WPForms Lite, la versión gratuita, por lo que cada paso de esta guía funciona igual, ya sea que uses Lite o Pro.
Para empezar con WPForms, debes instalar el plugin en tu sitio de WordPress. Una vez que lo hayas activado, sigue los sencillos pasos a continuación para crear y personalizar el estilo de tu formulario.
Paso 2: Crear un formulario o usar una plantilla
¡Empecemos a crear tu formulario! Desde tu panel de WordPress, navega a WPForms y haz clic en el botón Añadir Nuevo.
Cuando se te solicite, dale a tu formulario un nombre que refleje su propósito. Luego, tienes la opción de elegir una plantilla preexistente o Crear Formulario en Blanco.
A continuación, WPForms abrirá su intuitiva interfaz de Creador de Formularios, donde puedes personalizar tu formulario añadiendo, editando, eliminando o reposicionando cualquier campo del formulario.
Después de configurar los campos del formulario, deberás configurar las Notificaciones por Correo Electrónico para que te avisen cuando alguien complete el formulario y pulse el botón de enviar.
También puedes configurar el Mensaje de Confirmación que ven los usuarios una vez enviado el formulario para mejorar la experiencia de usuario.
Antes de continuar con el siguiente paso, guarda la configuración de tu formulario para evitar perder tu progreso. Haz clic en el botón Guardar ubicado en la parte superior de la pantalla.
Paso 3: Habilitar marcado moderno
Para mejorar la accesibilidad y permitir la personalización visual de los formularios dentro del editor de bloques, WPForms ofrece Modern Markup.
Para habilitar el Marcado Moderno en WPForms, ve a WPForms » Ajustes y selecciona la pestaña General.
Desplázate hacia abajo hasta la sección General, donde dos ajustes trabajan juntos para activar el estilo del editor de bloques. Empieza con el ajuste Incluir estilo del formulario y configúralo en Estilo base y de tema del formulario.
Esta es la opción que carga el CSS del que dependen tus controles de estilo, y cuando se configura en algo más restrictivo, tus cambios o bien no aparecerán en el editor de bloques o bien no se aplicarán al front-end.
A continuación, habilita la opción Usar Marcado Moderno. Con esto habilitado, estás listo para estilizar tu formulario a través del editor de bloques. Guarda tus cambios antes de salir de la página.
WPForms versión 1.8.1 y posteriores habilitan modern markup por defecto para nuevos usuarios, y la opción para deshabilitarlo no está disponible.
Por lo tanto, si estás utilizando la última versión del plugin y no ves esta configuración, ya estás listo para empezar a estilizar tus formularios.
¡Comienza a personalizar tus formularios en el editor de bloques para aprovechar las características de modern markup, pero primero, incrustemos el formulario en tu sitio!
Paso 4: Incrustar el formulario en tu sitio
Para incrustar el formulario que creaste anteriormente, abre una página existente o crea una nueva. Busca el botón Añadir Bloque y busca el bloque WPForms.
Después de insertar el bloque WPForms en tu página o publicación, selecciona el formulario deseado del menú desplegable. ¡Ahora podemos empezar a estilizar tu formulario con el editor de bloques!
Paso 5: Editar estilos desde el editor de bloques
Abre la página o publicación que contiene tu WPForms en el editor de bloques. Haz clic en el bloque WPForms para abrir las opciones adicionales.
Descubrirás una variedad de opciones para estilizar temas, campos de formulario, etiquetas, botones y el contenedor y fondo en los que se asienta tu formulario, todo para que coincida con la estética de tu marca.
La sección Avanzado también te permite copiar la configuración de estilo entre formularios, lo que ahorra tiempo cuando varios formularios necesitan el mismo tratamiento.
Aprende a usar estas diversas opciones de estilo a continuación para personalizar la apariencia de tu formulario y que coincida con el diseño de tu sitio web en poco tiempo:
Temas
El panel Temas es la ruta más rápida para obtener un formulario rediseñado. WPForms viene con más de 40 temas de formulario prediseñados, y aplicar uno solo requiere un solo clic.
Cada tema tiene su propia combinación de colores, bordes, fondo y estilo de botón, por lo que elegir uno cambia el color de tus campos, etiquetas, botones, contenedor y fondo juntos.
Si prefieres explorar antes de comprometerte con uno, puedes ver todos los temas uno al lado del otro primero. Una vez que aplicas un tema y luego cambias cualquier ajuste individual, WPForms guarda tu versión como un nuevo tema personalizado y lo añade a tu lista de temas.
Use el campo Nombre del tema para cambiar el nombre de un tema personalizado y poder distinguirlo más tarde. Para eliminar uno que ya no desee, haga clic en el texto Eliminar tema junto al nombre del tema.
Estilos de campo
Abra las opciones de Estilos de campo en la configuración del bloque WPForms. Aquí encontrará controles para Tamaño, Borde, Grosor del borde, Radio del borde y Colores.
Tamaño
Para ajustar el tamaño de tus campos de formulario, selecciona el tamaño deseado en el ajuste Tamaño. Los tamaños disponibles incluyen Pequeño, Mediano y Grande.
Radio del Borde
Para ajustar el borde de tus campos de formulario, utiliza el ajuste Radio del Borde para establecer el valor de radio deseado. Tus formularios ahora pueden tener bordes agradables y redondeados gracias a esto.
Por defecto, la unidad para dimensionar los elementos del formulario en WPForms está configurada en píxeles (px). Haz clic en la Unidad de Medida para revelar un menú desplegable con diferentes opciones, como:
- Píxeles (PX)
- Porcentaje (%)
- Cuadrado de Em (EM)
- Roentgen equivalente hombre (REM)
- Ancho de ventana gráfica (VW)
- Alto de ventana gráfica (VH)
Colores
Para ajustar el color de fondo, borde y texto de tus campos de formulario, abre el ajuste Colores en la configuración del bloque WPForms.
Haz clic en la opción de color específica que deseas actualizar, como el color de fondo. Aparecerá una superposición que muestra los colores de tema disponibles para elegir.
A continuación, haz clic en la muestra de color para abrir el Selector de color, donde puedes ajustar aún más el color.
Se puede pegar un código de color hexadecimal en el cuadro Hex si ya tienes un color de marca en mente para tus formularios.
Estilos de etiqueta
Ahora puedes cambiar el tamaño y el color de la fuente de las etiquetas de tu formulario aquí en la sección Estilos de etiqueta. Los tamaños disponibles van desde Pequeño hasta Grande.
Para actualizar los colores de las etiquetas, subetiquetas y mensajes de error, navega a la sección Colores. A continuación, se describe el color de etiqueta disponible opciones.
- Etiqueta: Esta configuración determina el color de la etiqueta principal de tu campo.
- Subetiqueta y Pista: Esta configuración determina el matiz utilizado para las subetiquetas y pistas de campo cuando WPForms realiza sugerencias de valores en el frontend.
- Mensaje de error: El color del texto que aparece si un usuario comete un error al completar tu formulario.
Estilos de botón
Para cambiar el diseño de los botones de tu formulario en WPForms, navega a Estilos de botón. Haz clic en el menú desplegable debajo de Tamaño para abrirlo y selecciona el tamaño del botón.
Si deseas darle al botón un radio de borde, todo lo que necesitas hacer es introducir el valor deseado en el campo etiquetado como Radio de borde.
A continuación, en la sección etiquetada como Colores, encontrarás la oportunidad de modificar tanto el color de fondo como el color del texto de tu botón.
En la mayoría de los casos, el color de fondo del botón también servirá como su color de acento. Como resultado, el color de fondo del botón también se utilizará como el color principal para las casillas de verificación, los botones de radio, las barras de progreso y los campos.
Estilos de contenedor
Estilos del contenedor rige la caja en la que se encuentra su formulario en lugar de los campos dentro de ella. Aquí es donde le da a un formulario algo de espacio, un borde definido o un pequeño resalte de la página detrás de él.
- Relleno: Establece el espacio dentro de los bordes del contenedor, entre el borde de la caja y el contenido de su formulario. Auméntelo cuando los campos se sientan apretados contra los bordes.
- Estilo del borde: Delinea el contenedor con un borde Sólido, Discontinuo o Punteado.
- Grosor del borde: Determina el grosor de ese contorno. Los píxeles son la opción predeterminada aquí también, y se aplican las mismas opciones de unidad.
- Radio del borde: Redondea las esquinas del contenedor. Los valores más altos le dan una forma de tarjeta más suave, mientras que los valores más bajos mantienen los bordes nítidos.
- Sombra: Añade profundidad detrás del contenedor, con tamaños que van desde ninguno hasta grande. Una sombra pequeña suele ser suficiente para separar un formulario de un fondo liso.
- Colores: Establece el color del borde del contenedor para que su borde encaje cómodamente con el resto de su diseño.
Estilos de fondo
Estilos de fondo le da control sobre lo que se encuentra detrás de su formulario, ya sea un color plano o una imagen completa. Para empezar con una imagen, abra el menú desplegable Imagen y elija de dónde debe provenir.
Biblioteca de medios abre sus propias cargas, así que elija esa opción cuando la imagen ya esté en su sitio o desee cargar una nueva. Fotos de stock abre una biblioteca de imágenes profesionales en su lugar.
La primera vez que elija Fotos de stock, WPForms mostrará una superposición pidiéndole que descargue la biblioteca de imágenes de stock. Haga clic en Continuar en ese aviso y las fotos estarán disponibles para explorar.
Una vez que haya hecho su selección, haga clic en Elegir imagen para seleccionar el archivo real. Con una imagen en su lugar, aparecen cuatro configuraciones más en el panel:
- Posición: Alinea la imagen dentro del formulario utilizando opciones como Arriba centro y Abajo centro, para que controle qué parte de la foto se muestra.
- Repetir: Decide cómo se repite la imagen. Sin repetición la muestra una vez, Repetir la repite en todo el fondo, y Repetir horizontal y Repetir vertical la repiten en un solo eje.
- Tamaño: Controla cómo encaja la imagen. Cubrir la escala para llenar el fondo, independientemente del tamaño del formulario, y Dimensiones le permite introducir un ancho y alto exactos.
- Colores: Establece un color de fondo liso, que es lo que se muestra cuando no se utiliza ninguna imagen.
Estilos avanzados
En la configuración Avanzada, puedes acceder al código CSS que incluye todos los estilos personalizados que has aplicado a tu formulario.
Si deseas simplemente mover esos estilos a otro formulario, busca la opción para copiar y pegar la configuración de estilo.
En caso de que desees deshacer los cambios realizados en tu formulario, haz clic en el botón Restablecer configuración de estilo. Esto revertirá tu formulario a su estilo predeterminado, deshaciendo cualquier personalización previa.
El campo CLASE(S) CSS adicional(es) es donde puedes introducir libremente cualquier otra clase CSS que hayas desarrollado. Lee nuestra guía sobre cómo implementar nuevas clases CSS para obtener más información.
Paso 6: Probar y publicar el formulario
Ahora, es hora de guardar tus cambios publicando la página o guardándola como borrador. Por último, realiza una prueba rápida para asegurarte de que tu formulario se vea y funcione como esperas.
Una vez guardada la página, haz clic en Vista previa para ver el formulario real con tus estilos aplicados. El editor de bloques te acerca, pero la vista previa muestra lo que tus visitantes verán realmente.
Preguntas frecuentes sobre cómo dar estilo a WPForms en el editor de bloques
Aquí tienes respuestas a las preguntas que surgen con más frecuencia sobre el estilo de formularios de WPForms, el marcado moderno y los temas de formularios.
¿Por qué no veo ninguna opción de estilo para mi bloque de WPForms?
Dos ajustes controlan esto, y ambos se encuentran en WPForms » Ajustes » General. Incluir estilo del formulario debe estar configurado en Estilo base y tema del formulario, y Usar marcado moderno debe estar habilitado.
Si instalaste WPForms en la versión 1.8.1 o posterior, el marcado moderno ya está activado y la casilla de verificación no aparecerá en absoluto, así que comprueba primero el ajuste de estilo.
El único bloqueo real es el campo de tarjeta de crédito obsoleto, que no es compatible con el marcado moderno, por lo que un formulario que todavía lo utiliza no se puede estilizar en el editor de bloques hasta que ese campo se reemplace.
¿Necesito WPForms Pro para dar estilo a mis formularios?
No. El estilo de formularios y los más de 40 temas de formularios funcionan en WPForms Lite, la versión gratuita, por lo que cada paso de esta guía se ejecuta en una instalación gratuita.
Pro añade capacidades como complementos de pago, encuestas y lógica condicional en los pagos, aunque nada de eso es necesario para cambiar el aspecto de tus formularios.
¿Mi formulario conservará sus estilos si lo incrusto en otra página?
Los estilos aplicados en el constructor de WPForms en Ajustes » Temas se guardan con el formulario y lo siguen a todas partes, cubriendo las incrustaciones de shortcode, el bloque de WPForms y el módulo Divi. Los estilos aplicados en el editor de bloques solo permanecen en esa incrustación.
Así que puedes estilizar un formulario una vez en el constructor para un aspecto coherente en todo tu sitio, y luego anular los colores en una sola página de destino sin tocar el original.
¿Puedo dar estilo a WPForms sin el editor de bloques?
Sí. El constructor de WPForms tiene los mismos paneles en Ajustes » Temas, y cualquier cosa que configures allí se aplica en todo el sitio.
Elementor tiene sus propios controles de estilo, por lo que puedes personalizar tus formularios en Elementor en su lugar, y esos cambios permanecen en esa página.
Divi funciona de manera diferente, ya que su módulo WPForms solo expone los ajustes de tamaño y espaciado propios de Divi, así que estiliza el formulario en el constructor y la incrustación de Divi lo captará.
¿Cómo hago cambios de estilo que el editor de bloques no ofrece?
Añade tus propias clases en el cuadro Clase(s) CSS adicional(es) en el panel Avanzado, y luego escribe el CSS para que coincida con ellas.
La guía de CSS personalizado enlazada en la sección Estilos avanzados de arriba cubre las clases que WPForms ya aplica, que es a lo que querrás dirigirte.
A continuación, crea formularios interactivos que aumenten la participación
Buscando más formas de personalizar tu WPForms? Echa un vistazo a estos consejos para llevar tus formularios al siguiente nivel. Ya sea que estés buscando mejorar la apariencia o la funcionalidad de tu formulario, te tenemos cubierto.
Estiliza tus Formularios de WordPress Ahora
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin de creación de formularios de WordPress más fácil. WPForms Pro incluye muchas plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha sido útil, síguenos en Facebook y Twitter para obtener más tutoriales y guías gratuitas de WordPress.
