Personaliza tu formulario de Jetpack

Personaliza tu Jetpack Forms con los controles del bloque para adaptarlo al diseño único de tu sitio.

Cuando hayas añadido un bloque de formulario de Jetpack a una página o entrada, puedes ajustar su apariencia para que coincida con el diseño de tu sitio. Esta guía explica cómo controlar el ancho de los campos, actualizar los colores, aplicar estilos personalizados a campos concretos y establecer un aspecto coherente para todos los formularios de tu sitio.

Tutorial en vídeo

En este vídeo se explica cómo gestionar y personalizar un formulario creado con Jetpack. Se muestra cómo ajustar su apariencia visual, controlar el ancho de cada campo y configurar lo que ven los visitantes después de enviarlo.

Personalizar tu formulario

Ajustar los colores del formulario

Puedes cambiar los colores de todo el formulario desde un único lugar, sin tener que editar cada campo por separado.

Para actualizar los colores generales del formulario:

  1. Haz clic en el borde exterior del bloque Formulario en el editor para seleccionar el formulario completo, en lugar de un campo dentro de él.
  2. En la barra lateral derecha, abre el Ajustes del bloque y haz clic en la pestaña Estilos; es el icono que parece un círculo dividido en blanco y negro.
  3. Ajusta el color del texto, el color de fondo y cualquier otra propiedad de color que aparezca.
  4. Haz clic en Guardar o en Actualizar en la parte superior del editor para aplicar los cambios.

Añadir una imagen de fondo al formulario

Puedes establecer una imagen de fondo para el formulario o para bloques de pasos:

  1. Haz clic en el borde exterior del bloque Formulario en el editor para seleccionar el formulario completo, en lugar de un campo dentro de él.
  2. En la barra lateral derecha, abre el Ajustes del bloque y haz clic en la pestaña Estilos; es el icono que parece un círculo dividido en blanco y negro.
  3. Añadir una imagen de fondo
  4. Haz clic en Guardar o en Actualizar en la parte superior del editor para aplicar los cambios.

Establecer un estilo unificado para todos los formularios de tu sitio

Si tu sitio de WordPress utiliza un tema de bloques, puedes definir un único estilo visual que se aplique a todos los formularios que publiques, sin tener que personalizar cada formulario por separado. Esto se gestiona desde el panel Estilos del Editor del sitio.

  1. En el escritorio de WordPress, ve a Apariencia → Editor.
  2. En la sección Diseño del panel izquierdo, haz clic en Estilos.
  3. En la parte inferior del panel Estilos, haz clic en Bloques.
  4. Busca Formulario en la lista de tipos de bloque y haz clic en él.
  5. Ajusta la configuración de color, tipografía y espaciado según tus preferencias.
  6. Haz clic en Guardar para aplicar esta configuración a todo el sitio. A partir de ahora, todos los formularios de tu sitio mostrarán este estilo.

📝 Nota: el Editor del sitio solo está disponible en sitios de WordPress que utilizan un tema de bloques, también llamado tema de edición completa del sitio. Si no ves la opción Editor en Apariencia dentro del escritorio, tu tema activo no es compatible con esta función. Al cambiar a un tema de bloques, podrás utilizarla.

Ajustar el ancho de los campos

Cada campo de un bloque de formulario de Jetpack puede mostrarse con un ancho personalizado. Esto te permite organizar los campos en un diseño compacto, uno al lado del otro, o ampliarlos para que ocupen todo el contenedor.

Para cambiar el ancho de un campo del formulario:

  1. Abre la entrada o página en el editor de bloques de WordPress.
  2. Haz clic en el campo cuyo ancho quieras ajustar.
  3. Abre el panel Ajustes del bloque en la barra lateral derecha.
  4. Desplázate hasta la opción Ancho y selecciona 25%, 50%, 75% o 100%.

💡 Consejo: para colocar dos campos en la misma fila, establece ambos al 50 %.

Aplicar estilos diferentes a campos concretos

De forma predeterminada, todos los campos de un formulario comparten la misma configuración de estilo. Si quieres que un campo concreto tenga un aspecto diferente al resto, puedes separarlo del grupo y aplicarle un estilo independiente.

  1. Utiliza el panel Vista de lista (al que puedes acceder desde la barra de herramientas del editor) para localizar y seleccionar el campo concreto que quieres personalizar. También puedes hacer clic directamente en el campo dentro del editor.
  2. En la barra lateral de Ajustes del bloque, busca el interruptor Sincronizar el estilo de los campos y déjalo desactivado. Esto separa el estilo de ese campo del resto del formulario.
  3. Haz clic en la etiqueta o en su área de entrada, y después utiliza los controles de la barra lateral para establecer un color, una fuente u otras propiedades tipográficas personalizadas para ese elemento.
  4. Haz clic Guardar o Actualizar para aplicar los cambios.

Guías relacionadas

¿Aún necesitas ayuda?

Por favor ponte en contacto con el equipo de soporte. Estaremos encantados de asesorarte.

Información sobre privacidad

El bloque Formulario está activado de forma predeterminada. Puede desactivarse/reactivarse en cualquier momento siguiendo la guía para controlar las funciones de Jetpack en una sola página.

Datos utilizados
Propietarios/usuarios del sitio

Para realizar un seguimiento de la actividad (detallado más abajo): dirección IP, ID de usuario de WordPress.com, nombre de usuario de WordPress.com, ID del sitio conectado a WordPress.com y URL, versión de Jetpack, agente de usuario, URL visitada, URL de referencia, fecha y hora del evento, idioma del navegador, código de país.
Visitantes del sitio

Si Akismet está activado en el sitio, los datos enviados mediante el formulario de contacto (dirección IP, agente de usuario, dirección de correo electrónico, URL del sitio y comentario) se envían al servicio de Akismet (también propiedad de Automattic) para comprobar si hay spam. Los datos enviados se almacenan en la base de datos del sitio en el que se enviaron y se envían directamente por correo electrónico al propietario del formulario (es decir, al autor del sitio que publicó la página en la que se encuentra el formulario de contacto). Este correo electrónico incluirá la dirección IP, la fecha y hora, el nombre, la dirección de correo electrónico, el sitio web y el mensaje de la persona que realizó el envío.

La dirección IP se incluye como medida de prevención contra abusos. Además, en los sitios que utilizan Akismet, es necesario proporcionar una protección adecuada contra el spam.
Actividad registrada
Propietarios/usuarios del sitio

Registramos cuándo se activa y desactiva la función, qué usuario lo hace y cuándo se exportan archivos CSV o Google Sheets desde la página de formularios de comentarios.
Visitantes del sitio

Ninguno.
Datos sincronizados (Leer más)
Propietarios/usuarios del sitio

Sincronizamos una única opción que indica si la función está activada.
Visitantes del sitio

Sincronizamos los datos de la entrada y sus metadatos asociados al envío de un formulario de contacto por parte de un usuario. Si Akismet está activado en el sitio, también se sincronizan la dirección IP y el agente de usuario enviados originalmente con el comentario, ya que se almacenan en los metadatos de la entrada.