Squarespace unique identifier solution no longer works due to change in form. Need help to determine why it wont work/solution

SS=Square Space

Previously there was a script posted by Ian_A on the SS forums to add in a unique identifier on forms submitted to prevent collation of emails in gmail. This enabled us to reply to each received form by hitting reply without needing to alter our default gmail box to conversation view etc.

We cannot change our gmail settings. (cannot turn on conversation view without alienating some users)

SS have since changed how the forms work and I believe that the $ parameter of the script no longer targets the correct part of the field. I don't have a coding background, my limited understanding is that the $ is the way jquery selects the field. I am not sure how to structure the jquery selector to pick the field I want by perhaps the class ID which is unique to each field on the form.

There is only one form to make this work on. I only have access to header code injection and custom CSS. I need each email sent by the form to have a randomised subject (or time/date stamped)

Below is the example of the code that worked prior to SS updating the site.

<script>
$(document).ready(function(){ 
    var timecode = Date.now();
    var subjecttxt = "#" + timecode;
  
  $('form').find("input[type=text], text").each(function()
  {
      if(!$(this).val()) { 
     $(this).attr("value", subjecttxt);
     $(this).attr("readonly", true);
     $(this).css("display","none");
        var val = subjecttxt;
        return ( val !== subjecttxt );
  }
  });
});

  $(document).ready(function(){ 
$('form').find("label[class=title]").each(function()
  {
      if(!$(this).val()) { 
     $(this).css("display","none");
        var val2 = "none";
        return ( val2 !== "none" );
  }
  });
});  
 </script>

Source= SS Forum Post
Our website contact us page= Form in question

Below is the information I can see relating to the blank subject text box I both wish to hide from the user and autofill with a unique identifier on send so that we can identify each send individually. I feel there should be a way with jquery to get it to pick this instead of the just the first field on the form which no longer works, but I can't work out how to change the previous code above, to make it work and despite testing can't see why it wont work (no errors throw on the page load and I don't know how else to check)

For example: $('form') .find(input.text-dfd9bd71-70a1-413d-81f2-dae19bb38da2 )

I know this doesn't work but I don't know why it doesn't work, I feel like it could use the div id, or class but idk how to make jquery do that and the documentation is above my understanding currently.

              <div id="text-dfd9bd71-70a1-413d-81f2-dae19bb38da2" class="form-item field text">
                
            <label class="title" for="text-dfd9bd71-70a1-413d-81f2-dae19bb38da2-field">
              Subject
              
            </label>
          
                
                <input
                    class="field-element text"
                    type="text"
                    id="text-dfd9bd71-70a1-413d-81f2-dae19bb38da2-field"
                    
                    
                />
              </div>

I tried to hide a section at the top of a Squarespace contact form and have jquery select the box adding in a unique identifier.

Due to a change in the SS forms this no longer works as expected.

Unfortunately, the issue is that, for new Squarespace form blocks, Squarespace now closely manages the values in each field and persistently maintains them based only off of actual user input events (probably using React, virtual/shadow DOM and the isTrusted event property). That means that, although you can set a field value with JavaScript, doing so will have no effect on the value that Squarespace will ultimately submit. And Squarespace will correspondingly reset the form field value after every user action (typing in another field, submitting the form, etc.)

Therefore, I don't think this can be solved with JavaScript. It might work on older, unedited form blocks though.

Besides using a third-party form service (Google Forms, JotForm, etc.), there is one other alternative: Force the "Subject" field to appear as if it is the "Name" field. You'd do this by doing the following:

1. Remove the Name field from the form.
2. Ensure the "Subject" field is the first field in the form.
3. Add the following to page-specific header injection:

<br>

<style>
.form-item:first-child span {
  font-size: 0;
}
.form-item:first-child span:after {
  content: "Name (required)";
  font-size: 18px;
}
</style>

Now, the "Subject" field will appear to be titled "Name" and will just be a single field (instead of two, first and last). When submissions come through, the email subject will be something like: "Form Submission - Contact - John Smith". But in the body of the email you'd see "Subject: John Smith". That's because we're just make the first field appear to be "Name" with CSS.

Be sure to set the "Subject" field to be required. And remove the other scripts you might have added to set the "Subject" value.

And of course, if two people enter the same name, those emails might be collated.

Also, consider that error messages (such as if the user leaves that first field empty and tries to submit the form) might be a little confusing to the user.

That's a bit of a silly workaround. But if all you really care about is that email subject line, it might work for you.