Form Styles Samples Collection

Featured

Christof

• Edited February 24, 2024 12:11

This thread starts the collaboration with the community to create a collection of sample form styles using the Styling feature of skybow Forms Designer. 

Comments must contain:

1. Downloadlink to exported JSON file(s) - stored in a public storage e.g. github
2. Screenshot(s) of form with applied styles in runtime

 

Sharing is caring!

2

• 

  Christof

  • February 24, 2024 12:10

  Left labeled inputs

  Download the json files from here: SampleCollection/skybow-Forms-Designer-Style-Samples/form-style-samples/left-labeled-inputs at main · skybow/SampleCollection (github.com)
  And import on New-, Edit- and DispForm.

  Result on DispForm:
  

  Result on EditForm:
  

  Result on NewForm:
  

  1
• 

  Christof

  • March 01, 2024 14:57

  Choice pill style on DispForm 

  Download the json file from here: SampleCollection/skybow-Forms-Designer-Style-Samples/field-style-samples/choice-pill-on-dispform at main · skybow/SampleCollection (github.com)
  And import it on the field in Control Styles of the DispForm.

  More information how to find existing styles/colors (Source): https://my.skybow.com/hc/en-us/community/posts/11535110155420/comments/12351200652956

  Result on DispForm:
  

  0
• 

  Christof

  • August 07, 2024 14:40
  • Edited

  Clean Nav Tabs with left labeled values/inputs

  Download the json files from here: SampleCollection/skybow-Forms-Designer-Style-Samples/form-style-samples/clean-nav-tabs-left-labeled at main · skybow/SampleCollection (github.com)
  And import on New-, Edit- and DispForm.

  Result on DispForm:
  

  Result on EditForm:
  

  Result on NewForm:
  

  0
• 

  Kilgore ServiceAccount

  • August 16, 2024 14:12

  Greetings,

  I just wanted to share a quick CSS snippet for buttons that I just ran across. This is used when your button has Hover settings. It controls the transition from Normal state to Hover state, and the speed at which the change/transition happens. Wish I could provide a gif or video, but give it a try... it is in bold:

  .sb-button {
    background-color: #ffd385;
    color: #201e1e;
    border-color: #ffa300;
    border-width: 6px;
    border-radius: 9px;
    height: 69px;
    width: 180px;
    font-size: 15pt;
    margin-left: 0px;
    border-style: double;
    transition-duration: 0.4s;
  }
  
  .sb-button:hover:not(:active) {
    background-color: #ffef85;
    border-color: #c27f09;
  }

   

  2
• 

  Matthias_Walter

  • March 17, 2025 20:55

  Error style on New- and EditForms

  Download the json file from here: SampleCollection/skybow-Forms-Designer-Style-Samples/field-style-samples/error-styles-on-new-and-editform at main · skybow/SampleCollection (github.com)
  and import it in the form styling editor under General Styles -> Fields of the New- or EditForm.

  Result
  Empty input on New-/EditForm
  

  Invalid input on New-/EditForm
  

  0
• 

  Matthias_Walter

  • March 17, 2025 21:07

  Changed input style on New- and EditForms

  Sometimes you open a form, make some changes to the input fields and then you are interupted by something. After that you may have forgotten what you've changed already.
  This style will highlight the changed fields for you.

  Download the json file from here: SampleCollection/skybow-Forms-Designer-Style-Samples/field-style-samples/changed-input-style-on-new-and-editform at main · skybow/SampleCollection (github.com)
  and import it in the form styling editor under General Styles -> Fields of the New- or EditForm.

  Result
  Changed inputs on EditForm
  

  0
• 

  Matthias_Walter

  • March 17, 2025 21:13

  Command Bar Button Style

  Download the json file from here: SampleCollection/skybow-Forms-Designer-Style-Samples/command-bar-button-style-samples at main · skybow/SampleCollection (github.com)
  and import it in the form styling editor on the buttons in Control Styles.

  Result
  Buttons on DispForm
  Styled as "dark" (position 3 from the left), "light" (at position 4) and "gray" (at position 5)
  

  0
• 

  Amit Bhagat

  • September 09, 2025 05:26

  Apply hover effect only to tab labels that are not active

  Form Styling > General Styles > Tabs > Grey tabs and underlined active tab

  .ant-tabs-bar .sb-tab-item-active {
    color: "[theme: themePrimary]";
    border-bottom-width: 2px !important;
    border-bottom-style: solid;
    border-bottom-color: "[theme: themePrimary]" !important;
    border-color: rgba(232, 232, 232, 0);
    padding-bottom: 3px !important;
  }
  
  .ant-tabs-bar .sb-tab-item-active label {
    font-weight: bold;
    color: "[theme: themePrimary]" !important;
  }
  
  .sb-tab-item {
    border-width: 0px;
    background-color: rgba(250, 250, 250, 0);
  }
  
  /*.sb-tab-item label:hover*/
  .sb-tab-item:not(.sb-tab-item-active) label.sb-tab-header-label:hover {
    text-shadow:0px 0px 1px "[theme: themePrimary]";
  }
  
  .ant-tabs-bar {
    background-color: "[theme: neutralLighterAlt]";
  }

   

  1

Please sign in to leave a comment.