Jump Up Form Style

Look Demo

Give the form block an upgraded design style. This plugin uses css editor and works with all template families.

How To Install

From your Squarespace account, go to the Custom CSS Editor. 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
}

Customize

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

License

This plugin comes with an Unlimited Use License. View License Terms