Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

CSS Variables Reference

This page is auto-generated from the source code.

Form CSS Variables

Use these variables to customize form appearance:

VariableDescription
--cf-bg-colorPage background color
--cf-border-colorInput border color
--cf-border-radiusBorder radius
--cf-font-familyFont family
--cf-font-sizeBase font size
--cf-form-bgForm container background
--cf-input-paddingInput padding
--cf-primary-colorPrimary/button color
--cf-primary-hoverPrimary hover color
--cf-text-colorMain text color

Calendar CSS Variables

Use these variables to customize calendar and booking views:

VariableDescription
--cal-bgBackground color
--cal-border-radiusBorder radius
--cal-fontFont family
--cal-primaryPrimary/accent color
--cal-textText color

Usage Examples

Override via Query Parameter

<iframe src=".../f/contact?css=--cf-primary-color:green"></iframe>

Override in Page CSS (HTMX)

:root {
    --cf-primary-color: #6366f1;
    --cal-primary: #6366f1;
}

Override in Admin Settings

  1. Open form/calendar editor
  2. Go to Styling tab
  3. Add Custom CSS:
:root {
    --cf-primary-color: #your-color;
}