I embeded an Hubspot form on Squarespace when the form is clicked a Calendly routine form pops up with the fields prefilled from the Hubspot form, but the issue I have is that each time a user clicks outside the Calendly form and they click anywhere on the overlay the form closes and they need to start the process again but instead of this I want the pop to be only closed when the close button is clicked.

My code is below I still went ahead to log the clicked class that close the pop up

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "HubspotID",
    formId: "HubspotformID"
  });
</script>

<!-- Calendly routing form code begin -->
<link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
<script src="https://assets.calendly.com/assets/external/forms.js" type="text/javascript" async></script>
<script type="text/javascript">
  window.addEventListener('load', function() {
    Calendly.initHubspotForm({
      "id": "HubspotformID",
      "url": "https://calendly.com/api/form_builder/forms/CalendlyformID/submissions"
    });

    document.addEventListener('click', function(event) {
      console.log('Clicked element:', event.target);
      console.log('Close button:', event.target.classList.contains('calendly-popup-close'));
      
      if (!event.target.classList.contains('calendly-popup-close') && !event.target.closest('.calendly-popup-close')) {
        console.log('Preventing form close...');
        event.preventDefault();
      }
    });
  });
</script>

After running the code above I get this in the console

Clicked element: <div class=​”calendly-close-overlay”>​​
Close button: false
Preventing form close..