To override the header image, edit the html of the broken image below and add the url to the desired image. If the "src" attribute is left blank, the default header logo will be used. When you add a "src" url for the desired logo, the entire html img element below will be used as the logo. You should edit the "width" attribute to set the size of the logo. Generally, I advise having the logo around 66px tall. Finding the correct width takes some experimenting.

For this to work, the following code needs to be added to the form's custom code section. Many forms may already have the waitForElm function, in that case only the event listener below the function declaration is needed.

  async function waitForElm(selector) {
  return new Promise((resolve) => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }

    const observer = new MutationObserver((mutations) => {
      if (document.querySelector(selector)) {
        resolve(document.querySelector(selector));
        observer.disconnect();
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });
}

document.addEventListener("DOMContentLoaded", () => {
  waitForElm("#logo-image").then((elm) => {
    if(!elm.currentSrc) return
    
    let headerLogo = document.querySelector("body > header > div > div > div > div > a > svg");
    let headerLogoAnchor = document.querySelector("body > header > div > div > div > div > a");

    headerLogo.remove();
    headerLogoAnchor.appendChild(elm)
  });
});