🔴 On2Air Forms has been shutdown to focus on our On2Air Backups Airtable app Learn more about automated Airtable backups - on2air.com
You can use these styling options to further style your fields in the Extra Options setting, such as the Submission and Linked Record buttons, Button Field, and On2Air Formula fields. You can choose options such as text color, text size, background color, alignment, and more.
In this tutorial
- How to add Styles - On2Air Formula
- How to add Styles - Submit Button, Linked Record Button, and Other Field Types
- Typography
- Font Size
- Font Weight
- Font Style
- Text Color
- Text Align
- Text Decoration
- Text Transform (Case)
- Line Height
- List Style
- Background
- Background Color
- Border
- Border Radius
- Border Width
- Border Style
- Border Color
- Spacing
- Padding
- Margin
- Other
- Elevation (Shadow)
- Transition
- Animation
- Transform
- Interactivity
- See all Available Styling Options
How to add Styles - On2Air Formula
In the On2Air Formula field, add the style option class name for the style you want in the CSS Class Styling.
Class names are basic text and number classes. All you need to do is find the styles you want and type it in.
To add multiple styles, add a space between the class names.
In this example: bg-blue-300 adds a blue background, text-3xl sets the value size to 3xl, and text-center will center align the value.
How to add Styles - Submit Button, Linked Record Button, and Other Field Types
In other Field Types, open the Extra Options menu > View Advanced Options
Note: not all field types support custom options
- You’ll see a page similar to the one below
- Enter any CSS class name in the classes field
Typography
Font Size
Class
Font Weight
Font Style
font-italic
Text Color
Click the link below to see all available colors and their class
Text Align
Class |
text-center |
text-justify |
text-left |
text-right |
Text Decoration
Class |
underline |
line-through |
no-underline |
Text Transform (Case)
Class |
lowercase |
uppercase |
capitalize |
Line Height
List Style
Class |
list-none |
list-disc |
list-decimal |
Background
Background Color
To add a background color to your formula field, choose from the list of colors at the link below and enter the Class in the formula CSS Class Styling field.
Click the link below to see a full list of available colors
Border
Border Radius
Border Width
Border Style
Border Color
To add a border color to your formula field, choose from the list of colors at the link below and enter the Class in the formula CSS Class Styling field.
Click the link below to see a full list of available colors
Spacing
Padding
Click below to see all available padding options
Margin
Click below to see all available margin options
