Search

Form Styles Samples Collection

Featured

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:

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!

Comments

7 comments

Christof

February 24, 2024 12:10
Left labeled inputs

Download the json files from here: skybow-Forms-Designer-Style-Samples/form-style-samples/left-labeled-inputs at main · chris4skybow/skybow-Forms-Designer-Style-Samples (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: skybow-Forms-Designer-Style-Samples/form-style-samples/choice-pill-on-dispform at main · chris4skybow/skybow-Forms-Designer-Style-Samples (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: skybow-Forms-Designer-Style-Samples/form-style-samples/clean-nav-tabs-left-labeled at main · chris4skybow/skybow-Forms-Designer-Style-Samples · GitHub
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;
}

Matthias_Walter

March 17, 2025 20:55
Error style on New- and EditForms

Download the json file from here: skybow-Forms-Designer-Style-Samples/field-style-samples/error-styles-on-new-and-editform
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: skybow-Forms-Designer-Style-Samples/field-style-samples/changed-input-style-on-new-and-editform
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: skybow-Forms-Designer-Style-Samples/command-bar-button-style-samples
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