Targeting Fields with CSS on Your Embedded Forms

Nadia A. By Nadia A. | July 7, 2017

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!


Nadia A.

Nadia A.

Nadia, the Technical Writer for Cognito Forms, develops documentation, support content, and how-to videos. No matter your experience – with her help, you'll be able to take full advantage of the product. In her spare time, Nadia enjoys listening to French house, drinking coffee, and talking about herself in third person.

Cognito Forms allows you to easily build powerful forms. Sign Up Now
Blog