Styling your forms with custom CSS

Describe what you want in plain words — "make the appointment type blocks square instead of wide", "change font to Poppins and make the buttons dark green" — and it writes the CSS, checks which elements each rule would land on, and saves it to the form.

It is usually faster than writing the CSS by hand, and it knows the selectors on this page. If something it does isn't quite right, tell it what looks wrong and it will adjust.

The rest of this guide is for when you want to write the CSS yourself, or read and tweak what the Assistant produced.

Custom CSS lets you change anything about how your form looks that the Styles panel doesn't already cover: the shape and spacing of blocks, how times are laid out, a different font, a card treatment on class listings. It applies to the public form your clients see.

Open your form, then Styles → Advanced → Custom CSS.

The box highlights CSS as you type and saves on its own a moment after you stop. What you type is kept exactly as written; a checked copy is what gets served to clients. If anything was removed for safety it is listed underneath the box, so nothing disappears without telling you.

The Design tab beside the editor shows your CSS applied as you type, so you can work against a live preview. A few things don't appear there because they only exist on the real form: the Next and Submit buttons, the thank-you step, and anything that depends on a client moving through the form step by step. Everything else previews as it will look.

There is a 32,000 character limit.

If you inspect a Breely form you will see class names like mb-4, text-gray-700 or choose-block. Don't style those. They are internal, they change whenever we touch that part of the product, and your CSS will quietly stop working one day.

Instead, target the data-breely-* attributes. These are a published contract: once one ships, we keep emitting it. Everything listed in this guide is one of them.

A rule looks like this:

There are four kinds of hook, and you combine them to say how broadly a rule should apply:

So the same part can be styled everywhere, or in one place only:

This matters more than it looks. A part like selection-block is shared by appointment types, staff, add-ons, packages and gift certificates — so if you only want to change one of them, you have to name the question type or the question.

All of these are used as [data-breely-part='name'].

Questions also carry data-breely-required, data-breely-answered and data-breely-error while that state applies, and option carries data-breely-selected when picked.

Shared by appointment types, staff, add-ons, packages and gift certificates — name the question type to reach just one.

The dates inside the calendar are the one exception to the attribute rule — the calendar only accepts class names, so dates use classes:

You usually don't need the table above. While the Custom CSS box is open, hovering anything in the Design tab outlines it and shows the selector that reaches it.

Pick an element goes further: click it, then click anything on the form, and an empty rule for that thing is dropped in at your cursor, ready to fill in. The panel slides out of the way while you pick so you can see the whole form, and comes back with the new rule in place. Press Escape to stop without adding anything.

Above the box it also lists every selector that reaches what you picked — usually three:

The broad one is what gets inserted. Copy one of the narrower ones instead if the rule is catching more than you meant.

Before you start overriding individual rules, try the theme variables. Most restyling is a colour or a size, and those are set once on the form root:

Overriding one of these replaces just that value and leaves everything derived from it consistent, which is much less work than chasing each element. You can also use them in your own rules — border-color: var(--breely-color) keeps a custom border in step with the rest of the theme.

You can use any font on Google Fonts. Import it, then use it:

fonts.googleapis.com is the only address an @import may point at, and it has to be https. An import pointing anywhere else is removed.

You don't need to put the @import at the top — it is moved there for you, so it works wherever you paste it.

@font-face does not work. Self-hosted and third-party font files are not allowed, so a font you have licensed and uploaded elsewhere can't be used here. Use the Google Fonts import instead, and always name a fallback (sans-serif, serif) after your font so text still renders if the font fails to load.

Every rule you write is automatically rewritten to sit inside the form, under a wrapper called .breely-form. You don't have to do anything to make that happen — write selectors however you like.

So this:

is served as this:

Two consequences worth knowing:

The wrapper itself carries attributes you can style against:

Your CSS is checked before it is served and for security reasons some rules may be removed. Anything removed is listed under the editor. The rest of your CSS still applies.

Two at-rules deserve their own warning. @layer, @container and @scope are not supported, and including one means none of your CSS is applied — not just that rule. If your styling suddenly does nothing at all, check for one of these first.

@media, @supports and @keyframes all work normally.

They just have to be hosted by us. Upload the image to the form first, then point at the /view-image/... address it is given:

A data:image/... URI works too, if you'd rather inline a small image.

The default blocks are wide rectangles. This makes them square tiles, two across:

Naming the question type matters here — without it, add-ons and packages become squares too.

Use the question id, which the picker gives you:

None of my CSS is applying. Check for @layer, @container or @scope. Any one of them stops the whole stylesheet, not just that rule.

One rule isn't applying. Check the list under the editor first — if it was removed for safety it will say so. Otherwise you are probably targeting a class name rather than a data-breely-* hook; use Pick an element to get the right selector.

It works in the preview but not on the real form, or the other way round. A few things only exist on the live form: the Next and Submit buttons, the thank-you step, and anything that depends on which step a client is on. They won't show in the Design tab.

My rule is changing more than I wanted. Several question types share the same parts — selection-block covers appointment types, staff, add-ons, packages and gift certificates. Add [data-breely-question-type='...'] or [data-breely-question='...'] in front of it.

I can't hide the "Powered by Breely" mark. That's deliberate; it sits outside the area your CSS can reach.

I want this on all my forms. Save the form's styles as a theme and apply it to the others. Editing the theme afterwards updates every form using it. Styling an individual form that uses a theme changes only that form, and you are then offered the choice of saving it as a new theme or pushing it back into the one you started from.

Describe what you want to the Assistant and let it write the rule. It can also look at the CSS already on the form and tell you what each rule is landing on, which is often faster than working it out by hand.