Cómo estilizar WPForms usando el editor de bloques

¿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.

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.

Estilizar formularios con WPForms también es pan comido, gracias a su interfaz fácil de usar, amplias opciones de personalización y capacidad para crear formularios visualmente atractivos y adaptables utilizando el editor de bloques.

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.

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.

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 Modern Markup en WPForms, navega a la sección Ajustes dentro de WPForms y selecciona la pestaña General.

Desplázate hacia abajo hasta la sección General para habilitar la opción Usar Modern Markup. Con esto habilitado, estás listo para estilizar tu formulario a través del editor de bloques.

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!

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!

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 campos de formulario, estilos de etiquetas y estilos de botones para que coincidan con la estética de tu marca.

Además, la sección Avanzado proporciona la capacidad de copiar la configuración de estilo entre formularios, simplificando aún más el proceso de estilizado.

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:

Estilos de campo

Navega a las opciones de Estilos de Campo en la configuración del bloque WPForms. Localiza los ajustes de Tamaño, Radio del Borde y Color.

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 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.

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.

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.

Crea tu formulario de WordPress ahora

¿Listo para crear tu formulario? Empieza hoy mismo con el plugin constructor 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.