Configuring Forms

Go beyond the defaults and make forms work they way you want them to. Learn how to setup the globals with this guide.

Forms are one of the most painful things to build out in a website. Thankfully Slate comes packed with a few mixins that can make this job real easy. This guide is an overview of the configuration settings that make your form tick.

Basic use

The main config for the form as a whole is at the top of the style sheet. We tried hard to strike a balance between dictating how your form should look, whilst still giving you a quick way to setup the basics easily.

Since this is variable driven, it's totally possible to have several forms on the site with different settings, just copy the $form-skin-default, variable, rename it, change what you want and feed it to the form mixin.

$form-skin-default: (
  // Components
  components: (
    baseform: true,
    inputs: true,
    addons: true,
    select: true,
    validation: true
  ),
  // Form Element
  form: (
    margin: 0 0 0 0,
    padding:0 0 0 0,
    color: $dark,
  ),
  // Legend Element
  legend: (
    margin: 0 0 27px 0,
    line-height: $global-line-height,
  ),
  // Fieldset Element
  fieldset: (
    margin: 0 0 $gutter_width,
    padding: 0 0 $gutter_width,
  ),
  // Label Elements
  labels: (
    color: $gray,
    spacing: 0 0 0 0,
  ),
  // Skins
  skins: (
    inputs: $input-default,
    addons: $addon-default,
    select: $select-default,
    validation: $validation-default,
  ),
);

Most of the settings should be self explantory, but we should probably explain two of them. Lets deal with the components first, and then take a look at skins.

Components

Forms on a website are made up of a number of elements. Set all of these to true to get all the form features available in Slate. You can generate less code by setting some of them to false.

$form-skin-default: (
  components: (
    baseform: true,
    inputs: true,
    addons: true,
    select: true,
    validation: true
  )
  ...
);
Component Description
Baseform baseform will enable some basic form tag stuff, basically a reset and some sensible defaults.
Inputs inputs will enable the built in styled inputs which have their own variable to style those up. If you want to style your own inputs (why??), set this to false.
Addons addons is an extension to to the inputs and allows you to add a button perfectly aligned to either ends of an input. If your not using this, set to false.
Select select enables built in styling for dropdown select elements. If you want to style these up your self or your using a custom dropdown via javascript, set this to false.
Validation validation generates code for input validation states with HTML5 or via classes. Works great with server side validation. If you have other ideas on styling your validation, set this to false.

Skins

$form-skin-default: (
  ...
  skins: (
    inputs: $input-default,
    addons: $addon-default,
    select: $select-default,
    validation: $validation-default,
  )
);
Skin Description
Inputs inputs sets the variable to use for global form inputs. This can be edited in src/sass/config/_config-forms.scss.
Addons addons sets the variable to use for global form addons. This can be edited in src/sass/config/_config-forms.scss.
Select select sets the variable to use for global select elements. This can be edited in src/sass/config/_config-forms.scss.
Validation validation sets the variable to use for global form validation states. This can be edited in src/sass/config/_config-validation.scss.

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.