Style your form with a custom CSS

Customize any part of your form's appearance with custom CSS. Custom CSS is shared across all forms with the same theme.

Most parts of your form’s appearance can be modified without code using themes. But if you need a more custom look, you can use custom CSS to make a fully custom look & feel.
notion image
 
📝
Note: Custom CSS is available starting on the Pro plan. For more details on pricing, click here.

How to add a custom CSS

1. Open the advanced designer

Click Theme followed by Advanced designer on the bottom left-hand panel.
notion image
 

2. Add your CSS

Once you press Apply CSS, you’ll see the CSS applied to your form. Go to Preview mode to confirm your form looks as you expect it to.
notion image
 

CSS classes you can use

These classes make it easier to target elements in your form. In general, these are the class names you should rely on (as opposed to other internal class names which may be subject to change).
 
CSS Class
Element
Example
.fillout-field-container
The container for all the fields on each page
.fillout-field-container { // Add a thicker shadow box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); // Decrease width of form max-width: 450px; }
.fillout-field-[field-type] Examples: .fillout-field-short-answer .fillout-field-dropdown
Target specific field types
// Change the width of short answer fields .fillout-field-short-answer input { max-width: 350px; }
.fillout-back-button
Back button
// Change the back button background color .fillout-back-button { background: blue; }
.fillout-caption
All field captions
// Change captions to red .fillout-caption p { color: red; }
.fillout-field-text (Heading) or .fillout-field-paragraph (paragraph)
Heading and paragraph fields
// Make h1 size text in paragraph field have different font .fillout-field-paragraph h1 { font-family: 'Brush Script MT', cursive; }
.fillout-field-button
“Next” button
// Make the “next” button rounded .fillout-field-button button { border-radius: 100px }
input[type="text"]::placeholder
Placeholder text
// Change placeholder color input[type="text"]::placeholder { color: gray; }
 
Can’t find the class you need? Let us know at support@fillout.com and we’ll add it!
 

Custom code guide

If you want to add custom code to your form, like a JavaScript snippet or HTML div, there are two options:
Add an HTML and CSS field to your form
Add an HTML and CSS field to your form
Add a custom code to Fillout forms
Add a custom code to Fillout forms