Cognito Forms logo
Experience the future of Form Building Start Building Now!

Targeting Fields with CSS on Your Embedded Forms

Posted by Nadia A. 07/07/2017 Categories: Style & Publish

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?

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.


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

See the Pen Targeting Field Types - 1 by Cognito Forms (@CognitoForms) on CodePen.

Field types

Here's a full list of all Cognito field types and sub types:




For more information about styling your forms with CSS, check out our help topic!

Gravatar Nadia is the Marketing Coordinator for Cognito Forms. In her spare time, Nadia enjoys listening to French house, drinking iced coffee, and talking about herself in third person.
Printable View