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.

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

1. Open your form.
2. Go to Settings → Custom Code → Custom CSS.
3. Paste your CSS (raw CSS only, no <style> tag) and Save.
4. 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; }

See also

• How do I add custom code to my form? (scripts, HTML, external tags): https://help.opnform.com/en/article/how-do-i-add-custom-code-to-my-form-1amadj3/

Updated on: 07/10/2025