> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://revoq.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Customize the Withdrawal Form with CSS

**With Custom CSS, you can adjust the visual design of the Revoq withdrawal form to match your store. This is useful for brands with a distinct design system or agencies customizing stores for clients.**

Custom CSS applies globally to the storefront form. It is not configured separately per language.

For a smaller theme-level CSS example, see also: [Highlight the footer link to your withdrawal page](https://revoq.crisp.help/en/article/highlight-the-footer-link-to-your-withdrawal-page-ya505x/)

## Availability

Custom CSS is available from the Essential plan.

* Free / Starter: locked
* Essential: available
* Professional: available

|| If you later switch to a plan without the Form Editor, your saved CSS remains stored in Revoq but is no longer published to the storefront.

## Where to find Custom CSS

Open Revoq:

**App → Form Editor → Custom CSS**

There you can add, save, or clear your CSS.

The CSS applies to:

* Inline form on your withdrawal page
* Popup form
* Popup trigger as a section button
* Floating button
* Mobile layouts through media queries

## What you can customize

You can customize most visible form areas, for example:

* Form container
* Background, border, radius, and spacing
* Font family, font size, and text colors
* Inputs, selects, and text areas
* Primary submit buttons
* Step pills, for example “1 · Details”
* Status chips and status lines
* Product rows in the item selection step
* Success state
* Error messages
* Popup dialog and overlay
* Section trigger button
* Floating button, including mobile-specific styling

| Use scoped Revoq selectors such as `.widerruf-form-card` or `.widerruf-trigger-button--floating` so your CSS stays targeted.

## Important selectors

The easiest approach is to style the larger areas first, then refine individual details.

![](https://storage.crisp.chat/users/helpdesk/website/-/9/d/0/a/9d0aebb43b89f800/chatgpt-image-7-juni-2026-1743_anq1h0.png =1038xauto)


| Selector | What it customizes |
| ---- |
| `.widerruf-form-card` | Outer form container: background, border, radius, shadow, padding, and max width |
| `.widerruf-form-card__header` | Form header area, mainly in the popup |
| `.widerruf-form-card__title` | Form title, for example “Withdrawal form” |
| `.widerruf-form` | Inner form layout, such as spacing between sections |
| `.widerruf-form-steps` | Step indicator container |
| `.widerruf-form-step-pill` | Individual step pills, for example “1 · Details” |
| `.widerruf-form-step-pill[aria-current="step"]` | Currently active step pill |
| `.widerruf-form__field` | Individual field group including label, input, and hint text |
| `.widerruf-form__label` | Field labels such as name, email, or order number |
| `.widerruf-form__hint` | Small helper text below fields |
| `.widerruf-form__input` | Inputs, selects, and text areas |
| `.widerruf-required` | Required-field asterisk |
| `.widerruf-primary-button` | Primary continue/submit button in the form |
| `.widerruf-primary-button:hover` | Hover state of the primary button |
| `.widerruf-button--link` | Secondary link-style buttons, such as back |
| `.widerruf-form__privacy-notice` | Privacy notice in the form |
| `.widerruf-form__error` | Form error messages |
| `.widerruf-form__success` | Success area after submitting a withdrawal |
| `.widerruf-form__success-icon` | Icon in the success area |
| `.widerruf-form__success-title` | Title in the success area |

### Selectors for item selection and status

These selectors are especially relevant in the second form step, when customers can select items.
![](https://storage.crisp.chat/users/helpdesk/website/-/9/d/0/a/9d0aebb43b89f800/chatgpt-image-7-juni-2026-1749_8i3u3t.png =1066xauto)


| Selector | What it customizes |
| ---- |
| `.widerruf-form-statusline` | Status line above item selection |
| `.widerruf-form-statusline__badge` | Badge showing selected item count |
| `.widerruf-status-chip` | General status chip |
| `.widerruf-status-chip--success` | Success chip |
| `.widerruf-status-chip--warning` | Warning chip |
| `.widerruf-status-chip--neutral` | Neutral status chip |
| `.widerruf-items` | Item list |
| `.widerruf-item` | Individual item row |
| `.widerruf-item.is-excluded` | Item that cannot be withdrawn |
| `.widerruf-item__checkbox` | Item selection checkbox |
| `.widerruf-item__media` | Product image container |
| `.widerruf-item__image` | Product image |
| `.widerruf-item__title` | Product title |
| `.widerruf-item__meta` | Product metadata |
| `.widerruf-item__notice` | Notice text for excluded items |
| `.widerruf-item__quantity-button` | Plus/minus quantity buttons |
| `.widerruf-item__quantity-input` | Quantity input |

### Selectors for popup, section button, and floating button

| Selector | What it customizes |
| ---- |
| `.widerruf-popup-modal` | Full popup overlay |
| `.widerruf-popup-modal.is-open` | Open popup state |
| `.widerruf-popup-modal__backdrop` | Background area behind the popup |
| `.widerruf-popup-modal__dialog` | Popup dialog: width, position, max height |
| `.widerruf-popup-modal__close` | Popup close button |
| `.widerruf-trigger-button` | Popup trigger, both section button and floating button |
| `.widerruf-trigger-button:hover` | Trigger hover state |
| `.widerruf-trigger-button--full` | Full-width trigger |
| `.widerruf-trigger-button--floating` | Floating button in general |
| `.widerruf-trigger-button--floating-left` | Floating button when positioned left |
| `.widerruf-trigger-button--floating-right` | Floating button when positioned right |

| To style only the section button, use `.widerruf-trigger-button:not(.widerruf-trigger-button--floating)`. To style only the floating button, use `.widerruf-trigger-button--floating`.

## Recommended CSS variables

For simple brand adjustments, use Revoq CSS variables. This is often more stable than overriding many individual classes.

```css
.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;
}
```

Triggers and the floating button have their own variables:

```css
.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;
}
```

## Example: Match the form to your brand colors

```css
.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;
}
```

## Example: Adjust font and typography

```css
.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;
}
```

|| External fonts cannot be loaded through Custom CSS using `@import` or `url(...)`. Use a font already loaded by your theme, or a system font.

## Example: Style the step pills

```css
.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;
}
```

## Example: Customize status chips

```css
.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;
}
```

## Example: Make the popup wider

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

## Example: Adjust the floating button on mobile

```css
@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;
  }
}
```

## Example: Show a compact floating button on mobile

```css
@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;
  }
}
```

## Example: Style the section trigger button

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

## Security and limits

Custom CSS is validated server-side. The following are not allowed:

* HTML breakouts using `<`
* `@import`
* `url(...)`
* `javascript:`
* `vbscript:`
* `data:`
* `expression(...)`
* `behavior:`
* `-moz-binding`

The limit is 20,000 characters.

||| Do not hide required fields, legal notices, error messages, honeypot fields, or submit buttons. CSS should adjust the design, not change the form logic.

## Why your theme CSS is not affected

Revoq renders the form in isolated storefront areas. Your Custom CSS is loaded into the Revoq form UI and is not published as general theme CSS across the whole page.

This means:

* your theme is not overwritten globally
* other areas of your store are not styled
* the inline form and popup receive the CSS separately
* the floating button and section trigger are targeted through Revoq selectors

## What to test after saving

After saving Custom CSS, test:

* Inline form on desktop
* Inline form on mobile
* Popup form
* Section trigger button
* Floating button on the left or right
* Floating button on mobile
* Step 2 with item selection
* Success state after a test withdrawal

To remove your CSS, open the Custom CSS tab and click **Clear CSS**.