Select Page
Customize Your Form Styles and Buttons

Customize Your Form Styles and Buttons

🔴 On2Air Forms has been shutdown to focus on our On2Air Backups Airtable app Learn more about automated Airtable backups - on2air.com

You can customize your form and buttons on your form with a custom button label, icon, background color, font color, padding, and other options.

In this tutorial

Customize Your Form

We don’t have full themes or styles for forms yet, but you can still style your forms with our Extra Options settings with the Class field. Themes and Styles are on our product roadmap and will be implemented soon.

💡
See a full list of Styles available Style Your Forms and Fields - CSS Class StylingStyle Your Forms and Fields - CSS Class Styling

How to add Styles - The Basics

Style are entered into Class fields found in the Extra Options menu on most pages and fields. Styles are Class names. View our Styles list and type in the ones you want.

💡
See a full list of Styles available Style Your Forms and Fields - CSS Class StylingStyle Your Forms and Fields - CSS Class Styling
image
  • To add multiple styles, add a space between the class names.
image

Submission Page Styles

  • Go to the Page menu, then choose Extra Options menu and click View Custom/Advanced Options
image

In submission > button, paste the color class name into the class field and click Save

image
  • To add multiple styles, add a space between the class names.
image

Design the Form Header

On2Air Formula field Styles

Use the CSS Class Styling field

To add the style option, add the class name for the style you want. Class names are basic text and number classes. All you need to do is find the ones you want and type it in.

image

Form Field Styles

Click your field > Extra Options > View Advanced Options. Please note that not every field has all available options

image
image

Customize the Color of Your Submission Button

  • Choose a color from the list of colors at the link below
  • Copy the Class name of the color you want

Example: bg-teal-300

image
  • Go to the Page menu, then choose Extra Options menu and click View Custom/Advanced Options
image

In submission > button, paste the color class name into the class field and click Save

image
  • Your Submission button should now be Teal
image
  • To add multiple styles, such as the text color, padding, or other options, add a space between classes
image
  • You can see multiple styles have been added to the button
image
💡
See a full list of Styles available Style Your Forms and Fields - CSS Class StylingStyle Your Forms and Fields - CSS Class Styling

Customize the Color of Your Linked Record Buttons

You can customize the color of the buttons on your linked records.

To add a background color to your button:

  • Open the Extra Options menu on your Linked Record
  • Click View Advanced Options
image
  • Find the background color you want for your button from the page below
  • Copy the Class name from the color you want

Example: I want indigo 400, so I copy the class bg-indigo-400

image
  • In Advanced settings, open controls > classes
  • You’ll see a list of the different buttons available
    • create
    • cancel
    • lookup
    • edit
    • display
    • order
    • remove
    • grouping
  • Add the corresponding class color to the button where you want the color changed

Example: I added bg-indigo-400 to the lookup button to change the lookup linked records button

image
  • The lookup button background color is now the indigo color
image

Customize the Label on the Linked Record Buttons

Example: In a Linked Record field called Content Library, I want to add my own label and icon to the buttons.

Here’s what it looks like as the default button setting with no customization:

image

I want to add a different label on the record lookup button (blue) and the create new (green) button

  • In the Extra Options, I choose the labels option for lookup and the one for create
image
  • Type in the desired labels for the buttons in in the value field, then click Save
image
  • Now, we have custom labels for the buttons!
image

Customize the Icon on the Linked Record Buttons

Next, we’ll add a different icon to the buttons

  • Choose an icon from the list:

Let’s choose the checkbox icon. You can see underneath the icon, there’s a shortcode.

  • Copy the shortcode, pi-check-square
image
  • Paste the shortcode into the icons > create field and click Save
image
  • Now, there’s a checkbox icon on the ‘Create’ button!
image

If you are having trouble with custom options, reach out to us. We will guide you in the right direction.