Buy me a coffee

Hover button – Show different form

Demo: https://tuanphan-demo01.squarespace.com/hover-button-show-different-formv1?noredirect

Suppose you have 3 Button Blocks (left) – 3 Form Blocks (right).

When hovering over each button, will show the corresponding form on the right.

You can follow these steps:

#1. First, add 3 Button Blocks and 3 Form Blocks

Hover Button Show Different Form 01 Min

#2. Edit 3 Button Blocks, and use these URLs

  • #apple
  • #microsoft
  • #facebook

and make sure the option “Open Link in New Tab” is disabled.

Hover Button Show Different Form 03 Min

 

Hover Button Show Different Form 04 Min

Hover Button Show Different Form 05 Min

#3. Install Squarespace ID Finder to find the ID of Form Block

In my example, we will have:

  • Apple Form: #block-yui_3_17_2_1_1710206108509_9818
  • Microsoft Form: #block-yui_3_17_2_1_1710206108509_11216
  • Facebook: #block-yui_3_17_2_1_1710206108509_12346

Hover Button Show Different Form 02 Min

#4. Use code to Code Injection – Footer (or Page Header Code Injection)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // apple 
  $("#block-yui_3_17_2_1_1710206108509_9818").closest('.fe-block').addClass('apple');
  // microsoft
$("#block-yui_3_17_2_1_1710206108509_11216").closest('.fe-block').addClass('microsoft');
  // facebook
$("#block-yui_3_17_2_1_1710206108509_12346").closest('.fe-block').addClass('facebook');
  
  // Apple
  $('a[href="#apple"]').hover(function(){
    $(".apple").addClass("show");
    $('.fe-block:not(.apple)').removeClass('show');
    }
  );
// Microsoft
 $('a[href="#microsoft"]').hover(function(){
   $(".microsoft").addClass("show");
    $('.fe-block:not(.microsoft)').removeClass('show');
    }
  );
  // Facebook 
   $('a[href="#facebook"]').hover(function(){
   $(".facebook").addClass("show");
    $('.fe-block:not(.facebook)').removeClass('show');
    }
  );
});
</script>
<style>
.apple .form-block, .microsoft .form-block, .facebook .form-block {
    display: none;
}
  .show .form-block {
      display: block !important;
  }
  .show {
      z-index: 999999 !important;
  }
</style>

Hover Button Show Different Form 12 Min

#5. Explain code

Hover Button Show Different Form 11 Min