[Share] Click button - show different newsletter

If you have any problems or can't do this on your site, you can comment below or message me. I can help easier.

Suppose we need to create something like this, when users click on each button >> show corresponding newsletter block.

#1. First, add 2 Button Blocks and 2 Newsletter Blocks

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

• #forbuyer
• #forseller

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

#3. Install this free tool to find ID of 2 Newsletter Blocks

https://chromewebstore.google.com/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

In my example, we will have

• Newsletter 1: #block-7410df8c50a7724d4fcc
• Newsletter 2: #block-3b3a7f22b741c66555b9

#4. Use this code to Code Injection > Footer (or Page Header Code Injection, page where you use 2 Newsletter Blocks)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  // For Buyer 
  $("#block-7410df8c50a7724d4fcc").closest('.fe-block').addClass('forbuyer show');
    $('a[href="#forbuyer"]').addClass('active-button');
  // For Seller
$("#block-3b3a7f22b741c66555b9").closest('.fe-block').addClass('forseller');
  
  // For Buyer 
  $('a[href="#forbuyer"]').click(function(){
    $(".forbuyer").addClass("show");
    $('.fe-block:not(.forbuyer)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#forbuyer"])').removeClass('active-button');
    }
  );
// For Seller
 $('a[href="#forseller"]').click(function(){
   $(".forseller").addClass("show");
    $('.fe-block:not(.forseller)').removeClass('show');
    $(this).addClass('active-button');
    $('a:not([href="#forseller"])').removeClass('active-button')
    }
  );
});
</script>
<style>
.forbuyer .newsletter-block, .forseller .newsletter-block {
    display: none;
}
  .show .newsletter-block {
      display: block !important;
  }
  .show {
      z-index: 999999 !important;
  }
  .active-button {
  background-color: green !important;
  }
</style>

#5. Adjust some style

If you want to change Button Style to Checkbox like this

Use this code to Website Tools > Custom CSS

a[href="#forbuyer"]:before, a[href="#forseller"]:before {
    content: "\f0c8";
    font-family: "Font Awesome 6 Free";
    font-weight: bold;
    font-size: 20px;
    color: #000 !important;
	 margin-right: 5px;
    font-weight: 400;
}
a[href="#forbuyer"], a[href="#forseller"] {
    background-color: transparent !important;
    color: #000 !important;
}
.active-button:before {
    content: "\f14a" !important;
}

Hi tuanphan!

I have been searching to adjust the size of the sign-up button in the newsletter block ( I've already adjusted the primary button in the site styles). When I edited the button sizes globally - it did not affect the newsletter block button.  Very frustrating! 

I have uploaded screenshots. 

Could CSS code help me resize that sign-up button to match the other sized buttons on the website? 

https://bumblebee-orb-p4mf.squarespace.com/stay-in-the-loop

password: ICAN

7 hours ago, KoriLinaeC said:

Hi tuanphan!

I have been searching to adjust the size of the sign-up button in the newsletter block ( I've already adjusted the primary button in the site styles). When I edited the button sizes globally - it did not affect the newsletter block button.  Very frustrating! 

I have uploaded screenshots. 

Could CSS code help me resize that sign-up button to match the other sized buttons on the website? 

https://bumblebee-orb-p4mf.squarespace.com/stay-in-the-loop

password: ICAN

 

You can use this code to Custom CSS box

button.newsletter-form-button.sqs-system-button {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 40px !important;
    padding-right: 40px !important;
}
span.newsletter-form-button-label {
    font-size: 16px !important;
}

Thank you @tuanphan I appreciate that! 

Hi Tuanphan,

I want to add this to a web page on my website. I've already got it in my website footer, but when I direct people to sign up I want them to go to a page. Can I enter the code I entered into Code Injection > Footer into the Custom CSS section or will it not work? Not sure if that code is only suitable for the footer / header only. Any help would be greatly appreciated. I assume I'd need to somehow direct it to the specific page I want it to be on, so it's not effecting the whole website. It's working perfectly in my footer, just need to make it work on a web page now. Thank you, Charli