Forms built within Team Forms follow a consistent visual style, this standardised and minimalist look has proven to be familiar and preferred by users. However, if you need to add your own company colours to the form you can still do so! We do however recommend avoiding this where possible to ensure forms are consistent, professional looking and auto-magically support features like dark mode and PDF generation.
Custom CSS
You can add your own custom CSS classes to any Team Forms component. This allows you to control every aspect of that component's look and feel from the font colour to changing the radius of a border. CSS is can be a very complex topic which we won't cover here, however, to add your own CSS you can use the steps outlined below:
In the top right hand corner of the form builder screen locate and click he "..." icon and click "Custom CSS". This will open a dialogue which will allow you to write your own CSS or create classes to apply to components
Open the setting for the component you want to style add any custom classes to the "custom css classes" properties.
Inline CSS
Inline CSS can be inserted into each component using the method below:
Open the setting for the component you want to style and navigate to the layout tab
Under the HTML attribute add an attribute called style.
Add your custom inline CSS to the attribute value. In the clip below we use this to change the font color
Content Components
Content components are great for adding any kind of content that would normally appear in a document like text, bullet points, images, links and so much more. The component is available in the layout tab and even lets you copy pre-styled content from Microsoft Word!
CSS Classes
Team Forms uses the popular Bootstrap framework to ensure forms look beautiful and automagically adapt to fix any device! This means you can also use any of the classes available in Bootstrap to change the look and feel of your component. For example, in the clip below we use the .table-striped class from Bootstrap to alternate the row colours in a data-grid component.
Insert HTML
For some properties like the component label and tooltip, it is possiable to insert your own custom HTML in place of the text. This allows you to style the component further and add custom styling like changing the font to the label. In the example below we insert the follow HTML to make the label red and bold.
<div style="color:red;font-weight:bold">Name</div>
