Custom CSS

​

What is Custom CSS

CSS is the language used to style HTML content. By writing CSS code for your form, you can define the colors, fonts, and other visual properties of your form elements.

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.

​

How to add a custom CSS

​

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).

​

Adding multiple fonts with Custom CSS

You can also use custom CSS to have different text in your form use different fonts. For example:

/* Target Heading and Paragraph Fields */
.fillout-field-text h1, h2,
.fillout-field-paragraph h1, h2 {
  font-family: 'MyCustomFont', Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Here, we’ve targeted specifically the H1 and H2 headings in our form with our custom font, while the rest of the text will follow the font chosen on the theme of the form.

To import the fonts into the form, you’ll need to use the custom code feature to insert the font-family snippets, e.g.:

<style>
	/* Add one or more custom font-faces */
	@font-face {
	    font-family: 'MyCustomFont';
	    src: url('<Insert URL to custom font file>'),
	}
</style>

​

Custom code guide

If you want to add custom code to your form, like a JavaScript snippet or HTML div, there are two options: