¿Le gustaría personalizar fácilmente el aspecto de sus formularios de WordPress? Nuestra función de diseño de formularios te permite personalizarlos sin necesidad de escribir CSS.
Este tutorial le mostrará cómo dar estilo a sus formularios con el constructor visual WPForms en el editor de bloques.
Requisitos: Para poder dar estilo a tus formularios en el editor de bloques, necesitarás tener lo siguiente:
- WordPress versión 6.0 o superior
- Editor de bloques o un tema con edición completa del sitio
Antes de empezar, asegúrese de que WPForms está instalado y activado en su sitio WordPress y que ha verificado su licencia.
Habilitar el marcado moderno
El marcado moderno en WPForms incluye una mayor accesibilidad y le permite personalizar sus formularios visualmente en el editor de bloques.
Para activar el estilo del formulario, necesitará habilitar el marcado moderno desde la página de configuración de WPForms. Para ello, vaya a WPForms " Configuración y seleccione la pestaña General.
A continuación, desplácese hasta la sección General y asegúrese de que la opción Incluir estilo del formulario está establecida en Estilo base y tema del formulario.
A continuación, active la casilla Utilizar marcado moderno.
Asegúrese de guardar los cambios después de activar esta opción.
Personalización de formularios
Después de activar la opción de marcado moderno, cree un nuevo formulario y añádalo a una página o entrada.
En el editor de bloques, haga 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 de formulario, las etiquetas, los botones y los estilos de contenedor y fondo sin escribir ningún CSS. También encontrarás opciones adicionales para copiar la configuración de estilo de un formulario a otro en la sección Avanzado.
A continuación veremos cada una de estas opciones con más detalle.
Temas
El ajuste Temas le permite elegir un tema de color predefinido para actualizar automáticamente el estilo de los campos, etiquetas, botones, contenedor y fondo de su formulario.
Para aplicarlo, sólo tiene que hacer clic en el tema que prefiera y éste ajustará al instante los colores de los campos, etiquetas, botones, contenedor o fondo de su 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 puede aplicar a cualquier formulario como lo harías con cualquier otro tema de formulario.
También puede cambiar el nombre de este tema para identificarlo fácilmente desde el campo Nombre del tema.
Para eliminar un tema de formulario personalizado, simplemente haga clic en el texto que dice Eliminar tema junto al nombre del tema.
Estilos de campo
En la sección Estilos de campo, encontrará las opciones para ajustar el tamaño, el borde, el tamaño del borde, el radio del borde y los colores de los campos de formulario. A continuación te explicamos las opciones de campo disponibles.
- Tamaño: Ajusta el tamaño general de los campos del formulario. Las opciones incluyen Pequeño, Mediano y Grande.
- Borde: Esta opción le permite añadir o eliminar un borde de los campos del formulario. Las opciones incluyen bordes sólidos, discontinuos o punteados.
- Tamaño del borde: Establece el grosor de los bordes de sus campos. La unidad predeterminada es píxeles (px), pero puede seleccionar la unidad que mejor se adapte a sus necesidades de diseño.
- Radio del borde: Use esto para aplicar esquinas redondeadas a sus campos de formulario para una apariencia más suave y moderna. La unidad predeterminada es píxeles (px), pero puede cambiarla a la unidad que prefiera.
A continuación, encontrará la configuración de Colores. Esto le permite actualizar el fondo, el borde y el texto, y los colores del menú desplegable de sus campos.
Al hacer clic en una opción de color concreta, aparecerá una superposición con los colores disponibles para el tema.
Haga clic en la muestra de color para abrir el selector de color.
Si ya tiene un color de marca que desea utilizar para sus formularios, siga adelante y pegue el código hexadecimal del color en el campo Hex.
Estilos de etiquetas
En la sección Estilos de etiquetas, encontrará la opción de actualizar el tamaño y los colores de las etiquetas de sus formularios. Las opciones de tamaño disponibles incluyen Pequeño, Mediano y Grande.
En la sección Colores, encontrará la opción de actualizar los colores de las etiquetas, subetiquetas y mensajes de error. A continuación explicamos las opciones de color disponibles para las etiquetas.
- Etiqueta: Esta opción controla el color del texto de la etiqueta del campo principal.
- Sublabel & Hint: Esta opción controla el color de las sublabel de campo y las pistas que aparecen cuando WPForms sugiere valores a los usuarios en el frontend.
- Mensaje de error: El color del texto que se muestra si se produce un error cuando los usuarios rellenan tu formulario.
Estilos de botones
La configuración de Estilos de botones le permite cambiar el tamaño, el borde, el radio del borde y los colores de sus botones. A continuación explicamos las opciones disponibles para los botones.
- Tamaño: Esta opción establece el tamaño del botón. Las opciones son Pequeño, Mediano y Grande.
- Borde: Esta opción le permite contornear sus botones con un borde sólido, discontinuo o punteado.
- Tamaño del borde: Establece el grosor de los bordes de tus botones. La unidad predeterminada es píxeles (px), pero puede seleccionar la unidad que mejor se adapte a sus necesidades de diseño.
- Radio del borde: Ajusta la redondez de las esquinas de los botones para darles 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 sus preferencias de diseño.
En el panel Colores, encontrará la opción de actualizar los colores del fondo y del texto de su botón.
Estilos de contenedor
La configuración de los Estilos de Contenedor le permite personalizar el relleno, el estilo del borde, el tamaño del borde, el radio del borde, la sombra y los colores para el contenedor de su formulario. A continuación detallamos las opciones disponibles para el contenedor.
- Relleno: Esta opción establece el espacio dentro de los bordes del contenedor del formulario. Puede aumentar o disminuir este valor para ajustar el espaciado alrededor del contenido del formulario.
- Estilo de borde: Este ajuste le permite elegir el contorno de su contenedor, con opciones para un borde Sólido, Rayado o Punteado.
- Tamaño del borde: Determina el grosor del borde de su contenedor. La unidad predeterminada es píxeles (px), pero puede seleccionar la unidad que mejor se adapte a sus necesidades de diseño.
- Radio del borde: Ajusta el redondeo de las esquinas de su contenedor, añadiendo un borde más suave o más definido a la apariencia de su formulario. La medida predeterminada es en píxeles (px), pero puede modificarse para adaptarla a su estilo.
- Sombra: Elija el tamaño del efecto de sombra de su contenedor para añadir profundidad al diseño de su formulario, con opciones que van desde ninguna a grande.
- Colores: Actualice el color del borde de su contenedor para alinearlo con su tema visual, mejorando la estética general del formulario.
Estilos de fondo
La configuración de Estilos de fondo le permite controlar la imagen y el color de fondo de su formulario.
Para empezar, seleccione una fuente de imagen en el menú desplegable Imagen. Para las imágenes ya cargadas en su sitio web o para cargar otras nuevas, seleccione la opción Mediateca. Para explorar una selección más amplia de imágenes profesionales, selecciona la opción Fotos de Stock .
Después de hacer su selección, haga clic en el botón Elegir imagen para continuar.
Si selecciona Biblioteca multimedia en el menú desplegable Imagen , se abrirá la galería multimedia de su sitio web, lo que le permitirá elegir una imagen o cargar una nueva. Si selecciona Fotos de archivo, se le presentará una selección de fotos de archivo para elegir el fondo de su formulario.
Una vez seleccionada la imagen, la sección Estilos de fondo ofrece opciones de personalización adicionales:
- Posición: Esta configuración le permite alinear su imagen de fondo dentro del formulario seleccionando opciones como Centro superior, Centro inferior y más para obtener la colocación perfecta.
- Repetir: Elija cómo se repite su 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: Ajusta cómo encaja tu imagen de fondo dentro del formulario. Cubrir asegura que la imagen cubra todo el fondo, adaptándose al tamaño del formulario. Si se selecciona Dimensiones, puede especificar la anchura y la altura exactas de la imagen.
- Colores: Esta opción le permite seleccionar un color de fondo, que será visible cuando no se utilice ninguna imagen.
Estilismo avanzado
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 estilos.
Esta opción permite copiar estilos de un formulario a otro.
Si has copiado ajustes de estilo de otro formulario, podrás pegarlos rápidamente aquí. Después de pegar el fragmento de código, el formulario utilizará los estilos del formulario anterior.
Si desea restablecer cualquier personalización que haya añadido a su formulario, haga clic en el botón Restablecer configuración de estilo. Esto restaurará tu formulario a su estado original sin ningún estilo personalizado.
Puede añadir opcionalmente clases CSS personalizadas que haya creado en la casilla CLASE(ES) CSS ADICIONAL(ES). Para obtener más información, consulta nuestro tutorial sobre cómo añadir clases CSS personalizadas.
Después de diseñar el formulario, asegúrese de guardar los cambios publicando la página o guardándola como borrador.
Pruebe sus formularios
El último paso es realizar una prueba rápida para asegurarse de que el formulario tiene el aspecto y funciona como usted espera.
Para probarlo, sólo tendrá que enviar una entrada a su formulario. Para más información, consulta nuestra lista de comprobación de formularios.
Preguntas frecuentes
A continuación, hemos respondido a algunas de las preguntas más frecuentes que recibimos sobre el estilo de los formularios en el editor de bloques.
Atención Algunas de las preguntas frecuentes de este documento contienen código PHP y están dirigidas a desarrolladores. Ofrecemos este código como cortesía, pero no proporcionamos soporte para personalizaciones de código o desarrollo de terceros.
Si prefieres un método más sencillo para añadir código personalizado a tu sitio, consulta la guía de WPBeginner para usar WPCode.
No encuentro la opción Usar Modern Markup. Cómo puedo activar Modern Markup en WPForms?
Los usuarios con 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 acaba de instalar el plugin WPForms en su sitio WordPress, no verá la opción Use Modern Markup en su página de configuración. Su sitio estará configurado para utilizar el marcado moderno por defecto.
Si desea mostrar esta opción en su página de configuración, tendrá que añadir el siguiente fragmento de código a su sitio.
¿Cómo puedo forzar WPForms para utilizar el marcado moderno?
Si el uso del campo de tarjeta de crédito obsoleto le impide habilitar el marcado moderno, puede evitar esta restricción agregando un filtro personalizado. Para forzar a WPForms a habilitar la opción de marcado moderno, añada el siguiente fragmento de código a su sitio web.
Después de añadir el código, podrás activar/desactivar el marcado moderno desde la página de configuración de WPForms.
¿Cómo puedo realizar cambios de estilo no disponibles en el editor de bloques?
Si quieres hacer 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 desea dar estilo a sus formularios con CSS, le recomendamos que utilice WPCode para añadir sus estilos personalizados a su sitio.
Ya está. Ahora ya sabe como personalizar la apariencia de sus formularios WordPress usando WPForms y el editor de bloques.
A continuación, ¿te gustaría utilizar iconos para mejorar la visualización de tu formulario? Asegúrese de revisar nuestro tutorial sobre el uso de opciones de icono para aprender cómo.