To make a Form Popup appears when clicking add to cart on Squarespace, you can follow these.
#1. First, you need to edit the Site Footer
#2. Add a Form Block
#3. Click Design > Enable Lightbox
Click Content > Edit Form Fields
You can place any fields that you want.
and remember to enter your email in Storage > Notification
#4. Use this code to Custom CSS box to hide the Form Lightbox button in the Footer
footer.sections button.lightbox-handle {
visibility: hidden !important;
}
#5. Use this code to Code Injection > Footer to open Form Lightbox when clicking the Add to Cart button.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('div.sqs-add-to-cart-button').on("click", function(event){
event.preventDefault();
$('button.lightbox-handle')[0].click();
})
})
</script>
#6. Result
When users click the add to cart button, it will add the product to the cart + open form lightbox
