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: Styling & CSS

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.

Example

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

Field types

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

.c-text-singleline
.c-text-multiplelines
.c-choice-dropdown
.c-choice-radiobuttons
.c-choice-checkboxes
.c-yesno-checkbox
.c-yesno-radiobuttons
.c-yesno-toggle
.c-date-date
.c-date-time
.c-number-integer
.c-number-decimal
.c-number-percent
.c-currency
.c-name
.c-address 
.c-address-us
.c-address 
.c-address-international
.c-phone 
.c-phone-us
.c-phone 
.c-phone-international
.c-email
.c-website
.c-rating-scale
.c-signature
.c-section
.c-calculation-singleline
.c-calculation-yesno
.c-calculation-decimal
.c-calculation-percentage
.c-calculation-currency
.c-calculation-date
.c-calculation-time
.c-file

 

 

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 spending far too much time on YouTube, eating Swedish Fish, and cuddling with her two Chihuahuas.
Printable View