New Form Block Error Message input-field border red

Hi Stephan,

Since your script already sets aria-invalid="true"/"false" on each field, you don’t need to change the JS at all — that attribute is the perfect CSS hook. This is plain CSS rather than a built-in GB feature, so you can add it to your existing custom CSS:

.gb-form-field__input[aria-invalid="true"] {
  border: 2px solid #b90000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%23b90000'%3E%3Cpath d='M256 32C132.3 32 32 132.3 32 256s100.3 224 224 224 224-100.3 224-224S379.7 32 256 32zm0 384a32 32 0 110-64 32 32 0 010 64zm24-152a24 24 0 01-48 0V152a24 24 0 0148 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px;
  padding-right: 44px;
}

/* For the textarea, pin the icon to the top instead of vertical center */
textarea.gb-form-field__input[aria-invalid="true"] {
  background-position: right 12px top 12px;
}

The border gives the visual cue, and the inline SVG adds a warning icon as a second, non-color signal — which is exactly the right approach for color blindness. No extra ARIA is needed for the icon, since your aria-invalid plus the aria-describedby error text already convey the error to screen readers.

Since your input handler resets aria-invalid to "false" on the first keystroke, the border and icon clear automatically the moment the user starts correcting the field — which works out nicely.

Glad it’s working, no problem!