Apariencia

El formulario embebible hereda tu marca de dos formas complementarias: con un tema base que configuras en el panel y, si necesitas más control, con el CSS de tu propia página. El formulario es fluido por defecto, así que encaja en cualquier contenedor.

Tema base desde el panel

En el editor del formulario tienes una pantalla de Apariencia con una vista previa a la izquierda y los controles a la derecha. Ajustas color de acento, color de texto, fondo y botón, borde, radio de las esquinas y ancho máximo, y ves el efecto en tiempo real sobre una maqueta del formulario.

Por defecto, el color de acento del formulario toma el color primario de tu marca, de modo que un formulario recién creado ya se parece a tu sitio sin tocar nada. Cuando estés conforme, guarda los cambios.

Theming desde tu CSS (el host gana)

Si tu página ya tiene un sistema de diseño, puedes estilar el formulario desde fuera. El formulario expone variables CSS (--lectico-*) y partes (::part()), y está diseñado para que el CSS de tu página siempre tenga prioridad sobre el tema configurado en el panel.

lectico-form {
  --lectico-accent: #C8803F;     /* botón, foco, asterisco de obligatorio */
  --lectico-radius: 12px;        /* radio de la tarjeta */
  --lectico-font: "Inter", sans-serif;
  --lectico-max-width: 100%;     /* fluido (por defecto) */
}
lectico-form::part(submit) { letter-spacing: .02em; }
lectico-form::part(input)  { background: #faf7f2; }

• Variables CSS (--lectico-accent, --lectico-text, --lectico-button-bg, --lectico-radius, --lectico-max-width, --lectico-font...) — ajustan colores, tipografía, bordes y ancho.
• ::part(...) — da acceso directo a elementos internos del formulario (form, field, label, input, select, submit, footer, success, error...) para estilos finos.

Ancho fluido

El formulario ocupa el 100 % de su contenedor por defecto y limita su ancho con --lectico-max-width. Si quieres que no se quede pegado a la izquierda de un contenedor ancho, simplemente déjalo fluido o ajusta su max-width. También puedes fijar un ancho concreto con el atributo width del embed: acepta fluid (por defecto, equivale a full / 100%), un número como 480 o una longitud CSS (640px, 48rem).

Modo "bare" (sin tarjeta)

Si tu página ya aporta el contenedor visual (fondo, borde, sombra), usa el modo bare para que el formulario no pinte su propia tarjeta y evites el efecto de "dos tarjetas apiladas":

<lectico-form api-key="…" form-id="…" appearance="bare"></lectico-form>

Quita fondo, sombra, radio y padding propios; tu página aporta el marco y, si quieres, vuelves a añadir cualquier detalle con las variables CSS.

Referencia técnica completa

Esta página describe la apariencia a nivel conceptual. El listado completo de variables CSS, todas las ::part(), los valores de appearance y los ejemplos detallados están en:

Próximos pasos