Additional questions on adding first and last name to Squarespace Newsletter Popup

Site URL: https://www.sunday7pmchoir.com/

Hi Community, 

I've tried using Tuanphan's code below in Home > Settings > Advanced > Code Injection > Header to add a First Name and Last Name to the Newsletter Popup, and while it worked, I've temporarily removed it and have a few questions:

1) How can I add (and change) a delay as to when the pop-up appears, after a person gets to the website

2) How can I have only the first name added (vs. the first name and last name)

3) How can  you change the font colour?

4) Is it possible to add a photo as the background for the popup (vs a solid colour)

Thanks for your help!

Ed

_____

Code sourced from Additional Fields in Promotional Popup - BEAVER HERO, made a small tweak to background colour:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
  function handlePopUp() {
    var popup = $('#block-yui_3_17_2_1_1621388331590_5219');
    var isHidePopup = getCookie('coookieIsHidePopup');
    if('true'!==isHidePopup){
      popup.css('display', 'block');
    }
    // Hide popup when clicking outsite
    $(document).click(function (e){
      if('block' == popup.css('display')) {
        if (!popup.is(e.target) && popup.has(e.target).length === 0){
          hidePopupAndSetCookie( popup, 1 );
        }
      }
    });
    // Hide popup when close or submit
    $('#close-popup, .newsletter-form-button, header.newsletter-form-header').click(function() {
      hidePopupAndSetCookie( popup, 1 );
    });
  }
  function hidePopupAndSetCookie(popup, time) {
    popup.hide();
    setCookie('coookieIsHidePopup', 'true', 1);
  }
  function setCookie(cname, cvalue, exdays) {
    var now = new Date();
    //d.setTime(d.getTime() + (exdays*24*60*60*1000));
    //var expires = "expires="+ d.toUTCString();
    //window.document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    now.setTime(now.getTime() + 24 * 3600 * 1000);
    document.cookie = "name=value; expires=" + now.toUTCString() + "; path=/";
  }
  function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(window.document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    
    return "";
  }
  handlePopUp();
});
</script>
<style>
#block-yui_3_17_2_1_1621388331590_5219 {
  position: fixed;
  width: 340px;
  background-color: #0080FF; /* newsletter background */
  top: 100px;
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: 999;
  display: none;
}
/* Close icon */
#block-yui_3_17_2_1_1621388331590_5219 header.newsletter-form-header:before {
    content: "\e01a";
    font-family: 'squarespace-ui-font';
    color: white;
    border: 1px solid white;
    position: absolute;
    right: -30px;
    top: 0;
    padding: 5px;
    line-height: 15px;
  z-index: 20000;
  cursor: pointer;
}
</style>