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.
If your form is embedded, you can use the Chameleon style to allow the styles of the page where the form is seamlessly embedded to show through.
Cognito Forms selectors
|All section titles|
|All text inputs and dropdowns|
*To target a specific field, reference the class property (ex: “.c-email”) followed by the field name (ex: “Email”)
Use the class property to target all fields of the same type.
Common CSS properties
The following are commonly used CSS properties that you can use to style your form:
| ||Changes the size of the selected text.|
| ||Bold or un-bold text. Set it to bold or normal.|
| ||The color of text. Set it to any hex value.|
| ||The background color of the element’s box. Set it to any hex value.|
| ||The color of the border around text inputs and dropdowns.|
| ||The size of the border around text inputs and dropdowns.|
| ||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.|
| ||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.|