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!

1

• 

  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;
  }

   

  2

Please sign in to leave a comment.