Style a form

Standard Squarespace forms are... ugly – and needs an overhaul.

Name *
Name

The form above is customized with the code below.

/* FORMS 
- - - - - - - - - - - - - - */

// FORMbackground
.form-wrapper {
  background-color: @grey-ultra !important;
  padding: 30px;
  border: 0px solid @line;
}

// FORM - fields
.form-wrapper 
.field-list 
.field 
.field-element {
  background: @grey-ultra;
  border: solid 0;
  font-family: @meta, sans-serif;
  font-weight: 200 !important;
  font-size: 18px;
  letter-spacing: @spacing;
  border-bottom: solid 1px @grey-light;
}

// FORM - field focus
.form-wrapper .field-list .field .field-element:focus {
  font-size: 18px;
  background: #FFF;
  color: #000;
}

// FORMfield
.form-wrapper .field-list .field .caption .field-element {
  font-size: 18px;
}

// FORMlabel
.form-wrapper .field-list .title {
  font-family: @meta;
  font-size: 14px;
  font-weight: 300;
  word-spacing: 0.2em;
  letter-spacing: @spacing-loose;
  text-transform: uppercase;
}

// FORMcaption
.form-wrapper .field-list .field .caption {
  font-family: @meta;
  font-size: 10px;
  font-weight: 300;
  word-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 1;
}

// FORMdescription
.form-wrapper .field-list .description {
  font-family: @meta;
  font-size: 10px;
  letter-spacing: @spacing-loose;
  word-spacing: -0.2em;
  text-transform: uppercase;
  opacity: .5;
}

// FORMsubmission text
.form-wrapper .form-submission-text {
  font-family: @meta, sans-serif;
  font-weight: 200 !important;
  font-size: 18px;
  letter-spacing: @spacing;
  color: #000;
}

// FORMbutton
body:not(.button-style-default).button-style-outline 
.sqs-editable-button {
  .anti;
  font-family: @meta;
  font-size: 16px;
  font-weight: 300;
  color: @text !important;
  letter-spacing: @spacing-medium;
  text-transform: none;
  border-width: 1px;
  border-color: @grey !important;
  padding: 12px 20px;
  transition: @transition;
  opacity: @opacity !important;
&:hover {
  border-color: @text;
  opacity: @opacity;
  color: #FFF !important;
  background: @text;
  }
}