# Personalizar el widget del formulario de suscripción

Por defecto, el widget del formulario de suscripción utiliza un estilo neutro que funciona en la mayoría de las páginas. Después de agregar el [código de inserción](/es/product/audience-data-and-segmentation/subscription-forms/create-subscription-forms/#copy-the-embed-code-and-add-it-to-your-site), puede hacerlo coincidir con la identidad visual de su sitio estableciendo propiedades personalizadas de CSS en el elemento `pushwoosh-subscribe-widget`. Los valores en las tablas a continuación reemplazan los predeterminados.

<Aside type="caution" icon="setting" title="Se necesita asistencia de un desarrollador">
Es posible que necesite la ayuda de su equipo de desarrollo para aplicar estos cambios de estilo del widget en su sitio web.
</Aside>

## Personalizar colores

| Variable | Descripción | Predeterminado |
| --- | --- | --- |
| `--esw-primary-color` | Color primario para botones, enlaces y acentos | `#0E72E5` |
| `--esw-primary-hover` | Color de los elementos primarios al pasar el cursor | `#1A85FF` |
| `--esw-text-color` | Color del texto principal | `#4B5057` |
| `--esw-text-secondary` | Texto secundario (placeholders, leyendas) | `#969CA3` |
| `--esw-background` | Fondo del widget | `#FFFFFF` |
| `--esw-surface-color` | Color de la superficie (al pasar el cursor, fondo secundario) | `#F7F9FA` |
| `--esw-border-color` | Color del borde | `#DCE1E5` |
| `--esw-border-color-focus` | Color del borde en estado de foco | `#0E72E5` |
| `--esw-error-color` | Color de error | `#E52E59` |
| `--esw-success-color` | Color de éxito | `#479900` |
| `--esw-success-bg` | Fondo del mensaje de éxito | `#F7F9FA` |

## Tipografía

| Variable | Descripción | Predeterminado |
| --- | --- | --- |
| `--esw-font-family` | Familia de fuentes | `Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` |
| `--esw-font-size-base` | Tamaño de fuente base | `14px` |
| `--esw-font-size-title` | Tamaño de fuente del título | `18px` |
| `--esw-font-size-label` | Tamaño de fuente de la etiqueta del campo | `12px` |
| `--esw-font-size-small` | Texto pequeño (errores, notas) | `12px` |
| `--esw-font-weight-regular` | Grosor regular | `400` |
| `--esw-font-weight-medium` | Grosor medio | `500` |
| `--esw-font-weight-bold` | Grosor negrita | `700` |
| `--esw-line-height-base` | Altura de línea base | `1.4` |
| `--esw-line-height-title` | Altura de línea del título | `1.2` |

## Tamaños y espaciado

| Variable | Descripción | Predeterminado |
| --- | --- | --- |
| `--esw-input-height` | Altura del campo de entrada | `36px` |
| `--esw-button-height` | Altura del botón | `36px` |
| `--esw-spacing-xs` | Espaciado extra pequeño | `4px` |
| `--esw-spacing-sm` | Espaciado pequeño | `8px` |
| `--esw-spacing-md` | Espaciado mediano | `16px` |
| `--esw-spacing-lg` | Espaciado grande | `24px` |
| `--esw-popup-width` | Ancho del modal | `380px` |
| `--esw-popup-max-width` | Ancho máximo del modal | `90vw` |

## Apariencia

| Variable | Descripción | Predeterminado |
| --- | --- | --- |
| `--esw-border-radius` | Radio de esquina para los elementos | `4px` |
| `--esw-border-radius-popup` | Radio de esquina del modal | `8px` |
| `--esw-shadow-popup` | Sombra de la caja del modal | `0 0 6px rgba(0, 0, 0, 0.06), 0 10px 16px rgba(0, 0, 0, 0.1)` |

## Ejemplos

<Tabs>
<TabItem label="CSS">

```css
pushwoosh-subscribe-widget {
  --esw-primary-color: #ff6b6b;
  --esw-border-radius: 12px;
  --esw-font-family: "Inter", sans-serif;
}
```

</TabItem>
<TabItem label="Atributo de estilo">

```html
<pushwoosh-subscribe-widget
  formCode="YOUR_FORM_CODE"
  style="--esw-primary-color: #ff6b6b; --esw-border-radius: 12px;"
></pushwoosh-subscribe-widget>
```

</TabItem>
</Tabs>