Cognito Forms logo

Customizing form styles

Customizing form stylesYou can customize the appearance of your public or embedded form using the Style Editor on the Publish page. When you're finished styling your form, make sure to hit Save.

  1. Header
  2. Form
  3. Page


Header 

  • Include a logo on your form.Logo – Click this button to upload an image to the top of your form. The files used for the Logo must be smaller then 0.5 MB and must be a jpg, png, or gif file.
  • Layout – Change the position of the logo and title to Top and Bottom (logo is on top of title), Side by Side (logo and title are in line), Stretch (the logo stretches to fill the header), and Logo Only.
  • Background – Use the color picker to select a header background color. You also have the option to make the background transparent.
  • Alignment – Align your title/logo to the left, to the right, or in the center.
  • Title Font – Select the font type, size, and color of your form title.
  • Hide header when embedded? – Check this box to hide the logo and title when your form is embedded into your website. The logo and title will still appear on the public form page.

Form

  • Field Style – Choose between several different styles of form fields:
Standard Chunk
Standard form style. Chunk form style.
Fill Inset
Fill form style. Inset form style.
Rounded Rounded Fill
Rounded form style. Rounded Fill form style.
Underline  
 
  • Headings, Labels, Text, Links, and Buttons – Select the font type, size, and color of different text elements.
  • Placeholder Text – Use the color picker to select the color of placeholder text on your form.
  • Form Background – Use the color picker to select a form background color. You also have the option to make the background transparent with the opacity slider near the bottom.​

Page

Note: The page background image/color is not applied to a webpage when a form is embedded.

  • Page Background – Use the color picker to select a page background color. You also have the option to make the background transparent.
  • Page Background Image – Click this button to upload an image to use as your page background.
  • Tile Background Image? – Check this box to tile your background image as a pattern.
Printable View