Custom CSS
Fine-tune anything the Design tab doesn't cover with CSS that only applies to your form.
Every plan
On this page
Open Design → Custom CSS and type your rules. They apply only inside your form, never to the page around an embed.
.fr-title { text-transform: uppercase; }
.fr-desc { opacity: 0.8; }
.fr-btn { letter-spacing: 0.02em; }
.fr-choice { border-width: 2px; }Useful classes
| Class | What it is |
|---|---|
.fr-screen | A whole screen. |
.fr-title, .fr-desc | The question's title and description. |
.fr-btn | Buttons. |
.fr-choice | A choice in multiple choice, picture choice and Yes / No. |
.fr-input | Text inputs. |
.fr-progress | The progress bar. |
Theme colours are available as CSS variables, such as var(--fr-accent), var(--fr-q) and var(--fr-btn).
What's removed
For safety, @import, scripts, expression() and any url() that isn't https: (or an inline image) are stripped. Custom CSS is capped at 20,000 characters.