Buy me a coffee

Hover button – Show different form (v2)

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

Password: abc

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 Buttons and Forms

In my example, we will have:

  • Apple button: #block-2dbaa7ed640f684cf44d
  • Microsoft button: #block-4d2e929f3e0bbba04ec0
  • Facebook button: #block-44d716bf0bf481a21f70

 

  • Apple Form: #block-a980deada2e05c803b74
  • Microsoft Form: #block-0fe620056daf337828f1
  • Facebook Form: #block-4c8a6f0e2c8dab30bd93

Hover Button Show Different Form V2 01

#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-a980deada2e05c803b74").closest('.fe-block').addClass('apple show');
  // microsoft
$("#block-0fe620056daf337828f1").closest('.fe-block').addClass('microsoft');
  // facebook
$("#block-4c8a6f0e2c8dab30bd93").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 V2 05 Min

 

#5. Explain code

 

Hover Button Show Different Form V2 04 Min