Select Page
Style Your Forms and Fields - CSS Class Styling

Style Your Forms and Fields - CSS Class Styling

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

image

In this tutorial

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.

image

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
image

Typography

Font Size

Class

image

Font Weight

image

Font Style

font-italic

image

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

image

List Style

Class
list-none
list-disc
list-decimal
image

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.

image

Click the link below to see a full list of available colors

Border

Border Radius

image

Border Width

image
image
image
image

Border Style

image

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.

image

Click the link below to see a full list of available colors

Spacing

Padding

Click below to see all available padding options

image
image
image

Margin

Click below to see all available margin options

image
image
image

Other

Elevation (Shadow)

image

Transition

Animation

Transform

Interactivity

See all Available Styling Options

PrimeFlex CSS