FormStyle1.gif

Form Style 1

The Form Description Pop Up plugin hides the field description behind a question mark icon and reveals it in a floating text box on hover. Below you will find a super-simple tutorial that will guide you through the installation and setup of this plugin.

 

 

Step 1: Insert the JavaScript

Insert the following code into the site wide 'Header Code Injection' area or in the 'Page Header Code Injection' area to implement this plugin on individual page(s) - more info below.

Copy & paste this code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script>$(document).ready(function(){$(window).keyup(function(t){9==(t.keyCode?t.keyCode:t.which)&&$(".sqs-block-form input, .sqs-block-form textarea").each(function(){$(this).is(document.activeElement)?($(this).prev().css("top","0px"),$(this).parent().parent().addClass("inputActive")):""==$(this).val()?($(this).prev().css("top","30px"),$(this).parent().parent().removeClass("inputActive")):($(this).prev().css("top","0px"),$(this).parent().parent().addClass("inputActive"))})}),$(document).click(function(){$(".sqs-block-form input, .sqs-block-form textarea").each(function(){$(this).is(document.activeElement)?($(this).prev().css("top","0px"),$(this).parent().parent().addClass("inputActive")):""==$(this).val()?($(this).prev().css("top","30px"),$(this).parent().parent().removeClass("inputActive")):($(this).prev().css("top","0px"),$(this).parent().parent().addClass("inputActive"))})}),$(".sqs-block-form input, .sqs-block-form textarea").on({mouseenter:function(){$(this).prev().css("top","0px")},mouseleave:function(){$(this).is(document.activeElement)?$(this).prev().css("top","0px"):""==$(this).val()?$(this).prev().css("top","30px"):$(this).prev().css("top","0px")}}),$(".sqs-block-form .first-name, .sqs-block-form .last-name").on({mouseenter:function(){$(this).removeClass("inputActive").addClass("inputActive")},mouseleave:function(){$(this).find("input").is(document.activeElement)?$(this).removeClass("inputActive").addClass("inputActive"):""==$(this).find("input").val()?$(this).removeClass("inputActive"):$(this).removeClass("inputActive").addClass("inputActive")}})});</script>
 

Site wide Code Injection:

 

Individual Page Header Code Injection:

 

 

Step 2: Insert the CSS

Insert the following code into your Squarespace site's Custom CSS editor or the Individual Page Header CSS injection (more info below) - the values in bold can be changed to suit your branding and site design. 

Where colour values are added, you can use either of the following:

  • Valid colour name e.g. 'red' or 'yellow'
  • Hex value e.g. #FECB2F
  • RGB(a) value e.g. rgb (255,255,255) or rgba (255,255,255,0.8)  - optional opacity value '0.8'
  • HSL(s) value e.g. hsl (0, 0%, 20%) or hsla (0, 0%, 20%, 0.8) optional opacity value '0.8'

If you need help finding colours and building colour palettes - coolors.io is an awesome resource!

Copy & paste this code:

/* FORM STYLE 1 CSS */

.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
}
 

Finding your Custom CSS editor:

 

Individual Page Header CSS injection

 

⚡️Apply, Save & Refresh! ⚡️

 

Need some help?

If you need help installing your plugin or you find that the code provided is not working - please feel free to contact us by clicking the link below.