# Personalizar o widget do formulário de inscrição

Por padrão, o widget do formulário de inscrição usa um estilo neutro que funciona na maioria das páginas. Depois de adicionar o [código de incorporação](/pt/product/audience-data-and-segmentation/subscription-forms/create-subscription-forms/#copy-the-embed-code-and-add-it-to-your-site), você pode combiná-lo com a identidade visual do seu site definindo propriedades personalizadas de CSS no elemento pushwoosh-subscribe-widget. Os valores nas tabelas abaixo substituem os padrões.

<Aside type="caution" icon="setting" title="Assistência de um desenvolvedor é necessária">
Você pode precisar da ajuda da sua equipe de desenvolvimento para aplicar essas alterações de estilo do widget em seu site.
</Aside>

## Personalizar cores

| Variável | Descrição | Padrão |
| --- | --- | --- |
| `--esw-primary-color` | Cor primária para botões, links e destaques | `#0E72E5` |
| `--esw-primary-hover` | Cor de hover para elementos primários | `#1A85FF` |
| `--esw-text-color` | Cor principal do texto | `#4B5057` |
| `--esw-text-secondary` | Texto secundário (placeholders, legendas) | `#969CA3` |
| `--esw-background` | Fundo do widget | `#FFFFFF` |
| `--esw-surface-color` | Cor da superfície (hovers, fundo secundário) | `#F7F9FA` |
| `--esw-border-color` | Cor da borda | `#DCE1E5` |
| `--esw-border-color-focus` | Cor da borda no estado de foco | `#0E72E5` |
| `--esw-error-color` | Cor de erro | `#E52E59` |
| `--esw-success-color` | Cor de sucesso | `#479900` |
| `--esw-success-bg` | Fundo da mensagem de sucesso | `#F7F9FA` |

## Tipografia

| Variável | Descrição | Padrão |
| --- | --- | --- |
| `--esw-font-family` | Família da fonte | `Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` |
| `--esw-font-size-base` | Tamanho da fonte base | `14px` |
| `--esw-font-size-title` | Tamanho da fonte do título | `18px` |
| `--esw-font-size-label` | Tamanho da fonte do rótulo do campo | `12px` |
| `--esw-font-size-small` | Texto pequeno (erros, notas) | `12px` |
| `--esw-font-weight-regular` | Peso regular | `400` |
| `--esw-font-weight-medium` | Peso médio | `500` |
| `--esw-font-weight-bold` | Peso negrito | `700` |
| `--esw-line-height-base` | Altura da linha base | `1.4` |
| `--esw-line-height-title` | Altura da linha do título | `1.2` |

## Tamanhos e espaçamento

| Variável | Descrição | Padrão |
| --- | --- | --- |
| `--esw-input-height` | Altura do campo de entrada | `36px` |
| `--esw-button-height` | Altura do botão | `36px` |
| `--esw-spacing-xs` | Espaçamento extra pequeno | `4px` |
| `--esw-spacing-sm` | Espaçamento pequeno | `8px` |
| `--esw-spacing-md` | Espaçamento médio | `16px` |
| `--esw-spacing-lg` | Espaçamento grande | `24px` |
| `--esw-popup-width` | Largura do modal | `380px` |
| `--esw-popup-max-width` | Largura máxima do modal | `90vw` |

## Aparência

| Variável | Descrição | Padrão |
| --- | --- | --- |
| `--esw-border-radius` | Raio do canto para elementos | `4px` |
| `--esw-border-radius-popup` | Raio do canto do modal | `8px` |
| `--esw-shadow-popup` | Sombra da caixa do modal | `0 0 6px rgba(0, 0, 0, 0.06), 0 10px 16px rgba(0, 0, 0, 0.1)` |

## Exemplos

<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 style">

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

</TabItem>
</Tabs>