Overriding form styles

Overriding our CSS is easy to do if you know the trick – you just need to use an id in your selector. IDs have a lot of specificity and will overpower any of our CSS. You just need to add an id to the body element of your website or even just the parent container of the form. If you’re using an iFrame embed with setCSS we’ve already added id="cognito" to the iframe for you. With your id in your html, you can write your CSS like this:

#my-id .cog-button {
  background-color: red;
}

Alternatively, you can add !important to the end of each declaration. But because that has such a high specificity, doing so may make it hard for you to override those styles later. But you can do it like this:

.cog-button {
  background-color: red !important;
}

If you’ve inspected the CSS of a Cognito Form you may have noticed all the selectors have 5 :roots in a row. These are there just to make it hard to accidentally override our CSS with your website’s CSS. If you do need to override our CSS, check out the preceding FAQ.

Customizing background colors

To change the background color for different sections:

.cog-section[aria-labelledby='cog-24'] {
  background: red;
}

To change the background color of all inputs and textareas:

.cog-cognito {
  --input__background-color: red;
}

To change the background color of checkboxes and radio buttons:

.cog-cognito {
  --checkable__background-color: white;
}

The embedded form has no margins so the form content will line up with the other content on your website. We recommended for your form background color to be set to transparent, allowing your website’s background colors to show through the transparent form background.

You can also add margins with a CSS variable:

#my-id .cog-cognito {
  --form__margins: 30px;
}

Customizing buttons

The different kinds of buttons on your forms have different classes. All buttons that should look buttons have the cog-button class. If you want your CSS changes to apply to all buttons, use this.

Additionally, the most important button on the page (next button or submit button) has the class cog-button--primary on it. All other buttons have cog-button--secondary. If you want your styles to apply to one or the other of these types, use one of these classes.

Another distinction you might want to make is between buttons in the form (E.g. upload button, add item button) and buttons at the bottom of the form used to navigate, save, and submit your form. The buttons at the bottom also have the cog-button--navigation class. Even more specific, there are classes for cog-button--next, cog-button--back, cog-button--submit, and cog-button--save.

To center the submit button:

/* Centers back, next, and submit buttons */

#my-id .cog-page__navigation {
  justify-content: center;
}

/* If there is a save button on the form you will also need this block.
   Change the margin depending on how much space you want between buttons -
   just keep them equal. */

#my-id .cog-page__navigation .cog-button {
  margin-left: .5em;
  margin-right: .5em;
}

Customizing fonts

To use a custom font:

/* Include the font on the page as you normally would.*/
.cog-cognito {
  --font-family: 'Lato'; /* applies to everything */
  --header__font-family: 'Lato'; /* applies to headers */
  --label__font-family: 'Lato';  /* applies to labels */
  --button-primary__font-family: 'Lato'; /* applies to primary buttons */
  --button-secondary__font-family: 'Lato'; /* applies to secondary buttons */
}

To customize the font in a Content field:

.cog-content {
  font-family: 'Lato';
}

Customizing error styles

The following CSS will change the colors of the error messages you can set the error message background color using a CSS variable.

#my-id .cog-cognito {
  --negative: #ffc2c0;
}

The CSS above will also change the color of the asterisk indicating a field is required, as well as change the color of the input when focused.

Since the error message text defaults to white, you may want change that to be readable if you chose a light background color for errors. The following CSS will change the background color to pink and the text to dark red:

#my-id .cog-cognito {
  --negative: #ffc2c0;
  --negative-reverse: #8c0000;
}

If you need to customize anything more than the colors, you will need to use the classes on the elements to write your CSS. Two classes you might find helpful are .is-error which is added to the entire field when it is in an error state and .cog-error-message which is on the error container itself.

For example, this CSS will change the text color of the input if it is in a field with the “is-error” class:

#my-id .cog-field.is-error .el-input__inner {
  color: #ff5751;
}

And this CSS​ will increase the padding of the error box:

#my-id .cog-error-message {
  padding: 20px;
}

Customizing highlight colors

You can change the highlight color, used to indicate focus, current page, and other active states by giving a color value to the highlight CSS variable, like this:

#my-id .cog-cognito {
  --highlight: #ff0000;
}

If your chosen color is very light you may also need to update --highlight-reverse too. This is the color of text that sometimes appears on the default blue and it defaults to white. So, for example, if your chosen highlight color is yellow, you may want to make this color something like black:

#my-id .cog-cognito {
  --highlight: #ffffa6;
  --highlight-reverse: #000000;
}