Targeting Fields with CSS on Your Embedded Forms

When it comes to styling your forms, the Style Editor on the Publish page is a great place to start - but if you want to customize the appearance of your forms even further, you also have the option of directly targeting the CSS of your embedded forms. In previous posts, we highlighted some tips and tricks for styling required fields, as well as customizing error messages. However, did you know that all form fields and sections have their own CSS class types?

Targeting fields

For example, you can specify attributes specifically for the Name field using the .c-name class. So, you could make the background red:

.c-name {
  background-color: #fea3aa !important;
}

Or, you can target the Address field with c.-address to make the background orange:

.c-address {
  background-color: #f8b88b;
}

In addition to background colors, you can also specify the text color, font-size, border color/width/radius, padding, and more.

Example

Here, we’re specifically targeting both the Name and Email field types to add a border:

Field types

Check out our help topic to view a full list of all Cognito field types and sub types.

Have any questions about styling your forms with CSS? Be sure to get in touch with us, or just leave a comment below!