How to get newsletter sign ups from another site into Ghost

My current project is using ghost for a blog site and then using Bootstrap for a main site… The issue I am running into is that I would like to be able to have a sign up form on some of the pages of the main for the newsletter. I tried following this tutorial: Create Ghost Blog Subscription from External Site however it first did not work, and second even if it did it has no mention of how to assign a mailing list to the account which I also need to do. I’m not amazing with Typescript and Javascript so it’s very likely I’m just doing something wrong in there. Here’s the Javascript (I’ve tried TS as well but it did the same) and I wish I could upload the html as well however I can only upload one embed as a new user…

async function subscribe() {
  this.loading = true;
  try {
    const result = await fetch(
      "https://blog.***.ca/members/api/send-magic-link/",
      {
        method: "POST", // or 'PUT'
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({ email: this.email, emailType: "subscribe" })
      }
    );

    const r = await result.text();


    if (r != "Created.") alert("bad");
  } catch (e) {
    console.log(e);
  } finally {
    this.loading = false;
  }
}
<form>
     <div class="py-3">
                   <label for="email">Your Email:</label>
                  <input type="email" name="email">
             </div>
      <button onclick="subscribe();">submit</button>
</form>

I have also already tried not having the subscribe() as a function as it was in the original, however that didn’t work, also had the method as “POST” but that did not work either. Also tried using the .js file as an action for the form which just made it load the file in the browser. Also the url is starred out for privacy reasons, and is correct in the actual code!

I guess my question is what am I doing wrong, and how can I adapt the code to let the user select which mailing list they want to be added to!