Advanced CSS Guide

In addition to customizing form styles by choosing fonts, text sizes, and background colors, you can also style your form with CSS. To do this, your form must be embedded into your website. You can then add Cognito Forms properties to your style sheet.

Cognito Forms selectors

Selector Class
Form title .c-forms-heading h2
All section titles .c-title > *
All labels .cognito .c-label label, .cognito .c-label
All buttons .cognito button
Submit button #c-submit-button
Help text .c-helptext
All text inputs and dropdowns .cognito input[type=text], .cognito .c-dropdown
Required fields .c-required
Individual fields* .c-email[Data-Field="Email"]

*To target a specific field, reference the class property (ex: “.c-email”) followed by the field name (ex: “Email”)

Field types

Use the class property to target all fields of the same type.

Field type Class
Textbox .c-text-singleline, .c-text-multiplelines
Choice .c-choice-dropdown, .c-choice-radiobuttons, .c-choice-checkboxes
Yes/No .c-yesno-checkbox, .c-yesno-radiobuttons, .c-yesno-toggle
Date/Time .c-date-date, .c-date-time
Currency .c-currency
Number .c-number-integer, .c-number-decimal, .c-number-percent
Name .c-name
Address .c-address, .c-address-us, .c-address, .c-address-international
Phone .c-phone, .c-phone-us, .c-phone-international
Email .c-email
Website .c-website
Signature .c-signature
Rating Scale .c-rating-scale
Section .c-section
Calculation .c-calculation-singleline, .c-calculation-yesno, .c-calculation-decimal, .c-calculation-percentage, .c-calculation-currency, .c-calculation-date, .c-calculation-time
File Upload .c-file

Common CSS properties

The following are commonly used CSS properties that you can use to style your form:

Property Description
font-size Changes the size of the selected text.
font-weight Bold or un-bold text. Set it to bold or normal.
color The color of text. Set it to any hex value.
background-color The background color of the element’s box. Set it to any hex value.
border-color The color of the border around text inputs and dropdowns.
border-width The size of the border around text inputs and dropdowns.
border-radius Make borders have rounded corners. You can set it to a pixel value, where 0 gives your borders sharp corners and 1px is very slightly rounded.
padding You can set it to a pixel amount. If you want to change the padding for just one side you can use: padding-left, etc.