NovaSites

Excellent instructional video @sorca_marian! I've marked it as the official solution to my original question and recommend anyone interested in the topic watch and like it on YouTube.

Thank you so much @sorca_marian!!! Your code samples worked perfectly. I had a couple of experienced javascript developers take a look at this problem with no luck. You clearly have an expert-level understanding of both front-end web development technologies and the nuances of the Squarespace environment. Squarespace should frankly hire you as a developer advocate for these forums. I might have some work for you down the road and would love to connect offline. What's the best way for me (and others in the community) to contact you? Lastly, the contributions of developers like Marian to these forums is incredibly valuable. I learned a ton from his posts and videos and I'd strongly encourage anyone interested in programmatically customizing their Squarespace sites to follow his YouTube channel.

Thanks so much @sorca_marian. I tried your advice and here's what I'm experiencing thus far: I've hidden the divs that contain the form text fields using simple CSS (e.g. display: none). I can get your code samples to work from the console in Chrome Developer Tools, similarly to how you instructed in your videos. In the console, I can set any text field value and I can programmatically hide the surround divs as well (although I opted for CSS here for simplicity). Hidden input types do not seem to be settable in the same way (although it's possible I am doing something incorrectly). When I try to replicate the code that works in the console in the Code Injection Header section of my html file, it doesn't work for some reason. I suspect it has to do with the execution timing (onInit in my current code) of when I am attempting to set the text field values in my actual code versus how/when I am setting them through the console. Here is the code from my site that is not setting/persisting the text field values: (function() { // Establish a function that does stuff. var onInit = function() { // TODO: Remove cookie page code var page = window.location.pathname; // Make sure page is a promotable page, which is only the homepage for now if (page == '/home' || page == '/') { // Hide the div element divElement2.style.display = 'none'; changeHiddenFieldValueVersion2('id="text-c8497229-d39f-40d4-8747-c10b953ed4c1-field"', 'RIDVAL'); changeHiddenFieldValueVersion2('text-13c3c81c-09fe-4c25-9ef0-89681a9f4bf1-field', 'SIDVAL'); } }; // Initialize the fn on site load. onInit(); // Reinit. the fn on each new AJAX-loaded page. window.addEventListener("mercury:load", onInit); })(); Does anyone know why my form changes would work in the console but not in the code above? Is there another event handler I should be embedding the calls within? (More generally, can anyone explain the execution timing mechanisms of how Squarespace's React implementation handles the form creation, user entry and submissions processes?) Thanks in advance! I will continue to research this problem and post any findings and solutions in this thread for the broader community.

Hello everyone, I am attempting to programmatically set two hidden form field values (i.e. SQF_RID and SQF_SID) based on a tracking ID that I pick up from a variety of sources, including from cookies which means I cannot use the Squarespace querystring parameters to set the form fields. As many of you know, you can no longer use the following standard javascript that many of us had long utilized before the Squarespace Form changes a few months back. function setFormField(name, value) { // Grabbing the form field by its name var field = document.getElementsByName(name)[0]; // Checking if the field exists and is a text or hidden field if (field && (field.type === 'text' || field.type === 'hidden')) { // Setting the value of the field field.value = value; } } @sorca_marian has created an excellent YouTube video and associated GitHub code samples that are generally applicable to this topic. In it he references a relevant StackOverflow thread that itself references a related blog article. I highly recommend following Marian's YouTube channel if you are interested in Squarespace javascript coding solutions. Unfortunately, I can't seem to get his code samples to work with my site. I believe the values are initially set correctly but must be overwritten by the Squarespace React implementation at some point as the original default form values are what show up when the form is submitted. Here are the three functions that I am currently testing that have not worked thus far: function changeHiddenFieldValueVersion1(fieldId, value) { var input = document.getElementById(fieldId); if (!input) return; // Exit if the element is not found var nativeInputValueSetter = Object.getOwnPropertyDescriptor( window.HTMLInputElement.prototype, "value" ).set; nativeInputValueSetter.call(input, value); var inputEvent = new Event("input", { bubbles: true }); input.dispatchEvent(inputEvent); } function changeHiddenFieldValueVersion2(fieldId, value) { var input = document.getElementById(fieldId); if (!input) return; // Exit if the element is not found Object.defineProperty(input, "value", { value: value, // Programmatically changed value writable: true }); var inputEvent = new Event('input', { bubbles: true }); input.dispatchEvent(inputEvent); } function changeHiddenFieldValueVersion3(fieldId, value) { var input = document.getElementById(fieldId); if (!input) return; // Exit if the element is not found var nativeInputValueSetter = Object.getOwnPropertyDescriptor( window.HTMLInputElement.prototype, "value" ).set; nativeInputValueSetter.call(input, value); var inputEvent = new Event("input", { bubbles: true }); input.dispatchEvent(inputEvent); var changeEvent = new Event('change', { bubbles: true }); input.dispatchEvent(changeEvent); } Here are the function calls that are being called onInit that I'm using (using hardcoded values for test purposes). (function() { // Establish a function that does stuff. var onInit = function() { // TODO: Remove cookie page code var page = window.location.pathname; // Make sure page is a promotable page, which is only the homepage for now if (page == '/home' || page == '/') { changeHiddenFieldValueVersion3('hidden-64ca8128-d5af-46d9-9804-6e2c8b3f79a4', 'TESTRIDVAL'); } }; // Initialize the fn on site load. onInit(); // Reinit. the fn on each new AJAX-loaded page. window.addEventListener("mercury:load", onInit); })(); Does anyone have any advice on why this code shouldn't be working? I would greatly appreciate any working code samples that address my particular issue. Happy to like/follow/recommend the online social media accounts of helpful responders. Additionally, Squarespace technical support should really be providing some contribution to these threads in service of their paying customers. Hope this changes for the better in the future.