I'm trying to set the subject field of a Squarespace form from a script, I verified that the subjectInput is valid, and I verified that the tree name is properly being fetched. (Model ID from URL parameter > Sketchfab API Model Name)

But the string simply isn't setting, I don't see it visibly in the form itself, nor is it being sent in the final email after I click submit. I'm placing this in the Advanced Code section of the page. Here's the exact URL, password is known:

https://www.localplantsupply.com/tree-d-viewer?model=ac03983731014985b3998918dbb72f8e&images=https%3A%2F%2Fimages.squarespace-cdn.com%2Fcontent%2F63a30291e92dbc66a89327f8%2Fc1dbe4d3-841b-42b0-a250-c82befc9a8db%2Fyucca1.jpg%2Chttps%3A%2F%2Fimages.squarespace-cdn.com%2Fcontent%2F63a30291e92dbc66a89327f8%2F46b707f7-7c83-4eb0-ad4d-5d84fcdf7e30%2Fyucca2.jpg%2Chttps%3A%2F%2Fimages.squarespace-cdn.com%2Fcontent%2F63a30291e92dbc66a89327f8%2F69de31c1-556c-409f-bbe3-5b380c493af8%2Fyucca3.jpg
 

<script>
  document.addEventListener("DOMContentLoaded", function() {
    var buyButton = document.getElementById('block-yui_3_17_2_1_1710424833282_7130');
    var form = document.getElementById('block-yui_3_17_2_1_1710417003580_7008');
    var subjectInput = document.getElementById('text-yui_3_17_2_1_1710417041309_2398-field');

    async function fetchTreeName() {
        const modelId = new URLSearchParams(window.location.search).get('model');
        if (modelId) {
            const modelDetailsUrl = `https://api.sketchfab.com/v3/models/${modelId}`;
            try {
                const response = await fetch(modelDetailsUrl);
                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
                const modelData = await response.json();
                return modelData.name; // Assuming this is where the tree name is stored
            } catch (error) {
                console.error('Error fetching model details:', error);
                return "Unknown Tree";
            }
        }
    }

    function changeValue(input, value) {
        var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
        nativeInputValueSetter.call(input, value);

        var inputEvent = new Event("input", { bubbles: true });
        input.dispatchEvent(inputEvent);
    }

    buyButton && buyButton.addEventListener('click', async function(event) {
        event.preventDefault();
        const treeName = await fetchTreeName();
        const inquiryDate = new Date().toISOString();
      console.log(treeName);
              form.style.display = form.style.display === "none" || form.style.display === "" ? "block" : "none";
      
        if(subjectInput) {
            console.log("Subject is valid");
            changeValue(subjectInput, `Inquiry for ${treeName} - ${inquiryDate}`);
        }
    });
});
</script>

I think it's because of your change value function.

https://github.com/sorcamarian/squarespace-tricks/tree/main/Forms

Check these approaches

This might also be helpful