Widerrufsformular mit eigenem CSS anpassen

Mit Custom CSS kannst du das Revoq Widerrufs-Formular optisch an dein Shop-Design anpassen. Das ist hilfreich, wenn dein Shop eine eigene Designsprache hat oder eine Agentur das Formular genauer an Brand-Vorgaben angleichen möchte.

Das Custom CSS gilt global für dein Storefront-Formular. Es ist also nicht an einzelne Sprachen gekoppelt.

Verfügbarkeit

Custom CSS ist ab dem Essential-Plan verfügbar.

• Free / Starter: gesperrt
• Essential: verfügbar
• Professional: verfügbar

Wo du Custom CSS findest

Öffne in Revoq:

App → Formular-Editor → Custom CSS

Dort kannst du dein CSS einfügen, speichern oder wieder leeren.

Das CSS wird auf diese Elemente angewendet:

• Inline-Formular auf deiner Widerrufsseite
• Popup-Formular
• Popup-Trigger als Section Button
• Floating Button
• Mobile-Ansichten über Media Queries

Was du anpassen kannst

Du kannst praktisch alle sichtbaren Formularbereiche gestalten, zum Beispiel:

• Formular-Container
• Hintergrund, Rahmen, Radius und Abstände
• Schriftart, Schriftgröße und Textfarben
• Eingabefelder, Selects und Textareas
• Primäre Submit-Buttons
• Schritt-Pillen, z. B. „1 · Details“
• Status-Chips und Statuszeilen
• Produktzeilen im Artikel-Auswahlschritt
• Erfolgsansicht
• Fehlermeldungen
• Popup-Dialog und Overlay
• Section Trigger Button
• Floating Button, auch speziell auf Mobile

Wichtige Selektoren

Am einfachsten ist es, wenn du zuerst die großen Bereiche anpasst und danach einzelne Details verfeinerst.

Selektoren für Artikel-Auswahl und Status

Diese Selektoren werden vor allem im zweiten Formularschritt relevant, wenn Kundinnen oder Kunden Artikel auswählen können.

Selektoren für Popup, Section Button und Floating Button

Empfohlene CSS-Variablen

Für einfache Brand-Anpassungen kannst du Revoq CSS-Variablen nutzen. Das ist oft stabiler als viele einzelne Klassen zu überschreiben.

.widerruf-form-card {
  --revoq-text-color: #111827;
  --revoq-text-secondary: #64748b;

  --revoq-card-bg: #f7fbf8;
  --revoq-card-border-color: #14532d;
  --revoq-card-border-width: 2px;
  --revoq-card-border-radius: 18px;

  --revoq-input-bg: #ffffff;
  --revoq-input-radius: 10px;

  --revoq-button-bg: #14532d;
  --revoq-button-bg-hover: #166534;
  --revoq-button-border-color: #14532d;
  --revoq-button-text: #ffffff;
}

Für Trigger und Floating Button gibt es eigene Variablen:

.widerruf-trigger-button {
  --revoq-trigger-bg: #14532d;
  --revoq-trigger-bg-hover: #166534;
  --revoq-trigger-text: #ffffff;
  --revoq-trigger-border-color: #14532d;
  --revoq-trigger-radius: 999px;
  --revoq-trigger-font-size: 15px;
}

.widerruf-trigger-button--floating {
  --revoq-floating-bottom: 24px;
  --revoq-floating-side: 20px;
}

Beispiel: Formular an Brand-Farben anpassen

.widerruf-form-card {
  border: 2px solid #14532d;
  background: #f7fbf8;
  padding: 24px;
  border-radius: 18px;
}

.widerruf-primary-button {
  background-color: #14532d;
  border-color: #14532d;
  color: #ffffff;
}

.widerruf-primary-button:hover {
  background-color: #166534;
}

Beispiel: Schriftart und Typografie anpassen

.widerruf-form-card {
  font-family: Inter, Arial, sans-serif;
  color: #111827;
}

.widerruf-form-card__title {
  font-size: 26px;
  font-weight: 750;
}

.widerruf-form__label {
  font-size: 15px;
  font-weight: 700;
}

.widerruf-form__hint {
  font-size: 13px;
}

Beispiel: Schritt-Pillen stylen

.widerruf-form-step-pill {
  border-radius: 8px;
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #3730a3;
}

.widerruf-form-step-pill[aria-current="step"] {
  background: #3730a3;
  border-color: #3730a3;
  color: #ffffff;
}

Beispiel: Status-Chips anpassen

.widerruf-status-chip {
  border-radius: 6px;
  font-size: 12px;
  letter-spacing: 0;
}

.widerruf-status-chip--success {
  background: #dcfce7;
  border-color: #86efac;
  color: #166534;
}

.widerruf-status-chip--warning {
  background: #fef3c7;
  border-color: #fbbf24;
  color: #92400e;
}

Beispiel: Popup breiter machen

.widerruf-popup-modal__dialog {
  width: min(920px, 100%);
}

Beispiel: Floating Button auf Mobile anpassen

@media (max-width: 640px) {
  .widerruf-trigger-button--floating {
    left: 16px;
    right: 16px;
    bottom: 18px;
    width: auto;
    min-height: 54px;
    border-radius: 14px;
    font-size: 15px;
  }
}

Beispiel: Floating Button kompakt anzeigen

@media (max-width: 640px) {
  .widerruf-trigger-button--floating {
    right: 14px;
    left: auto;
    bottom: 14px;
    width: 56px;
    min-width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 999px;
    font-size: 0;
  }

  .widerruf-trigger-button--floating::after {
    content: "↩";
    font-size: 22px;
    line-height: 1;
  }
}

Beispiel: Section Trigger Button anders stylen

.widerruf-trigger-button:not(.widerruf-trigger-button--floating) {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0f172a;
  border-radius: 10px;
  min-height: 48px;
  padding-inline: 22px;
}

Sicherheit und Grenzen

Custom CSS wird serverseitig geprüft. Nicht erlaubt sind:

• HTML-Ausbruch mit <
• @import
• url(...)
• javascript:
• vbscript:
• data:
• expression(...)
• behavior:
• -moz-binding

Das Limit liegt bei 20.000 Zeichen.

Warum dein Theme-CSS nicht betroffen ist

Revoq rendert das Formular in isolierten Storefront-Bereichen. Dein Custom CSS wird in die Revoq Formularoberfläche geladen und nicht als allgemeines Theme-CSS auf der gesamten Seite veröffentlicht.

Das bedeutet:

• dein Theme wird nicht global überschrieben
• andere Bereiche deines Shops werden nicht gestylt
• Inline-Formular und Popup erhalten das CSS separat
• der Floating Button und der Section Trigger werden ebenfalls über die Revoq-Selektoren angesprochen

Hinweise zum Testen

Teste nach dem Speichern am besten:

• Inline-Formular auf Desktop
• Inline-Formular auf Mobile
• Popup-Formular
• Section Trigger Button
• Floating Button links oder rechts
• Floating Button auf Mobile
• Schritt 2 mit Artikel-Auswahl
• Erfolgsansicht nach einem Test-Widerruf

Wenn du CSS wieder entfernen möchtest, öffne den Custom-CSS-Tab und klicke auf CSS leeren.

Aktualisiert am: 07/06/2026