Form Styles Samples Collection
FeaturedThis 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:
- Downloadlink to exported JSON file(s) - stored in a public storage e.g. github
- Screenshot(s) of form with applied styles in runtime
Sharing is caring!
-
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 -
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 -
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 -
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 -
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 -
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 -
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 -
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.
Comments
8 comments