Modificar el estilo de bloques de formulario

Personaliza los formularios de contacto de tu sitio para que coincidan con tu marca.

Última actualización: 10 de septiembre de 2024

Utiliza los estilos del sitio para editar el aspecto de los bloques de formulario de tu sitio. Puedes cambiar las fuentes y los colores del texto y los botones del formulario, así como el estilo y la forma de otros elementos de tus formularios, como campos de texto y casillas de verificación.

Todos los bloques de formulario de tu sitio siguen esta configuración de estilo, por lo que es una excelente manera de darle a tus formularios un estilo único y mantener su coherencia.

Cómo acceder a esta función

La mayor parte de esta guía se centra en las opciones de estilo de formulario que solo están disponibles en los sitios de la versión 7.1. Si tu sitio está en la versión 7.0, revisa Modificar el estilo de bloques de formulario en la versión 7.0.

Mira el video

Abre la configuración de estilo del bloque de formulario

Para abrir la configuración de estilo de bloques de formulario:

  1. Abre el panel Páginas y haz clic en una página con un bloque de formulario para que puedas revisar los cambios en la vista previa del sitio a medida que los realices.
  2. Abre el panel Estilos del sitio y, a continuación, haz clic en > junto a Formularios.
  3. Haz clic en Cambiar para elegir un paquete de formulario preestablecido.
  4. Haz clic en Efectos para personalizar el campo del formulario y las animaciones del botón Enviar. 
  5. Haz clic en Opciones de campo para personalizar los estilos de campo de casilla de verificación, radial y encuesta.
  6. Haz clic en Fuentes para personalizar los estilos de texto de bloques de formulario.
  7. Haz clic en Colores para personalizar los estilos de colores de bloques de formulario.
  8. Haz clic en Espaciado del formulario para personalizar la cantidad de espacio en blanco en tu formulario.
  9. Después de hacer los cambios, haz clic en Guardar.

Ten en cuenta que esta configuración de estilo afecta a todos los bloques de formulario de tu sitio. No es posible dar diferentes configuraciones de estilo a los distintos bloques de formulario, aparte de los colores, que pueden variar entre ellos si los bloques están en secciones con diferentes temas cromáticos.

Otros tipos de formularios, como bloques de newsletter, formularios de portada y formularios de productos, tienen su propia configuración de estilo. Para obtener más información sobre otros tipos de formularios, visita Agregar formularios a tu sitio.

Elige y personaliza un paquete de formularios

Los paquetes de formularios son estilos de formulario preestablecidos que puedes elegir como punto de partida para tu estilo. Ten en cuenta que si realizas cambios en tu configuración después de seleccionar un paquete de formulario y luego cambias a otro paquete de formularios, los cambios en el paquete de formulario inicial no se guardaran.

Cada paquete de formulario incluye ajustes preestablecidos para las opciones de estilo que aparecen en el panel de Formularios:

  • Forma de campo. Establece la forma de los campos del formulario. Elige entre Cuadrado, Rectángulo redondeado, Píldora o Esquinas personalizadas.
  • Relleno de campos. Activa esta opción para agregar un color de fondo al campo del formulario. Cuando la opción está desactivada, los campos del formulario coinciden con el color del bloque de formulario.
  • Borde. Elige Ninguno para ningún borde o Todo para que el borde aparezca en todos los lados. Dependiendo de tus otros ajustes, es posible que Ninguno no esté disponible. Si la forma está establecida en Cuadrada, también puedes elegir Parte inferior para un borde que solo se extiende a lo largo de la parte inferior del campo, como un subrayado.
  • Grosor del borde. Establece el grosor de las líneas de borde alrededor de los campos del formulario. Esta opción no aparecerá si seleccionaste Ninguno para tu borde.
  • Relleno. Elige cuánto relleno aparece alrededor del texto en el campo. Elige S, M o L, o haz clic en ... para configurar el relleno personalizado.
  • Opciones de campo: personaliza la apariencia de los elementos de casilla de verificaciónradioencuesta para ciertos campos.

Después de seleccionar un paquete de formulario, puedes personalizar aún más estos ajustes de estilo en el panel de Formularios.

Cambiar fuentes

En el panel de estilo de Formularios, haz clic en Fuente para cambiar la fuente de cada campo:

  • Título. Texto en la parte superior de cada campo
  • Entrada. Texto que tus visitantes ingresan en cada campo
  • Descripción. Texto debajo de cada campo
  • Leyenda. Texto debajo de la descripción, como “Nombre” y “Apellido” en los campos de nombre
  • Marcador de posición. Texto que puedes mostrar en cada campo
  • Opción. Texto para las opciones seleccionables en los campos de casilla de verificación, radial y encuesta
  • Título de la encuesta. Texto de la pregunta de la encuesta
  • Seleccionar menú desplegable. Texto del menú desplegable

El texto del botón Enviar sigue los estilos de botón principal, secundario o terciario de tu sitio, dependiendo de lo que selecciones en la pestaña Diseño del bloque de formulario.

Mensaje después del envío

Si agregas un mensaje posterior al envío, el texto sigue estas opciones de estilo en los estilos globales de tu sitio:

  • Fuente: configuración de Párrafo en el panel de Fuentes
  • Tamaño: control deslizante de Párrafo 2 en la sección de Párrafos del panel de Fuentes
  • Color: color de párrafo (medio) en el tema de sección elegido, o párrafo (medio) en Fondo si has habilitado un fondo en el bloque.

Cambiar colores

De forma predeterminada, los bloques de formulario usan colores de la paleta de tu sitio. En el panel de estilo de Formularios, haz clic en Colores y luego activa la opción Usar colores del tema para personalizar manualmente los colores de los elementos de los bloques de formulario según el tema cromático de su sección.

Si el ajuste incluye en Fondo, solo se aplicará a los bloques de formulario con el color de fondo habilitado o a los bloques de formulario configurados para que se abran en un lightbox. Los ajustes sin en Fondo se aplican a bloques de formulario sin color de fondo o lightbox habilitado.

Modificar el estilo de bloques de formulario en la versión 7.0

Generalmente, el estilo del bloque de formulario sigue el cuerpo del texto de la plantilla y los ajustes de botones, pero las opciones varían según tu plantilla, y algunas etiquetas de campos de formularios tienen un tamaño fijo. Por ejemplo, no es posible cambiar el tamaño de las etiquetas Nombre y Apellido que aparecen debajo de los campos Nombre. También es posible que no se pueda cambiar el color del texto del marcador de posición en los campos.

La forma de lightbox tiene un estilo fijo. No es posible cambiar la mayor parte de la configuración de fuente o color. Para informarte mejor sobre cómo modificar el estilo de tu sitio, visita Hacer cambios de estilo.

Footer Image
  • Recibe ayuda de nuestra comunidad

  • Recibe la ayuda de nuestra comunidad para personalizaciones avanzadas.

  • Contrata a un Squarespace Expert

  • Destácate en línea con la ayuda de un diseñador o desarrollador con experiencia.

Modificar el estilo de bloques de formulario