Stylish *Required Indicator for Squarespace Forms

Replace the default (required) text in your Squarespace form fields with a clean, minimalist blue circle. On hover, the word “Required” appears next to the dot in a subtle, accessible way — keeping your design tidy without losing clarity.

---

Step 1: Add Custom CSS

1. Navigate to Design > Custom CSS.

2. Paste the following CSS code into the Custom CSS editor:

3. Save your changes.

/* Hide the default (required) text */
.form-wrapper .field-list .title span.required {
  font-size: 0 !important;
  position: relative;
  display: inline-block;
}

/* Add the blue circle and shift upward */
.form-wrapper .field-list .title span.required::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #CIRCLE-COLOUR-HERE;
  border-radius: 50%;
  position: relative;
  top: -1.5px; /* adjust for alignment */
  margin-left: 6px;
  cursor: help;
}

/* Show 'Required' text on hover and align it with the dot */
.form-wrapper .field-list .title span.required:hover::after {
  content: " Required";
  font-family: 'YOUR-FONT-HERE', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #YOUR-COLOUR-HERE;
  margin-left: 4px;
  position: relative;
  top: -1.5px; /* match the dot's vertical shift */
}