Jump Up Form Style

ezgif-3-c769dea49e55.gif

Step One

From your Squarespace account, go to the Custom CSS Editor: Design > Advanced > Custom CSS

Step Two

Copy and paste the code below into the Custom CSS Editor box.

// Jump Up Form Style //

.sqs-block-form label{
  pointer-events: none;
}
.sqs-block-form label input{
  pointer-events: auto;
}
.sqs-block-form form .field-element{
  border-color: #FECB2F !important;
  border: none !important;
  background-color: transparent !important;
  border-radius: 0px;
}
.sqs-block-form form .field .field-element{
  border-bottom: solid 1px #e6e6e6 !important;
}
.sqs-block-form form .text input, .sqs-block-form form .textarea textarea, .sqs-block-form form .email input, .sqs-block-form form .website input, .sqs-block-form form .number input{
  margin-top: 20px !important;
  padding-left: 12px;
}

.sqs-block-form form .text label, .sqs-block-form form .textarea label, .sqs-block-form form .email label, .sqs-block-form form .website label, .sqs-block-form form .number label{
  position: absolute;
  left: 5px;
  top: 30px;
  -webkit-transition: all .3s ease-in-out !important;
  -moz-transition: all .3s ease-in-out !important;
  -o-transition: all .3s ease-in-out !important;
  transition: all .3s ease-in-out !important;
}

.sqs-block-form form .name .first-name:after{
  display: block;
  position: absolute;
  content: 'First Name';
  left: 5px;
  top: 17px;
  z-index: 999;
  pointer-events: none;
  -webkit-transition: all .3s ease-in-out !important;
  -moz-transition: all .3s ease-in-out !important;
  -o-transition: all .3s ease-in-out !important;
  transition: all .3s ease-in-out !important;
}

.sqs-block-form form .name .last-name:after{
  display: block;
  position: absolute;
  content: 'Last Name';
  pointer-events: none;
  left: 5px;
  top: 17px;
  z-index: 999;
  -webkit-transition: all .3s ease-in-out !important;
  -moz-transition: all .3s ease-in-out !important;
  -o-transition: all .3s ease-in-out !important;
  transition: all .3s ease-in-out !important;
}

.nameHover:after{
  top: -20px !important;

}

.sqs-block-form form .name{
  padding-top: 17px !important;
}

.sqs-block-form form .first-name, .sqs-block-form form .last-name{
  margin-bottom: 0px;
}

.sqs-block-form form .name label{
  font-size: 0px !important;
}

.sqs-block-form form .name .title{
  display: none !important;
}

.sqs-block-form form .website .prefix{
  display: none;
}
.sqs-block-form form select:focus{
  outline-color: #FECB2F !important;
}
.sqs-block-form form .section{
  border-color: #FECB2F !important;
}
.form-button-wrapper .button{
  color: white !important;
  border-color: transparent;
  background-color: #333333 !important;
}
.form-button-wrapper .button:hover{
  color: white !important;
  background-color: #000 !important;
}
.inputActive:after{
  top: 0px !important
}

Step Three

You do not need to change any of the values or properties.

Save and refresh the page. 👍

Moov Labs