Estiliza tus formularios en el editor de bloques

¿Te gustaría personalizar fácilmente el aspecto de tus formularios de WordPress? Nuestra función de estilo de formularios te permite estilizar tus formularios sin escribir ningún CSS.

Este tutorial te mostrará cómo estilizar tus formularios con el constructor visual de WPForms en el editor de bloques.

---

Antes de empezar, asegúrate de que WPForms esté instalado y activado en tu sitio de WordPress y que hayas verificado tu licencia.

Habilitar marcado moderno

El marcado moderno en WPForms incluye mayor accesibilidad y te permite personalizar tus formularios visualmente en el editor de bloques.

Para activar el estilo de formularios, deberás habilitar el marcado moderno desde tu página de configuración de WPForms. Para ello, ve a WPForms » Ajustes y selecciona la pestaña General.

A continuación, desplázate hasta la sección General y asegúrate de que la opción Incluir estilo de formulario esté configurada en Estilo base y de tema del formulario.

Después de eso, marca la casilla Usar marcado moderno para habilitarlo.

Asegúrate de guardar tus cambios después de habilitar esta opción.

Personalizar tus formularios

Después de habilitar la opción de marcado moderno, crea un nuevo formulario y añade el formulario a una página o publicación.

En el editor de bloques, haz clic en el formulario para abrir opciones adicionales para el bloque WPForms.

En la configuración del bloque WPForms, encontrarás opciones para personalizar el tema de color, los campos del formulario, las etiquetas, los botones y los estilos del contenedor y el fondo sin necesidad de escribir CSS. También encontrarás opciones adicionales para copiar la configuración de estilo de un formulario a otro en la sección Avanzado.

Cubriremos cada una de estas opciones con más detalle a continuación.

Temas

La configuración Temas te permite elegir un tema de color predefinido para actualizar automáticamente el estilo de los campos, etiquetas, botones, contenedor y fondo de tu formulario.

Para aplicarlo, simplemente haz clic en tu tema preferido y ajustará instantáneamente los colores de los campos, etiquetas, botones, contenedor o fondo de tu formulario.

Si personalizas ajustes individuales después de seleccionar un tema, estos cambios se guardarán como un nuevo tema de formulario personalizado. Este nuevo tema se añadirá a tu lista de temas disponibles y se podrá aplicar a cualquier formulario como lo harías con cualquier otro tema de formulario.

También puedes renombrar este tema para una fácil identificación desde el campo Nombre del tema.

Para eliminar un tema de formulario personalizado, simplemente haz clic en el texto que dice Eliminar tema junto al nombre del tema.

Estilos de campo

En la sección Estilos de campo, encontrarás las opciones para ajustar el tamaño, el borde, el grosor del borde, el radio del borde y los colores de los campos de tu formulario. A continuación, explicamos las opciones de campo disponibles.

• Tamaño: Ajusta el tamaño general de los campos de tu formulario. Las opciones incluyen Pequeño, Mediano y Grande.
• Borde: Esta configuración te permite añadir o quitar un borde de los campos de tu formulario. Las opciones incluyen bordes Sólido, Discontinuo o Punteado.
• Grosor del borde: Establece el grosor de los bordes de tus campos. La unidad predeterminada es píxeles (px), pero puedes seleccionar la unidad que mejor se adapte a tus necesidades de diseño.
• Radio del borde: Úsalo para aplicar esquinas redondeadas a los campos de tu formulario para una apariencia más suave y moderna. La unidad predeterminada es píxeles (px), pero puedes cambiarla a la unidad que prefieras.

A continuación, encontrarás la configuración de Colores. Esto te permite actualizar el fondo, el borde y los colores del texto y del menú desplegable de tus campos.

Cuando hagas clic en una opción de color en particular, aparecerá una superposición con los colores de tema disponibles.

Haz clic en la muestra de color para abrir el selector de color.

Si ya tienes un color de marca que deseas usar para tus formularios, pégalo en el campo Hex.

Estilos de etiqueta

En la sección Estilos de etiqueta, encontrarás la opción para actualizar el tamaño y los colores de las etiquetas de tu formulario. Las opciones de tamaño disponibles incluyen Pequeño, Mediano y Grande.

En la sección Colores, encontrarás la opción para actualizar los colores de las etiquetas, subetiquetas y mensajes de error. A continuación, hemos explicado las opciones de color de etiqueta disponibles.

• Etiqueta: Esta opción controla el color del texto de la etiqueta principal de tu campo.
• Subetiqueta y Pista: Esta opción controla el color de las subetiquetas y pistas de campo que aparecen cuando WPForms sugiere valores a los usuarios en el frontend.
• Mensaje de Error: El color del texto que se muestra si ocurre un error cuando los usuarios completan tu formulario.

Estilos de botón

La configuración de Estilos de Botón te permite cambiar el tamaño, el borde, el grosor del borde, el radio del borde y los colores de tus botones. A continuación, hemos explicado las opciones de botón disponibles.

• Tamaño: Esta opción establece el tamaño del botón. Las opciones incluyen Pequeño, Mediano y Grande.
• Borde: Esta configuración te permite delinear tus botones con un borde Sólido, Discontinuo o Punteado.
• Grosor del Borde: Establece el grosor de los bordes de tu botón. La unidad predeterminada es píxeles (px), pero puedes seleccionar la unidad que mejor se adapte a las necesidades de tu diseño.
• Radio del Borde: Ajusta la redondez de las esquinas de tu botón para un aspecto más suave o más nítido. Los píxeles (px) son la unidad estándar, con opciones para cambiar según tus preferencias de diseño.

En el panel Colores, encontrarás la opción para actualizar los colores de fondo y de texto de tu botón.

Estilos de contenedor

La configuración de Estilos del Contenedor te permite personalizar el relleno, el estilo del borde, el grosor del borde, el radio del borde, la sombra y los colores del contenedor de tu formulario. A continuación, hemos detallado las opciones del contenedor disponibles.

• Relleno: Esta opción establece el espacio dentro de los bordes del contenedor del formulario. Puedes aumentar o disminuir este valor para ajustar el espaciado alrededor del contenido de tu formulario.
• Estilo del Borde: Esta configuración te permite elegir el contorno de tu contenedor, con opciones para un borde Sólido, Discontinuo o Punteado.
• Grosor del Borde: Determina el grosor del borde de tu contenedor. La unidad predeterminada es píxeles (px), pero puedes seleccionar la unidad que mejor se adapte a las necesidades de tu diseño.
• Radio del Borde: Ajusta la redondez de las esquinas de tu contenedor, añadiendo un borde más suave o más definido a la apariencia de tu formulario. La medida predeterminada es en píxeles (px) pero se puede modificar para adaptarse a tu estilo.
• Sombra: Elige el tamaño del efecto de sombra para tu contenedor para añadir profundidad al diseño de tu formulario, con opciones que van desde ninguna hasta grande.
• Colores: Actualiza el color del borde de tu contenedor para que coincida con tu tema visual, mejorando la estética general del formulario.

Estilos de fondo

Los ajustes de Estilos de fondo te permiten controlar la imagen y el color de fondo de tu formulario.

Para empezar, selecciona una fuente de imagen en el menú desplegable Imagen. Para imágenes ya subidas a tu sitio web o para subir nuevas, selecciona la opción Biblioteca de medios. Para explorar una selección más amplia de imágenes profesionales, selecciona la opción Fotos de stock.

Después de hacer tu selección, haz clic en el botón Elegir imagen para continuar.

Si seleccionas Biblioteca de medios en el menú desplegable Imagen, se abrirá la galería de medios de tu sitio web, lo que te permitirá elegir una imagen o subir una nueva. Si se selecciona Fotos de stock, se te presentará una selección de fotos de stock para elegir para el fondo de tu formulario.

Una vez que hayas seleccionado tu imagen, la sección Estilos de fondo ofrece opciones de personalización adicionales:

• Posición: Este ajuste te permite alinear tu imagen de fondo dentro del formulario seleccionando opciones como Arriba centro, Abajo centro y más para obtener la colocación perfecta.
• Repetir: Elige cómo se repite tu imagen de fondo. Las opciones son Sin repetición para una sola imagen, Mosaico para repetir la imagen en todo el fondo, Repetir horizontal para repetir a lo ancho y Repetir vertical para repetir a lo largo.
• Tamaño: Esto ajusta cómo tu imagen de fondo encaja dentro del formulario. Cubrir asegura que la imagen cubra todo el fondo, adaptándose al tamaño del formulario. Si se selecciona Dimensiones, puedes especificar el ancho y alto exactos para tu imagen.
• Colores: Esta opción te permite seleccionar un color de fondo, que será visible cuando no se utilice ninguna imagen.

Estilos avanzados

En la sección Avanzado, verás el código CSS que contiene todos los estilos que has añadido al formulario en Copiar / Pegar configuración de estilo.

Esta opción te permite copiar estilos de un formulario a otro.

Si has copiado la configuración de estilos de otro formulario, podrás pegarla rápidamente aquí. Después de pegar el fragmento de código, el formulario utilizará los estilos del formulario anterior.

Si deseas restablecer cualquier personalización que hayas añadido a tu formulario, haz clic en el botón Restablecer configuración de estilo. Esto restauraría tu formulario a su estado original sin ningún estilo personalizado.

Opcionalmente, puedes añadir clases CSS personalizadas que hayas creado en el cuadro CLASE(S) CSS ADICIONAL(ES). Para obtener más información, consulta nuestro tutorial sobre cómo añadir clases CSS personalizadas.

Después de dar estilo a tu formulario, asegúrate de guardar tus cambios publicando la página o guardándola como borrador.

Probar tus formularios

El último paso es realizar una prueba rápida para asegurarte de que tu formulario se ve y funciona como esperas.

Para probarlo, simplemente tendrás que enviar una entrada a tu formulario. Para obtener más información, consulta nuestra lista de verificación completa para probar formularios.

Preguntas frecuentes

A continuación, hemos respondido a algunas de las preguntas más frecuentes que recibimos sobre cómo dar estilo a tus formularios en el editor de bloques.

No encuentro la opción Usar marcado moderno. ¿Cómo activo el marcado moderno en WPForms?

Los usuarios que tengan al menos un formulario en su sitio web antes de actualizar el plugin WPForms a la versión 1.8.1 verán la opción de marcado moderno.

Si acabas de instalar el plugin WPForms en tu sitio de WordPress, no verás la opción Usar marcado moderno en tu página de configuración. Tu sitio estará configurado para usar el marcado moderno por defecto.

Si deseas mostrar esta opción en tu página de configuración, deberás añadir el siguiente fragmento de código a tu sitio.

¿Cómo fuerzo a WPForms a usar el marcado moderno?

Si el uso del campo de tarjeta de crédito obsoleto te impide activar el marcado moderno, puedes omitir esta restricción añadiendo un filtro personalizado. Para forzar a WPForms a activar la opción de marcado moderno, añade el siguiente fragmento de código a tu sitio web.

Después de añadir el código, podrás activar/desactivar el marcado moderno desde tu página de configuración de WPForms.

¿Cómo puedo hacer cambios de estilo que no estén disponibles en el editor de bloques?

Si deseas realizar otros cambios en los estilos de tus formularios que no estén disponibles como opciones en el editor de bloques, puedes usar CSS Hero. Este plugin te permite cambiar la apariencia de tu sitio en el frontend sin escribir ningún código.

O, si deseas dar estilo a tus formularios con CSS, te recomendamos usar WPCode para añadir tus estilos personalizados a tu sitio.

¡Eso es todo! Ahora sabes cómo personalizar la apariencia de tus formularios de WordPress usando WPForms y el editor de bloques.

A continuación, ¿te gustaría usar iconos para mejorar la visualización de tu formulario? Asegúrate de consultar nuestro tutorial sobre el uso de opciones de iconos para aprender cómo.