# Das Widget für das Anmeldeformular anpassen

Standardmäßig verwendet das Widget für das Anmeldeformular einen neutralen Stil, der auf den meisten Seiten funktioniert. Nachdem Sie den [Einbettungscode](/de/product/audience-data-and-segmentation/subscription-forms/create-subscription-forms/#copy-the-embed-code-and-add-it-to-your-site) hinzugefügt haben, können Sie es an die visuelle Identität Ihrer Website anpassen, indem Sie benutzerdefinierte CSS-Eigenschaften für das Element pushwoosh-subscribe-widget festlegen. Die Werte in den folgenden Tabellen ersetzen die Standardwerte.

<Aside type="caution" icon="setting" title="Hilfe von Entwicklern erforderlich">
Möglicherweise benötigen Sie die Unterstützung Ihres Entwicklungsteams, um diese Stiländerungen am Widget auf Ihrer Website anzuwenden.
</Aside>

## Farben anpassen

| Variable | Beschreibung | Standard |
| --- | --- | --- |
| `--esw-primary-color` | Primärfarbe für Schaltflächen, Links und Akzente | `#0E72E5` |
| `--esw-primary-hover` | Hover-Farbe für primäre Elemente | `#1A85FF` |
| `--esw-text-color` | Haupttextfarbe | `#4B5057` |
| `--esw-text-secondary` | Sekundärtext (Platzhalter, Beschriftungen) | `#969CA3` |
| `--esw-background` | Widget-Hintergrund | `#FFFFFF` |
| `--esw-surface-color` | Oberflächenfarbe (Hover, sekundärer Hintergrund) | `#F7F9FA` |
| `--esw-border-color` | Rahmenfarbe | `#DCE1E5` |
| `--esw-border-color-focus` | Rahmenfarbe im Fokus-Zustand | `#0E72E5` |
| `--esw-error-color` | Fehlerfarbe | `#E52E59` |
| `--esw-success-color` | Erfolgsfarbe | `#479900` |
| `--esw-success-bg` | Hintergrund für Erfolgsmeldungen | `#F7F9FA` |

## Typografie

| Variable | Beschreibung | Standard |
| --- | --- | --- |
| `--esw-font-family` | Schriftfamilie | `Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` |
| `--esw-font-size-base` | Basisschriftgröße | `14px` |
| `--esw-font-size-title` | Schriftgröße des Titels | `18px` |
| `--esw-font-size-label` | Schriftgröße der Feldbezeichnung | `12px` |
| `--esw-font-size-small` | Kleiner Text (Fehler, Hinweise) | `12px` |
| `--esw-font-weight-regular` | Normale Schriftstärke | `400` |
| `--esw-font-weight-medium` | Mittlere Schriftstärke | `500` |
| `--esw-font-weight-bold` | Fette Schriftstärke | `700` |
| `--esw-line-height-base` | Basiszeilenhöhe | `1.4` |
| `--esw-line-height-title` | Zeilenhöhe des Titels | `1.2` |

## Größen und Abstände

| Variable | Beschreibung | Standard |
| --- | --- | --- |
| `--esw-input-height` | Höhe des Eingabefeldes | `36px` |
| `--esw-button-height` | Höhe der Schaltfläche | `36px` |
| `--esw-spacing-xs` | Extra kleiner Abstand | `4px` |
| `--esw-spacing-sm` | Kleiner Abstand | `8px` |
| `--esw-spacing-md` | Mittlerer Abstand | `16px` |
| `--esw-spacing-lg` | Großer Abstand | `24px` |
| `--esw-popup-width` | Breite des Modals | `380px` |
| `--esw-popup-max-width` | Maximale Breite des Modals | `90vw` |

## Erscheinungsbild

| Variable | Beschreibung | Standard |
| --- | --- | --- |
| `--esw-border-radius` | Eckenradius für Elemente | `4px` |
| `--esw-border-radius-popup` | Eckenradius des Modals | `8px` |
| `--esw-shadow-popup` | Box-Schatten des Modals | `0 0 6px rgba(0, 0, 0, 0.06), 0 10px 16px rgba(0, 0, 0, 0.1)` |

## Beispiele

<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="Style-Attribut">

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

</TabItem>
</Tabs>