Form Description ? Pop Up

Look Demo

Add a simple description pop up to the contact form block. This plugin uses css editor, code injection, and works with all template families.

How To Install

From your Squarespace account, go to Site Code Injection. Copy and paste the code below into the Code Injection Header. Once added, hit save.

<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();</script>

Next, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Form Description Icon Pop Up // 

@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; 
  }
}

Customize

Feel free to change any color values to switch up the question mark icon color.

License

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