Formstack

Formstack is an cloud based service for custom form building and publishing of online forms. Forms hosted on their platform can be styled using themes and the ACCESS NYC Patterns includes a stylesheet for integrating form styling for Formstack Themes.

include{{ objects/formstack/formstack-theme-demo.slm }}

Usage

  1. Create a new Formstack Theme following this tutorial. You can name the theme ACCESS NYC Patterns.
  2. Under Quick Styles, change the form font to Noto Sans. You do not need to modify any of the other settings.
  3. Under Advanced Code Editor, copy and paste the following code into the css editor and save your changes.

@import url("https://fonts.googleapis.com/css?family=Noto+Serif:400");
/**
 * ACCESS NYC Patterns v0.16.1
 * Formstack Object
 * Documentation: https://accesspatterns.cityofnewyork.us/formstack
 * Source: https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/blob/v0.16.1/dist/objects/formstack/formstack.css
 *
 * Below is compiled css copied and pasted from
 * ACCESS NYC Patterns. See details above. Do not
 * try to modify the code below. Follow ACCESS NYC
 * Patterns development process for updating the
 * styling of this theme. Please update the version
 * number and this description if it is to be changed.
 */
.fsBody,html{font-size:22px;line-height:1.4}.fsBody{color:initial;background-color:#fff;padding:8px 0 0}.fsBody ol,.fsBody p,.fsBody ul{margin-top:0;margin-bottom:.3636363636rem}.fsBody .fsPage{min-width:auto}.fsBody .fsForm{font-size:.72rem;background-color:#fff;margin:0;max-width:1200px;min-height:100%;min-width:320px;width:auto;padding:0 24px 24px}.fsBody .fsForm .fsSectionHeader{margin:0;padding:0;background-color:transparent}.fsBody .fsForm .fsSectionHeading{font-weight:400;line-height:1.3;font-family:"Noto Serif",serif;color:#112e51;font-size:1.45rem;text-align:left;border-bottom:1px solid;border-color:#505c66;padding-bottom:32px;margin-bottom:24px;padding-top:32px}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField,.fsBody .fsForm textarea.fsField{color:initial;font-family:inherit;font-size:inherit;line-height:normal;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #505c66;border-radius:0;display:block;max-width:100%;min-width:200px;width:100%;margin:0;cursor:pointer;color:#505c66;padding:18px;max-width:100%!important;min-width:200px!important;height:auto}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField::-webkit-input-placeholder,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField::-webkit-input-placeholder,.fsBody .fsForm textarea.fsField::-webkit-input-placeholder{color:#505c66}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField::-moz-placeholder,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField::-moz-placeholder,.fsBody .fsForm textarea.fsField::-moz-placeholder{color:#505c66}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField:-ms-input-placeholder,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField:-ms-input-placeholder,.fsBody .fsForm textarea.fsField:-ms-input-placeholder{color:#505c66}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField::-ms-input-placeholder,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField::-ms-input-placeholder,.fsBody .fsForm textarea.fsField::-ms-input-placeholder{color:#505c66}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField::placeholder,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField::placeholder,.fsBody .fsForm textarea.fsField::placeholder{color:#505c66}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsFieldName{width:100%!important}.fsBody .fsForm select.fsField,.fsBody .fsForm select.fsField:not([multiple=multiple]){color:initial;font-family:inherit;font-size:inherit;line-height:normal;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid #505c66;border-radius:0;display:block;max-width:100%;min-width:200px;width:100%;margin:0;cursor:pointer;background-color:#fff;background-image:url(https://cdn.jsdelivr.net/gh/cityofnewyork/access-nyc-patterns@v0.16.1/dist/svg/icon-ui-chevron-down.svg);background-position:right .5rem center;background-repeat:no-repeat;background-size:24px 24px;padding:18px 2.8rem 18px 18px;display:inline-block;float:none;height:auto;width:auto}.fsBody .fsForm select.fsField::-ms-expand,.fsBody .fsForm select.fsField:not([multiple=multiple])::-ms-expand{display:none}.fsBody .fsForm .fsFieldRow{margin-bottom:24px!important}.fsBody .fsForm [fs-field-type=checkbox] .fsOptionLabel.vertical,.fsBody .fsForm [fs-field-type=radio] .fsOptionLabel.vertical{display:-webkit-box;display:-ms-flexbox;display:flex}.fsBody .fsForm [fs-field-type=checkbox] .fsOptionLabel.horizontal,.fsBody .fsForm [fs-field-type=radio] .fsOptionLabel.horizontal{font-size:22px;font-weight:700;-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s;background:#fff;border:1px solid #505c66;border-radius:8px;cursor:pointer;line-height:30px;margin-right:12px;position:relative;display:inline-block;padding:8px;margin-bottom:0}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content select.fsField,.fsBody .fsForm [fs-field-type=datetime] .fieldset-content select.fsField:not([multiple=multiple]),.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup select.fsField,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup select.fsField:not([multiple=multiple]){width:100%;margin-bottom:8px}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content .fsCalendarPickerLink,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup .fsCalendarPickerLink{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content .ui-datepicker-trigger,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup .ui-datepicker-trigger{display:none}.fsBody .fsForm .fsLabel{display:inline-block;font-size:22px;font-weight:700;vertical-align:top;color:initial;margin-bottom:18px;display:block;max-width:100%}.fsBody .fsForm .fsRequiredMarker{color:#c6252b}.fsBody .fsForm .fieldset-content>:last-child,.fsBody .fsForm .fsSubFieldGroup>:last-child{margin-bottom:0}.fsBody .fsForm .fsSupporting{font-size:medium;font-weight:400;font-style:normal;line-height:normal;color:initial}.fsBody .fsForm .fsCurrency~input.fsField{max-width:100%!important;min-width:200px!important;width:100%!important}.fsBody .fsForm .fsCurrencyPrefix{color:#0d6d3b;font-size:22px;font-weight:700;position:absolute;line-height:57px;margin-left:10px!important;pointer-events:none;width:auto}.fsBody .fsForm .fsCurrencyPrefix+input:not([type=checkbox]):not([type=radio]).fsField{padding-left:30px!important}.fsBody .fsForm .fsOptionLabel{font-size:22px;font-weight:700;padding-left:6px;padding-top:6px;padding-bottom:6px;cursor:pointer;display:block;margin-bottom:24px;display:-webkit-box;display:-ms-flexbox;display:flex;line-height:30px;color:initial;border:none;background:none!important}.fsBody .fsForm .fsOptionLabel input[type=checkbox],.fsBody .fsForm .fsOptionLabel input[type=radio]{top:auto;border:none;width:30px;height:30px;min-width:30px;margin-right:12px;overflow:visible}.fsBody .fsForm .fsOptionLabel input[type=radio]:before{-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s;background:#fff;border:1px solid #505c66;border-radius:50%;content:"";display:inline-block;width:30px;height:30px;min-width:30px;margin-right:12px;display:block}.fsBody .fsForm .fsOptionLabel input[type=radio]:checked:before{background-color:#184e9e}.fsBody .fsForm .fsOptionLabel input[type=radio]:checked:before,.fsBody .fsForm .fsOptionLabel input[type=radio]:focus:before{-webkit-box-shadow:0 0 0 2px #184e9e inset,0 0 0 4px #fff inset;box-shadow:inset 0 0 0 2px #184e9e,inset 0 0 0 4px #fff;border:0}.fsBody .fsForm .fsOptionLabel input[type=checkbox]:before{-webkit-transition:all .2s;-o-transition:all .2s;transition:all .2s;background:#fff;border:1px solid #505c66;border-radius:8px;content:"";display:inline-block;width:30px;height:30px;min-width:30px;margin-right:12px;display:block}.fsBody .fsForm .fsOptionLabel input[type=checkbox]:checked:before{background:#184e9e url(https://cdn.jsdelivr.net/gh/cityofnewyork/access-nyc-patterns@v0.16.1/dist//svg/icon-checkmark-white.svg) no-repeat;background-size:cover;border:0}.fsBody .fsForm .fsOptionLabel input[type=checkbox]:focus:before{border:0;-webkit-box-shadow:0 0 0 1px #fff,0 0 0 3px #184e9e;box-shadow:0 0 0 1px #fff,0 0 0 3px #184e9e}.fsBody .fsForm .fsValidationError{background-color:initial;-webkit-box-shadow:none;box-shadow:none}.fsBody .fsForm .fsValidationError .fieldset-content,.fsBody .fsForm .fsValidationError .fsSubFieldGroup{position:relative}.fsBody .fsForm .fsValidationError .fieldset-content:before,.fsBody .fsForm .fsValidationError .fsSubFieldGroup:before{position:absolute;top:-12px;bottom:-24px;left:-19px;border-left:3px solid #c6252b;content:"";display:block;width:0}.fsBody .fsForm .fsValidationError select.fsField,.fsBody .fsForm .fsValidationError select.fsField:not([multiple=multiple]){color:initial!important;border-color:#c6252b!important;background-image:url(https://cdn.jsdelivr.net/gh/cityofnewyork/access-nyc-patterns@v0.16.1/dist/svg/icon-ui-chevron-down.svg)!important}.fsBody .fsForm .fsValidationError input:not([type=checkbox]):not([type=radio]).fsField,.fsBody .fsForm .fsValidationError input:not([type=checkbox]):not([type=radio]).fsOtherField,.fsBody .fsForm .fsValidationError textarea.fsField{color:initial!important;border-color:#c6252b!important}.fsBody .fsForm .fsValidationError input[type=checkbox]:before,.fsBody .fsForm .fsValidationError input[type=radio]:before{border-color:#505c66!important}.fsBody .fsForm .fsValidationError .fsLabel,.fsBody .fsForm .fsValidationError .fsOptionLabel{color:initial!important}.fsBody .fsForm .fsFieldFocused:not(.fsValidationError).fsSpan100{margin:0;padding:0}.fsBody .fsForm [fs-field-type=richtext]{font-size:.72rem;background:#eef3f7;border:1px solid #d1d5d9;padding:24px}.fsBody .fsForm [fs-field-type=richtext]>p:last-child{margin-bottom:0}.fsBody .fsForm [fs-field-type=richtext] small{font-size:.54rem;line-height:1.4;margin:0;display:inline-block}.fsBody .fsForm .fsNextButton,.fsBody .fsForm .fsPreviousButton,.fsBody .fsForm .fsSubmitButton{font-weight:700;font-size:1.09rem;line-height:1.3;font-family:Noto Sans,sans-serif;line-height:1;padding:15.9984px 24px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#c3ddff;border:0;border-radius:5px;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;text-align:center;text-decoration:none;cursor:pointer;-webkit-transition:background .2s ease-in,color .2s ease-in;-o-transition:background .2s ease-in,color .2s ease-in;transition:background .2s ease-in,color .2s ease-in;border-radius:5px!important;font-size:1.09rem!important;width:auto;height:auto}.fsBody .fsForm .fsNextButton>[class*=icon]:first-child,.fsBody .fsForm .fsPreviousButton>[class*=icon]:first-child,.fsBody .fsForm .fsSubmitButton>[class*=icon]:first-child{margin-right:8px}.fsBody .fsForm .fsNextButton .fsFull,.fsBody .fsForm .fsPreviousButton .fsFull,.fsBody .fsForm .fsSubmitButton .fsFull{display:block}.fsBody .fsForm .fsNextButton:before,.fsBody .fsForm .fsPreviousButton:before,.fsBody .fsForm .fsSubmitButton:before{content:""}.fsBody .fsForm .fsSubmitButton{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin-top:0!important;clear:both}.fsBody .fsForm .fsSubmitButton,.fsBody .fsForm .fsSubmitButton:link,.fsBody .fsForm .fsSubmitButton:visited{color:#fff!important;background-color:#184e9e!important}.fsBody .fsForm .fsSubmitButton:active,.fsBody .fsForm .fsSubmitButton:focus,.fsBody .fsForm .fsSubmitButton:hover{color:#fff!important;background-color:#1658b9!important}.fsBody .fsForm .fsPreviousButton{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;padding-left:40px;margin-bottom:32px}.fsBody .fsForm .fsPreviousButton,.fsBody .fsForm .fsPreviousButton:link,.fsBody .fsForm .fsPreviousButton:visited{color:#fff!important;background-color:#184e9e!important}.fsBody .fsForm .fsPreviousButton:active,.fsBody .fsForm .fsPreviousButton:focus,.fsBody .fsForm .fsPreviousButton:hover{color:#fff!important;background-color:#1658b9!important}.fsBody .fsForm .fsPreviousButton:before{content:"";position:absolute;display:inline-block;border-bottom:.3em solid transparent;border-right:.4em solid;border-right-color:inherit;border-top:.3em solid transparent;top:50%;margin-top:-.3em;margin-left:24px;left:-.3em}.fsBody .fsForm .fsNextButton{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;padding-right:40px;margin-bottom:32px}.fsBody .fsForm .fsNextButton,.fsBody .fsForm .fsNextButton:link,.fsBody .fsForm .fsNextButton:visited{color:#fff!important;background-color:#184e9e!important}.fsBody .fsForm .fsNextButton:active,.fsBody .fsForm .fsNextButton:focus,.fsBody .fsForm .fsNextButton:hover{color:#fff!important;background-color:#1658b9!important}.fsBody .fsForm .fsNextButton:after{content:"";position:absolute;display:inline-block;border-bottom:.3em solid transparent;border-left:.4em solid;border-left-color:inherit;border-top:.3em solid transparent;top:50%;margin-top:-.3em;margin-right:24px;right:-.3em}.fsBody .fsForm .fsCalendarPickerLink{display:none!important;color:initial;font-family:inherit;font-size:inherit;line-height:normal;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;display:block;max-width:100%;min-width:200px;width:100%;color:#505c66;padding:18px;color:transparent;background-image:url(https://cdn.jsdelivr.net/gh/cityofnewyork/access-nyc-patterns@v0.16.1/dist//svg/icon-ui-calendar.svg);background-repeat:no-repeat;background-position:50%;background-size:24px 24px;border-radius:5px;border:2px solid #184e9e;cursor:pointer;height:auto;margin:0 0 8px}.fsBody .fsForm .fsCalendarPickerLink::-webkit-input-placeholder{color:#505c66}.fsBody .fsForm .fsCalendarPickerLink::-moz-placeholder{color:#505c66}.fsBody .fsForm .fsCalendarPickerLink:-ms-input-placeholder{color:#505c66}.fsBody .fsForm .fsCalendarPickerLink::-ms-input-placeholder{color:#505c66}.fsBody .fsForm .fsCalendarPickerLink::placeholder{color:#505c66}.fsBody .fsForm .ui-datepicker-trigger{display:none}.fsBody .fsForm div.fsProgress{margin:0;position:fixed;top:0;left:0;width:100%}.fsBody .fsForm div.fsProgress .fsProgressBarContainer{background-color:#fff;height:8px}.fsBody .fsForm div.fsProgress .fsProgressText{display:none}.fsBody .fsForm div.fsProgress .fsProgressBar{background-color:#118df0}.fsBody .fsForm .fsPagination{margin-top:0;padding-top:16px;padding-bottom:0}.fsBody .fsForm #fsSubmissionCheckmark{background-image:url(https://cdn.jsdelivr.net/gh/cityofnewyork/access-nyc-patterns@v0.16.1/dist//svg/icon-success-green.svg);margin:24px 0}.fsBody .fsForm #fsSubmissionCheckmark+.fsSectionHeading{text-align:center;border:none}@media screen and (min-width:480px){.fsBody .fsForm [fs-field-type=name] .fieldset-content,.fsBody .fsForm [fs-field-type=name] .fsSubFieldGroup{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.fsBody .fsForm [fs-field-type=name] .fieldset-content .fsSubField,.fsBody .fsForm [fs-field-type=name] .fsSubFieldGroup .fsSubField{-webkit-box-flex:1;-ms-flex:1;flex:1;width:calc(50% - 16px)!important;max-width:calc(50% - 16px);-ms-flex-preferred-size:calc(50% - 16px);flex-basis:calc(50% - 16px);margin:0}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content select.fsField,.fsBody .fsForm [fs-field-type=datetime] .fieldset-content select.fsField:not([multiple=multiple]),.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup select.fsField,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup select.fsField:not([multiple=multiple]){-webkit-box-flex:1;-ms-flex:1;flex:1;-ms-flex-preferred-size:calc(33.33% - 16px);flex-basis:calc(33.33% - 16px);width:calc(33.33% - 16px);max-width:calc(33.33% - 16px);min-width:inherit;margin-right:0}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content .fsCalendarPickerLink,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup .fsCalendarPickerLink{margin-top:-8px}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content .ui-datepicker-trigger,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup .ui-datepicker-trigger{display:none}.fsBody .fsForm .fsCalendarPickerLink{width:24px;min-width:24px;height:24px;border:0;padding:0}}@media screen and (min-width:768px){.fsBody .fsForm .fsSectionHeading{font-size:1.81rem}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsField,.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsOtherField,.fsBody .fsForm textarea.fsField{width:auto!important}.fsBody .fsForm input:not([type=checkbox]):not([type=radio]).fsFieldName{width:100%!important}.fsBody .fsForm [fs-field-type=name] .fieldset-content,.fsBody .fsForm [fs-field-type=name] .fsSubFieldGroup{max-width:100%;width:447px}}@media screen and (min-width:960px){.fsBody{background-color:#eef3f7;padding-left:96px;padding-right:96px}.fsBody .fsForm{border:1px solid #d1d5d9;padding-left:32px;padding-right:32px;padding-bottom:32px;margin:64px auto}.fsBody .fsForm [fs-field-type=datetime] .fieldset-content,.fsBody .fsForm [fs-field-type=datetime] .fsSubFieldGroup{width:447px}}@media screen and (max-width:480px){.fsBody .fsForm .fsSubmitButton{width:100%;display:block;float:none}}

The comment will let other users know where the code source is coming from and what version of the ACCESS NYC Patterns are being used in the theme.

Development

If you are modifying the theme for Formstack you should create a new theme and import the development url of the distributed stylesheet into it. It helps to use semantic versioning in the name of the theme when developing so you know which one is the most up to date.

Once you have created a new theme, copy and paste the following snippet into the Advanced Code Editor.

@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400');
@import url('http://localhost:7000/objects/formstack/formstack.css');

It is also good practice to apply themes in development to sample forms. You can either copy an existing form or use a “development” form that utilizes all of the fields Formstack provides. Once the development theme is applied to the development form, you can use the View Live Form link to view changes you are making.