Themes

The look of a form is kept in a theme, apart from the form. One theme can be used by many forms, and changing the theme changes all of them. The editor calls themes styles and lists them on the Design tab.

How a form refers to its theme

The form holds only a reference:

"theme": { "ref": "D5kvGYdZ" }

ref identifies a built-in theme or one of the team’s own themes. A new form starts with the built-in default theme, Classic.

Theme definition

Key	Type	Default	Description
`name`	string	`""`	Name of the theme in the editor, up to 60 characters.
`font`	string	`"Open Sans"`	Font. Font of the whole form: the name of a Google Font, made of letters, digits and spaces. The editor offers the fonts below.
`colors.background`	string	`#ffffff`	Background. Page background.
`colors.question`	string	`#000000`	Questions. Question titles and headings.
`colors.answer`	string	`#000000`	Answers. Answers and body text.
`colors.button`	string	`#000000`	Buttons. Buttons and accents. The text color on buttons is worked out from it.
`background`	object or `false`	`false`	Background image. See Background image.
`roundness`	string	`circle`	Buttons shape. `square`, `rounded` or `circle`.
`font_size`	string	`medium`	Font size. `small` (87.5%), `medium` (100%) or `large` (112.5%).
`headings_weight`	string	`normal`	Headings weight. `normal` or `bold`.
`high_contrast`	boolean	off	Higher contrast. Darker edges, placeholders and secondary texts. New form version only.

Colors are written as #rgb, #rrggbb, rgb(r,g,b) or rgba(r,g,b,a).

Example

{
  "name": "Black on white",
  "font": "Open Sans",
  "colors": {
    "background": "#FFFFFF",
    "question": "#000000",
    "answer": "#000000",
    "button": "#000000"
  },
  "background": false,
  "roundness": "rounded",
  "font_size": "medium"
}

Background image

Key	Type	Default	Description
`background.url`	string		File name returned by the image upload in the editor. JPG, PNG or GIF, up to 1 MB.
`background.scale`	string	`cover`	`cover` fills the page, `contain` fits the whole image, `auto` repeats the image at its own size.
`background.blur`	number	`0`	Background blur. In pixels, 0 to 20.
`background.brightness`	number	`50`	Background brightness. 0 to 100. Values of 50 and above lay a dark layer over the image, stronger as the value grows. Values below 50 lay a light layer over it, stronger as the value falls. Use it to keep text readable over a photo.

Fonts

The editor offers these fonts:

Abril Fatface, Arvo, Bangers, Bricolage Grotesque, Bungee Inline, Caveat, Crete Round, DM Sans, DM Serif Display, EB Garamond, Exo, Figtree, Fraunces, Geist, IBM Plex Sans, Instrument Serif, Inter, JetBrains Mono, Kalam, Kanit, Karla, Lato, Lekton, Lexend, Libre Baskerville, Lobster, Lora, Manrope, McLaren, Merriweather, Montserrat, Nunito, Nunito Sans, Onest, Open Sans, Oswald, Outfit, Pangolin, Playfair Display, Plus Jakarta Sans, Poppins, Press Start 2P, Prompt, PT Sans, PT Serif, Raleway, Roboto, Roboto Condensed, Roboto Slab, Rubik, Signika, Slabo 13px, Sniglet, Sora, Source Code Pro, Source Sans Pro, Source Serif 4, Space Grotesk, Suez One, Ubuntu, Unbounded, Vollkorn, Work Sans, Zilla Slab Highlight.

Built-in and own themes

Built-in themes are the same for every team and cannot be changed or deleted.
Own themes (My styles) belong to a team. Any form of the team can use them, and a team can change and delete them.
Themes are not tied to a plan.

Custom CSS

A team’s own theme can carry extra CSS, up to 20000 bytes. The option is enabled per team on request.

The CSS is checked when it is saved. It cannot contain @import, markup, or addresses of files outside Responsly, and it cannot hide the cookie banner.