Anmelden

WordPress-Formulare mit Flow-CSS-Variablen gestalten

Flow rendert jedes Formular in einem Shadow DOM. Die Benutzeroberfläche verwendet Mantine-Komponenten und stellt CSS-Variablen bereit, die Sie passend zu Ihrer Marke überschreiben können.

Es gibt drei Möglichkeiten, das Theme eines Formulars anzupassen:

  • Primärfarbe und eigene Paletten – Im Inspector des Formularblocks können Sie eine Primärfarbe aus der Mantine-Palette auswählen, Primärfarbtöne für den hellen und dunklen Modus definieren sowie eigene Farbnamen und Hex-Werte angeben. Das Plugin erzeugt daraus Paletten mit zehn Abstufungen.

  • Farbmodus – Legen Sie den hellen, dunklen oder automatischen Systemmodus fest. Der aktuelle Modus wird über das Attribut data‑mantine‑color‑scheme an das Shadow DOM übergeben.

  • Theme-Überschreibungen – Der Formularblock enthält das Textfeld Theme Overrides. Dort eingefügtes CSS wird in das Shadow DOM des Formulars eingebunden. Hier überschreiben Sie Mantine-Design-Tokens (--mantine‑…) oder Flow-spezifische Tokens (--flow‑…).

Zusätzlich zu den Assistenten-Tokens stellt Flow eine allgemeine Block-Token-Ebene für die übrigen Formularelemente bereit. Sie bietet eine stabile Überschreibungsoberfläche für Eingaben, Optionsfelder, Kontrollkästchen, Schieberegler, Bewertungen, PIN-Felder, Feldgruppen, einklappbare Blöcke und Aktionsschaltflächen.

Für umfangreichere Anzeige- und Inhaltsblöcke bietet Flow eigene Tokens für Zitate, Markierungen/Hervorhebungen, Badges, Codeblöcke, formatierte Zahlen, Spoiler, Bilder und Einträge in Überlauflisten.

Light-DOM-Tokens für Modals und Galerien​

Flow Modal und Flow Gallery werden nicht im Shadow Root des Formulars gerendert. Überschreibe sie über gewöhnliches Theme- oder Seiten-CSS mit .wps-flow-modal und .wps-flow-gallery, nicht über das Theme-Overrides-Feld eines Formulars.

Nützliche Light-DOM-Tokens:

  • Modal-Rahmen: --wps-flow-modal-panel-background, --wps-flow-modal-content-background, --wps-flow-modal-panel-color, --wps-flow-modal-panel-shadow, --wps-flow-modal-backdrop-background
  • Modal-Bedienelemente: --wps-flow-modal-chrome-background, --wps-flow-modal-chrome-color
  • Galerie: --wps-flow-gallery-stage-background, --wps-flow-gallery-nav-background, --wps-flow-gallery-nav-color, --wps-flow-gallery-meta-color

Die Slot-Wrapper für Kopfbereich, Inhalt und Aktionen des Modals sind bewusst transparent. Die gemeinsame scrollbare Fläche ist .wps-flow-modal__content. Verwenden Sie daher --wps-flow-modal-content-background, wenn Sie einen durchgehenden Modal-Hintergrund möchten, der fixierte Kopf- und Fußbereiche oder die Schließen-Schaltfläche nicht verdeckt. Der Wrapper der Bedienelemente oben rechts bleibt transparent; --wps-flow-modal-chrome-background und --wps-flow-modal-chrome-color gelten für die einzelnen Schaltflächen zum Schließen und für den Vollbildmodus. So bleiben diese über dunklen Medien lesbar und zugleich als getrennte Aktionen erkennbar.

.wps-flow-modal {
  --wps-flow-modal-panel-background: #ffffff;
  --wps-flow-modal-content-background: #ffffff;
  --wps-flow-modal-panel-color: #0f172a;
  --wps-flow-modal-chrome-background: #ffffff;
  --wps-flow-modal-chrome-color: #0f172a;
}

.wps-flow-gallery {
  --wps-flow-gallery-stage-background: #0f172a;
  --wps-flow-gallery-nav-background: rgba(15, 23, 42, 0.82);
  --wps-flow-gallery-nav-color: #ffffff;
  --wps-flow-gallery-meta-color: #e2e8f0;
}

Schnellstart​

Um Schriftarten, Radien und Akzentfarben in allen Flow-Formularen Ihrer Website zu ändern, fügen Sie Folgendes in das Feld Theme Overrides Ihres Formulars ein. Sie können diese Regeln mit dem Selektor .smartcloud-flow-shadow-root auch global im CSS Ihres Themes definieren.

/* Target the flow shadow root */
.smartcloud-flow-shadow-root {
  /* Default text styling */
  --mantine-font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mantine-font-size-md: 16px;
  --mantine-line-height-md: 1.6;

  /* Radius and spacing */
  --mantine-radius-md: 6px;
  --mantine-spacing-md: 1rem;

  /* Primary colour */
  --mantine-color-blue-6: #0ea5e9;
  --mantine-primary-color-filled: var(--mantine-color-blue-filled);

  /* Generic Flow fields */
  --flow-control-radius: 999px;
  --flow-control-border-color: var(--mantine-color-blue-3);
  --flow-submit-bg: var(--mantine-color-blue-filled);
  --flow-submit-color: white;
  --flow-fieldset-border: 1px solid var(--mantine-color-blue-2);
}

/* Wizard specific tweaks */
.flow-wizard-container {
  --flow-wizard-gap: 1.5rem;
  --flow-wizard-border-radius: var(--mantine-radius-md);
}

.flow-wizard-title {
  --flow-wizard-title-size: 1.5rem;
  --flow-wizard-title-weight: 700;
}

.flow-wizard-next-button {
  --flow-wizard-next-bg: var(--mantine-color-blue-filled);
  --flow-wizard-next-color: white;
}

.flow-block__pin {
  --flow-pin-input-size: 3rem;
}

.flow-block__collapse {
  --flow-collapse-toggle-radius: 999px;
}

.flow-block__display-blockquote {
  --flow-blockquote-accent: var(--mantine-color-blue-6);
  --flow-blockquote-bg: color-mix(
    in srgb,
    var(--mantine-color-blue-6) 10%,
    white
  );
}

.flow-block__display-badge {
  --flow-badge-padding: 0.4rem 0.85rem;
}

.flow-block__table {
  --flow-table-header-bg: color-mix(in srgb, #0f172a 6%, white);
  --flow-table-border-color: color-mix(in srgb, #0f172a 14%, white);
}

.flow-block__timeline {
  --flow-timeline-accent: var(--mantine-color-blue-6);
}

.flow-block__overflow-list {
  --flow-overflow-item-bg: var(--mantine-color-blue-0);
}

Fügen Sie dieses CSS in das Feld Theme Overrides ein, um die Änderungen sofort zu sehen. Verwenden Sie eigene Farbnamen und Werte, um das Formular an Ihre Marke anzupassen.

Mantine-Design-Tokens​

Mantine stellt zahlreiche CSS-Variablen für Abstände, Radien, Typografie, Farben, Schatten und Z-Indizes bereit. Flow übernimmt diese Variablen in seinem Shadow DOM. Nützliche Tokens sind unter anderem:

  • Abstände: --mantine-spacing-xs, --mantine-spacing-sm, --mantine-spacing-md, --mantine-spacing-lg, --mantine-spacing-xl.
  • Radien: --mantine-radius-xs, --mantine-radius-sm, --mantine-radius-md, --mantine-radius-lg, --mantine-radius-xl.
  • Schriftarten und Zeilenhöhen: --mantine-font-family, --mantine-font-size-sm, --mantine-font-size-md, --mantine-line-height-sm, --mantine-line-height-md.
  • Schatten: --mantine-shadow-xs, --mantine-shadow-sm, --mantine-shadow-md usw.
  • Farben: --mantine-color-gray-0 … --mantine-color-gray-9, --mantine-color-blue-0 … --mantine-color-blue-9 und weitere benannte Farben. Bei Auswahl einer Primärfarbe werden die Variablen --mantine-primary-color-* automatisch aktualisiert.

Eine vollständige Referenz finden Sie in der Liste der Mantine-CSS-Variablen.

Flow-Assistenten-Tokens​

Mehrstufige Formulare in Flow verwenden eine Assistentenkomponente. Sie können Layout und Farben über --flow‑wizard‑…-Tokens anpassen, die auf das jeweilige Element begrenzt werden. Wichtige Tokens sind:

  • Container: --flow-wizard-gap (Abstand zwischen Abschnitten), --flow-wizard-border-radius, --flow-wizard-padding.
  • Kopfbereich: --flow-wizard-header-spacing, --flow-wizard-title-color, --flow-wizard-title-size, --flow-wizard-title-weight.
  • Fortschritt: --flow-wizard-progress-margin, --flow-wizard-bar-height, --flow-wizard-bar-color, --flow-wizard-bar-bg.
  • Schrittanzeige: --flow-wizard-stepper-gap, --flow-wizard-numbers-gap, --flow-wizard-number-size, --flow-wizard-number-active-bg, --flow-wizard-number-inactive-bg, --flow-wizard-number-active-color, --flow-wizard-number-inactive-color.
  • Schrittinhalt: --flow-wizard-step-gap, --flow-wizard-step-padding, --flow-wizard-step-title-color, --flow-wizard-step-title-size, --flow-wizard-step-title-weight, --flow-wizard-step-desc-color, --flow-wizard-step-desc-size, --flow-wizard-fields-gap.
  • Bedienelemente: --flow-wizard-controls-gap, --flow-wizard-controls-margin, --flow-wizard-controls-padding, --flow-wizard-controls-border-top.
  • Schaltflächen: --flow-wizard-prev-color, --flow-wizard-prev-bg, --flow-wizard-prev-border, --flow-wizard-next-color, --flow-wizard-next-bg.

Definieren Sie diese Variablen im CSS unter Theme Overrides, um das Erscheinungsbild des Assistenten anzupassen. So vergrößern Sie beispielsweise die Schrittnummern und ändern die aktive Farbe:

.flow-wizard-step-number {
  --flow-wizard-number-size: 40px;
  --flow-wizard-number-active-bg: var(--mantine-color-green-6);
  --flow-wizard-number-active-color: white;
}

Flow-Feld-Tokens​

Normale Flow-Blöcke stellen ebenfalls CSS-Variablen bereit. Damit können Sie die Bereiche eines Formulars außerhalb des Assistenten nach demselben tokenbasierten Verfahren gestalten.

  • Allgemeine Felder: --flow-field-gap, --flow-field-padding, --flow-field-radius, --flow-field-bg, --flow-field-border, --flow-field-shadow.
  • Beschriftungen und Meldungen: --flow-field-label-color, --flow-field-label-size, --flow-field-label-weight, --flow-field-description-color, --flow-field-description-size, --flow-field-error-color, --flow-field-error-size, --flow-field-caption-color, --flow-field-caption-size.
  • Eingabeähnliche Bedienelemente: --flow-control-min-height, --flow-control-radius, --flow-control-bg, --flow-control-border-width, --flow-control-border-color, --flow-control-color, --flow-control-placeholder-color, --flow-control-padding-inline, --flow-control-padding-block, --flow-control-focus-border-color, --flow-control-focus-shadow, --flow-control-disabled-opacity.
  • Auswahlbedienelemente: --flow-choice-size, --flow-choice-color, --flow-choice-label-color.
  • Schieberegler: --flow-slider-track-size, --flow-slider-track-bg, --flow-slider-bar-color, --flow-slider-thumb-size, --flow-slider-thumb-bg, --flow-slider-thumb-border.
  • PIN und Bewertung: --flow-pin-gap, --flow-pin-input-size, --flow-rating-size, --flow-rating-active-color, --flow-rating-inactive-color.
  • Feldgruppen und einklappbare Bereiche: --flow-fieldset-border, --flow-fieldset-radius, --flow-fieldset-padding, --flow-fieldset-legend-color, --flow-collapse-toggle-bg, --flow-collapse-toggle-border, --flow-collapse-toggle-radius, --flow-collapse-toggle-padding, --flow-collapse-toggle-color.
  • Aktionsschaltflächen: --flow-action-button-radius, --flow-action-button-padding, --flow-submit-bg, --flow-submit-color, --flow-submit-border, --flow-save-draft-bg, --flow-save-draft-color, --flow-save-draft-border.
  • Anzeige- und Inhaltsblöcke: --flow-display-text-color, --flow-display-text-weight, --flow-display-text-line-height, --flow-display-title-color, --flow-display-title-weight, --flow-display-title-line-height, --flow-display-title-letter-spacing, --flow-blockquote-bg, --flow-blockquote-accent, --flow-blockquote-color, --flow-blockquote-radius, --flow-blockquote-padding, --flow-blockquote-gap, --flow-blockquote-border-width, --flow-blockquote-icon-size, --flow-blockquote-text-style, --flow-blockquote-cite-color, --flow-blockquote-cite-size, --flow-mark-bg, --flow-mark-color, --flow-mark-radius, --flow-mark-padding, --flow-highlight-bg, --flow-highlight-color, --flow-highlight-radius, --flow-highlight-padding, --flow-badge-padding, --flow-badge-circle-padding, --flow-badge-font-size, --flow-badge-font-weight, --flow-badge-letter-spacing, --flow-badge-text-transform, --flow-code-inline-bg, --flow-code-inline-color, --flow-code-block-bg, --flow-code-block-color, --flow-code-radius, --flow-code-padding, --flow-code-block-padding, --flow-number-color, --flow-number-weight, --flow-number-font-variant, --flow-spoiler-toggle-color, --flow-spoiler-content-color, --flow-image-radius, --flow-image-caption-color, --flow-image-caption-size, --flow-list-color, --flow-list-marker-color, --flow-list-padding-start, --flow-list-item-gap, --flow-table-color, --flow-table-border-color, --flow-table-cell-border-color, --flow-table-striped-bg, --flow-table-header-bg, --flow-table-header-color, --flow-table-header-weight, --flow-table-cell-color, --flow-table-caption-color, --flow-table-caption-padding-bottom, --flow-table-cell-padding-inline, --flow-table-cell-padding-block, --flow-timeline-color, --flow-timeline-gap, --flow-timeline-item-gap, --flow-timeline-content-gap, --flow-timeline-accent, --flow-timeline-line-opacity, --flow-timeline-bullet-color, --flow-timeline-bullet-weight, --flow-timeline-title-color, --flow-timeline-title-weight, --flow-overflow-item-bg, --flow-overflow-item-border, --flow-overflow-item-color, --flow-overflow-item-gap, --flow-overflow-item-radius, --flow-overflow-item-padding, --flow-overflow-item-shadow, --flow-overflow-summary-cursor, --flow-overflow-summary-font-weight, --flow-overflow-summary-letter-spacing.
  • KI-Vorschläge: --flow-ai-suggestions-border-thickness, --flow-ai-suggestions-border-stops, --flow-ai-suggestions-border-speed.
  • Übermittlungsmetadaten und Erfolgsansichtshelfer: --flow-submission-meta-bg, --flow-submission-meta-border, --flow-submission-meta-radius, --flow-submission-meta-padding, --flow-submission-meta-gap, --flow-submission-meta-label-color, --flow-submission-meta-value-color, --flow-submission-meta-value-font, --flow-submission-meta-copy-bg, --flow-submission-meta-copy-border, --flow-submission-meta-copy-color, --flow-submission-meta-shadow.

Diese Tokens dienen als Theme-Standardwerte. Legt ein Block im Editor ausdrücklich Farbe, Radius oder ähnliche Eigenschaften fest, kann diese blockbezogene Einstellung weiterhin Vorrang vor dem Token haben.

Um Überschreibungen auf einen bestimmten Blocktyp zu begrenzen, fügt Flow jedem Laufzeitblock stabile Klassen hinzu:

  • Eingabeähnliche Blöcke: .flow-block__text, .flow-block__textarea, .flow-block__select, .flow-block__number, .flow-block__password, .flow-block__date
  • Auswahlblöcke: .flow-block__checkbox, .flow-block__radio, .flow-block__switch
  • Weitere Felder: .flow-block__pin, .flow-block__slider, .flow-block__rangeslider, .flow-block__rating, .flow-block__file, .flow-block__tags
  • Container und Aktionen: .flow-block__fieldset, .flow-block__collapse, .flow-block__submit, .flow-block__save-draft
  • Anzeige- und Inhaltsblöcke: .flow-block__display-text, .flow-block__display-title, .flow-block__display-blockquote, .flow-block__display-mark, .flow-block__display-highlight, .flow-block__display-badge, .flow-block__display-code, .flow-block__display-number-formatter, .flow-block__display-spoiler, .flow-block__display-image, .flow-block__list, .flow-block__list-item, .flow-block__table, .flow-block__table-row, .flow-block__table-th, .flow-block__table-td, .flow-block__timeline, .flow-block__timeline-item, .flow-block__overflow-list, .flow-block__overflow-list-item
  • KI- und Antwortoberflächen: .flow-ai-suggestions, .flow-ai-suggestions-border, .flow-submission-meta

Diese .flow-block__*-Wrapper bilden die stabile Gestaltungsoberfläche. Das interaktive Mantine-Bedienelement oder die Schaltfläche liegt häufig eine Ebene tiefer und verwendet dort das --flow-*-Token. Setzen Sie Tokens daher bevorzugt auf dem Wrapper, statt interne Hilfsklassen anzusprechen.

Erfolgsansichten verwenden die Gestaltungsoberflächen für Aktionsschaltflächen und Übermittlungsmetadaten wieder. Die meisten Bestätigungsansichten lassen sich daher über die Tokens der Aktionsschaltflächen und Überschreibungen für .flow-submission-meta gestalten, ohne eigene Variablen nur für Erfolgsansichten.

So geben Sie zum Beispiel nur der Absenden-Schaltfläche und den PIN-Feldern einen stärkeren Markenstil:

.flow-block__submit {
  --flow-submit-bg: var(--mantine-color-green-6);
  --flow-submit-color: white;
}

.flow-block__pin {
  --flow-pin-input-size: 3rem;
  --flow-control-radius: 12px;
}

Kopierfertige Theme-Rezepte​

Diese Voreinstellungen dienen als Ausgangspunkt für Kundenprojekte. Fügen Sie eine davon in das Feld Theme Overrides ein und passe anschließend Farben und Abstandstokens nach Bedarf an.

Abgerundetes SaaS-Design​

Verwenden Sie dieses Rezept für ein weiches, modernes Erscheinungsbild wie in einer App, mit abgerundeten Bedienelementen und einer stärker hervorgehobenen Primäraktion.

.smartcloud-flow-shadow-root {
  --mantine-font-family: Inter, system-ui, sans-serif;
  --mantine-radius-md: 14px;
  --mantine-spacing-md: 1rem;
  --mantine-color-blue-6: #2563eb;
  --mantine-primary-color-filled: var(--mantine-color-blue-filled);

  --flow-control-radius: 14px;
  --flow-control-border-color: var(--mantine-color-blue-2);
  --flow-control-focus-border-color: var(--mantine-color-blue-5);
  --flow-control-focus-shadow: 0 0 0 3px rgb(37 99 235 / 0.12);

  --flow-submit-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
  --flow-submit-color: white;
  --flow-action-button-radius: 14px;

  --flow-wizard-number-active-bg: #2563eb;
  --flow-wizard-next-bg: linear-gradient(135deg, #2563eb, #1d4ed8);
}

Klinisch-minimalistisch​

Verwenden Sie dieses Rezept für Formulare im Gesundheitswesen, in der Rechtsberatung oder Verwaltung, bei denen Klarheit wichtiger als eine ausgeprägte Markenwirkung ist.

.smartcloud-flow-shadow-root {
  --mantine-font-family: system-ui, sans-serif;
  --mantine-radius-md: 6px;
  --mantine-spacing-md: 0.875rem;

  --flow-field-gap: 0.375rem;
  --flow-control-radius: 6px;
  --flow-control-bg: #ffffff;
  --flow-control-border-color: #cbd5e1;
  --flow-control-focus-border-color: #0f172a;
  --flow-control-focus-shadow: 0 0 0 1px #0f172a;

  --flow-field-description-color: #475569;
  --flow-field-error-color: #b91c1c;

  --flow-fieldset-border: 1px solid #cbd5e1;
  --flow-collapse-toggle-border: 1px solid #cbd5e1;

  --flow-submit-bg: #0f172a;
  --flow-submit-color: #ffffff;
  --flow-save-draft-border: 1px solid #cbd5e1;
}

Markante Marke​

Verwenden Sie dieses Rezept, wenn das Formular die Kundenmarke sichtbar tragen soll, statt sich in die Seitenoberfläche einzufügen.

.smartcloud-flow-shadow-root {
  --mantine-font-family: "Space Grotesk", system-ui, sans-serif;
  --mantine-radius-md: 10px;
  --mantine-color-pink-6: #e11d48;
  --mantine-primary-color-filled: var(--mantine-color-pink-filled);

  --flow-control-radius: 10px;
  --flow-control-border-width: 2px;
  --flow-control-border-color: #fecdd3;
  --flow-control-focus-border-color: #e11d48;
  --flow-control-focus-shadow: 0 0 0 3px rgb(225 29 72 / 0.18);

  --flow-choice-color: #e11d48;
  --flow-slider-bar-color: #e11d48;
  --flow-slider-thumb-border: 2px solid #e11d48;
  --flow-rating-active-color: #e11d48;

  --flow-submit-bg: #e11d48;
  --flow-submit-color: #ffffff;

  --flow-wizard-number-active-bg: #e11d48;
  --flow-wizard-next-bg: #e11d48;
}

Dunkler Kontrast​

Verwenden Sie dieses Rezept für Formulare in einem dunklen Layout, die stärkeren Kontrast benötigen, ohne jede Komponente einzeln neu zu gestalten.

.smartcloud-flow-shadow-root[data-mantine-color-scheme="dark"] {
  --mantine-color-body: #0f172a;
  --mantine-color-text: #e5e7eb;

  --flow-field-description-color: #94a3b8;
  --flow-control-bg: #111827;
  --flow-control-color: #f8fafc;
  --flow-control-border-color: #334155;
  --flow-control-placeholder-color: #64748b;
  --flow-control-focus-border-color: #38bdf8;
  --flow-control-focus-shadow: 0 0 0 3px rgb(56 189 248 / 0.18);

  --flow-fieldset-border: 1px solid #334155;
  --flow-collapse-toggle-bg: #111827;
  --flow-collapse-toggle-border: 1px solid #334155;

  --flow-submit-bg: #38bdf8;
  --flow-submit-color: #0f172a;
  --flow-save-draft-color: #e5e7eb;
  --flow-save-draft-border: 1px solid #475569;

  --flow-wizard-bar-bg: #334155;
  --flow-wizard-number-inactive-bg: #1e293b;
  --flow-wizard-number-inactive-color: #cbd5e1;
  --flow-wizard-next-bg: #38bdf8;
  --flow-wizard-next-color: #0f172a;
}

Empfehlungen​

  • Begrenze Ihre Theme-Überschreibungen auf .smartcloud-flow-shadow-root, damit sie nur Flow-Oberflächen beeinflussen.
  • Verwenden Sie Mantine-Variablen, damit Farben und Abstände im hellen und dunklen Modus einheitlich bleiben.
  • Wählen Sie beim Definieren eigener Farben über das Feld Colours des Formularblocks eindeutige Namen wie brand und verwenden Sie sie in Ihren Überschreibungen (--mantine-color-brand-6).
  • Teste Ihre Überschreibungen im hellen und dunklen Modus. Verwenden Sie das Attribut data-mantine-color-scheme auf .smartcloud-flow-shadow-root, um den Modus festzulegen oder zu erkennen.