Cognito Forms logo

Customizing form styles

To change the style of your form, start by clicking on Style Editor tab on the Publish page. Several options are available to customize the appearance of your public or embedded form.

1. Header

2. Form

3. Page

For more information about styling forms with CSS, refer to our help topic and/or our introductory blog post.


Header 

  • 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
Fill Inset
Rounded Rounded Fill
Underline  
 
  • Headings, Labels, Text, Links, and Buttons – Select the font type, size, and color of different text elements, such as the submit button:

  • 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

  • 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.

Remember to click “Save” or the form will switch back to its default settings.

Printable View