FormTooltip.gif

Form Description Pop Up

The Form Description Pop Up plugin hides the field description behind a question mark icon & 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: Setting up your Form Block

You simply need to set up your contact form exactly as you would normally, ensuring that the 'Description' field is complete with your desired text - this is what will display in the text box when a user hovers over the '?'.

 
 

 

Step 2: 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(){$("<tt>?</tt>").insertBefore($("form .description")),$("tt").on({mouseenter:function(){$(this).next().addClass('hover')},mouseleave:function(){$(this).next().removeClass('hover')}})});</script>
 

Site wide Code Injection:

 

Individual Page Header Code Injection:

 

 

Step 3: 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 DESCRIPTION POP UP CSS */

@media all and (min-width: 1200px){
  tt{
    font-family: inherit;
    font-weight: 600;
    position: absolute;
    right: 0px;
    top: 5px;
    padding: 1px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    text-align: center;
    cursor: pointer;
    border: solid 0px;
    border-radius: 200px;
    color: #000000;
    background-color: #fafafa;
    -webkit-transition: all .2s ease-in-out !important;
    -moz-transition: all .2s ease-in-out !important;
    -o-transition: all .2s ease-in-out !important;
    transition: all .2s ease-in-out !important;
  }
  tt:hover{
    color: #fecb2f;
    border-color: #fecb2f;
  }

  .description{
    position: absolute;
    bottom: 100%;
    right: 0%;
    background-color: #000 !important;
    margin-bottom: 10px;
    margin-right: 10px;
    z-index: 99999;
    opacity: 0 !important;
    width: 100%;
    padding: 10px 15px !important;
    max-width: 200px;
    border: solid 1px #000;
    border-radius: 3px;
    color:  #fff !important;
    -webkit-transition: all .2s ease-in-out !important;
    -moz-transition: all .2s ease-in-out !important;
    -o-transition: all .2s ease-in-out !important;
    transition: all .2s ease-in-out !important;
  }

  .sqs-block-form .hover{
    opacity: 1 !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.