Streamlined (Minimalistic) Form - adjusting First Name/Last Name and "(required)"

I was hoping for a more minimalist form. It seemed I wasn't the only one, so wanted to share what worked for me. 

The following code took a lot of manipulation to get working (I'm sure Tuaphan, Paul, or others could improve it), but it's functional now. 

Main adjustments: 

• "First Name" & "Last Name" is now just "Name"
  • The input bubble for "Name" matches the length of other input bubbles
• "(required)" has been replaced with a red asterisk.
  • To remove the asterisk as well, simply replace it with a space in the code.

Here's the current code (place in footer code injection): 

<script>
document.addEventListener("DOMContentLoaded", function() {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.addedNodes.length) {
                // Hide and pre-fill last name fields
                var lnameFields = document.querySelectorAll('.last-name input, .newsletter-form-field-wrapper.field.last-name');
                lnameFields.forEach(function(field) {
                    field.style.opacity = '0';
                    field.style.position = 'absolute';
                    field.style.width = '1px';
                    field.style.height = '1px';
                    field.style.margin = '-1px';
                    field.style.padding = '0';
                    field.style.border = '0';
                    field.style.clip = 'rect(0,0,0,0)';
                    field.style.overflow = 'hidden';
                    if (!field.value.trim()) {
                        field.value = 'N/A';
                    }
                });

                // Replace "(required)" with an asterisk
                document.querySelectorAll('label, span').forEach(function(element) {
                    if (element.textContent.includes('(required)')) {
                        element.innerHTML = element.innerHTML.replace('(required)', '<span style="color: red;"> *</span>');
                    }
                });

                // Adjust the text "First Name" to "Name"
                document.querySelectorAll('label').forEach(function(label) {
                    if (label.textContent.includes('First Name')) {
                        label.innerHTML = label.innerHTML.replace('First Name', 'Name');
                    }
                });

                // Remove or hide the "Last Name" text
                document.querySelectorAll('label').forEach(function(label) {
                    if (label.textContent.includes('Last Name')) {
                        label.style.display = 'none';
                    }
                });

                // Extend the "First Name" field to full width
                var fnameField = document.querySelector('input[type="text"]');
                if (fnameField) {
                    fnameField.style.width = '200%'; 
                }
            }
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
});
</script>
 

Thank you Squarespace and forum contributors always. 

Can you share link to page where you use form?