Can I style my form with some CSS code?

Style your form with Custom CSS (Pro)

Customize the look and feel of your form by adding your own CSS. Your styles are injected into the form page’s head and apply on the public form page.

A Pro plan is required to use the custom CSS feature.

Where your CSS applies

CSS affects the public form page only.
Changes won’t appear in the editor; open the public form URL to preview.

Add Custom CSS

Open your form.
Go to Settings → Custom Code → Custom CSS.
Paste your CSS (raw CSS only, no <style> tag) and Save.
Visit your public form page to see the changes.

Notes

Paste raw CSS only — do not wrap with <style>...</style>.
If a rule doesn’t apply, increase specificity or add !important.
Keep CSS scoped to your form when possible to avoid unintended overrides.

Examples

Increase textarea height:

textarea {
  height: 120px;
}

Center the logo:

img.w-20.h-20.absolute.left-5.top-5 {
  left: 50% !important;
  transform: translateX(-50%);
}

Change page background color:

#app,
nav.bg-white {
  background-color: #0ea5e9 !important;
}

Apply a font and tweak inputs:

body h1, body p, body input, body label {
  font-family: Lato, sans-serif !important;
}
label.font-bold { font-weight: 500 !important; }
.rounded-lg { border-radius: 4px !important; }
.relative.mb-3 { margin-top: 30px; }
.shadow-sm { box-shadow: none !important; }
.border { border-color: #b8bdc9 !important; }

Workspace-Level Custom Code

Pro users can now define workspace-level custom CSS or JS that automatically applies to all forms in the workspace. This reduces manual work and ensures consistent branding across multiple forms.

Where your workspace-level code applies

Code is injected into every form in your workspace.

Works under the same conditions as per-form custom code (custom domain, render path, CSP rules, etc).

If both workspace-level and form-level code exist, workspace code is applied first, then form-level overrides.

Add Workspace-level Custom Code

Go to your workspace.

Open Workspace Settings → Custom Code.

Paste your CSS or JS (raw code only, no <style> tags for CSS) and Save Changes.

The code will automatically apply to all forms in the workspace.