Themes, logo and custom CSS

Pick a ready-made look, make your own with your brand’s colours and logo, or fine-tune it with CSS. Whatever you choose, your forms never load anything from other sites: no web fonts, no images by URL, no trackers.

What each plan includes

Plan	Looks
Personal	8 ready-made themes, each with a dark mode. A small “Powered by Agent002 Forms” line under the form.
Starter	Also your own themes: accent colour, font, corners, your own background and text colours, and a logo. Still the “Powered by” line.
Team, Scale, Enterprise	Also one logo for all your forms, custom CSS, and no Agent002 branding on your forms.

Pick a theme

Open a form, go to Settings → Look and click a theme. The preview changes straight away.
Publish the form again: like every setting, the new look reaches the live form when you publish.

Make your own

Go to Themes in the menu and click the preset you want to start from.
Change the accent colour, font and corners. Turn on Use my own background and text colours to fix the colours; that switches off the automatic dark mode for this theme.
Upload a logo: a PNG, JPEG or WebP image up to 150 KB. It shows above the form’s title.
Changes save as you go. Editing a theme restyles every form that uses it, straight away.

On Team and up, the logo at the top of the Themes page shows on all your forms. A theme with its own logo uses that one instead.

Custom CSS (Team and up)

The CSS box in a theme applies only to that theme’s forms, and only inside the form: it can’t reach anything else on the page. For example:

.a2-title {
  font-size: 2.2rem;
  letter-spacing: -0.02em;
}

.a2-submit {
  width: 100%;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .a2-form { gap: 16px; }
}

To keep forms private and safe, some things are refused when you save: url(…), @import, @font-face, backslash escapes and HTML. Use colours, gradients, spacing, borders, shadows and the system fonts instead.

The parts of a form

Class	What it is
`.a2-form`	The whole form
`.a2-logo`, `.a2-title`, `.a2-description`	Logo, title and the text under it
`.a2-page`, `.a2-page-title`	One page of a form with page breaks, and its title
`.a2-heading`, `.a2-paragraph`	Heading and text blocks
`.a2-field`	One question: label, help, input and error
`.a2-label`, `.a2-required`, `.a2-help`, `.a2-error`	The question, its asterisk, help text and error message
`.a2-option`	One choice in a choice, multiple-choice or yes/no question
`.a2-stars`, `.a2-star-glyph`	Star ratings
`.a2-scale-row`, `.a2-scale-num`, `.a2-scale-ends`	Number scales and the words under them
`.a2-nav`, `.a2-back`, `.a2-progress`, `.a2-submit`	Back button, “Page x of n” and the Send / Next button
`.a2-footer`	The links and the privacy line at the bottom

Colour variables

Themes set these variables; you can set them too, on .a2-form:

.a2-form {
  --a2-accent: #0f766e;      /* buttons, selected choices */
  --a2-accent-fg: #ffffff;   /* text on buttons */
  --a2-fg: #16151a;          /* text */
  --a2-muted: #6b6873;       /* help text */
  --a2-line: #d9d6cf;        /* borders */
  --a2-field-bg: #ffffff;    /* inputs */
  --a2-radius: 10px;         /* corners */
}

The card around the form is .a2-theme itself: set its background, border or box-shadow at the top level of your CSS, outside any rule.