Replace (required) with * asterisk in Squarespace 7.1 forms properly

An easy CSS only way but has accessibility issues

Screen readers (that read the website loud for people who have visual impairments) will pronounce both asterisk and required. Credits to tuanpan and paul2009 from this Squarespace forums thread:

span.description.required {
    visibility: hidden;
}

span.description.required:before {
    content: "*";
    visibility: visible;
    color: red;
  margin-left: -4px;
}

.react-form-contents--submitted span.description.required:before {
    display: none;
} 

Proper Javascript way

It’s a tricky one, because forms are loaded with React/JS after page is loaded now which makes it’s untargetable with regular Javascript functions like document.querySelector. Will have to wait until form is ready and only then apply our scripts. In a nutshell, we are just adding an asterisk which is hidden from screen readers with aria-hidden.

See also: form ready event (coming soon).

This code goes to Code Injection:

addEventListener("DOMContentLoaded", (event) => {
  
  document.querySelectorAll('.form-block').forEach(form => {
    
    	var obs = new MutationObserver(function(mutations, observer) {
    	for(var i=0; i<mutations.length; ++i) {
        for(var j=0; j<mutations[i].addedNodes.length; ++j) {

      
          if(mutations[i].addedNodes[j].classList.contains("react-form-contents")) {
           	var form = mutations[i].addedNodes[j];
            
          /* here we add the asterisk */
            form.querySelectorAll('.description.required').forEach(requiredLabel => {
            	requiredLabel.insertAdjacentHTML('beforebegin', `<span aria-hidden="true" class="asterisk-required">*</span>`);
            });
            
  
          obs.disconnect();
          }
        }
    }
    });

    obs.observe(form, {
      childList: true,
      subtree: true
    });
});


});

We still need to hide original required and we can add some styling to asterisk. Add this code to Pages › Website Tools › Custom CSS

.description.required {
	visibility: hidden;
}

.asterisk-required {
position: relative;
  top: -3px;
  color: red;
  margin-left: -5px;
}