How to Replace 'Required' Text with Red Asterisk in Squarespace 7.1 Forms
Squarespace form fields automatically display the word "required" adjacent to the label for required fields.
Although it is technically accurate, it’s a damn ugly statement and distracts users.
Modern websites often use a simple red asterisk (*) to indicate required fields, keeping forms clean, minimal, and intuitive.
Here in this guide, you will find how to achieve this effect with a clean CSS method:
Overlay the default "required" word,
Replace it with a simple *,
Transform a normal-looking form into an impressive-looking one in seconds!
Works great with Contact Forms, Newsletter Signup Forms, Popup Forms, and any Squarespace Form Block.
The Full CSS Code You Need
Paste this inside:
Design > Custom CSS in your Squarespace site.
/* Hide the default 'required' text */
.sqs-block-form span.required {
visibility: hidden;
}
/* Add a red asterisk before required fields */
.sqs-block-form span.required:before {
visibility: visible !important;
content: "*";
font-weight: 400;
color: red;
margin: -0.4vw;
}
Now, instead of "required", users will see a neat red * next to required fields.
How This Code Works (Explained)
| CSS Rule | What It Does |
|---|---|
| .sqs-block-form span.required | Hides the default text that says "required". The span still exists, but it's invisible. |
| .sqs-block-form span.required:before | Inserts a visible * (asterisk) before the hidden word, using :before pseudo-element. |
| visibility: visible !important | Forces the asterisk itself to be visible even though the original span is hidden. |
| content: "*"; | Tells the browser to display an asterisk symbol. |
| font-weight: 400; color: red; | Makes the asterisk light-weight and colored red for better visibility. |
| margin: -0.4vw; | Adjusts spacing so the asterisk lines up nicely with form labels. |
✓ Smart technique
✓ No JavaScript needed
✓ Works cleanly across browsers.
Where This Code Works
| Section | Effect |
|---|---|
| Contact Forms | Asterisk replaces "required" |
| Product Inquiry Forms | Clean asterisk styling |
| Newsletter Signup Forms | Cleaner input fields |
| Popups or Embedded Forms | Consistent minimal design |
All Squarespace form types will instantly look more professional.
Customize the Style (Optional)
Want to tweak the asterisk size, color, or positioning?
Here are a few extra options:
.sqs-block-form span.required:before {
visibility: visible !important;
content: "*";
font-weight: bold
font-size: 18px;
color: #ff6600; /* Brand orange color */
margin-left: 5px;
vertical-align: top;
}
You can:
Make it bold
Change size (larger for mobile-friendliness)
Adjust spacing perfectly for your design
Customize it to match your brand perfectly!
Important Notes:
| Tip | Why |
|---|---|
| Always use visibility: hidden instead of display: none | Keeps HTML structure intact for accessibility |
| Test on all device sizes | Asterisks must be clearly visible on mobile too |
| Keep a small left margin | To avoid the asterisk sticking too close to the field label |
| Choose color carefully | Red is standard for errors, but you can match your brand color |
Careful styling = better user experience!
Final Result
After adding this code:
Every field required is represented by a tiny, sleek asterisk instead of a messy “required” word.
Your forms will look modern, minimal, and user-friendly.
Builds trust and professionalism with no fuss.
Conclusion
It's a simple CSS solution to get rid of the ugly "required" label and instead display a clean, neat asterisk * next to your form fields in Squarespace 7.1.
It’s a professional web design standard that’s now accessible to you in this template, which includes all the bells and whistles and awesome functionality of the Type Network standard.
Quick setup, easily customizable, and responsive.
FAQ: Replacing “Required” with Asterisk in Squarespace Forms
1. Why does Squarespace display the text of “required” next to form fields?
“Squarespace automatically appends the word ‘required’ to make it obvious what’s required for people to fill out. But the text can be an eyesore and get in the way of a clean, minimal look.
2. Can I eliminate the text “required” and not break the form’s operation?
Yes! visibility: hidden will hide the word, but the span won't be removed from the DOM. This allows for occasional accessibility and functionality as the form still correctly validates.
3. How do I replace "required" with an asterisk?
With a pseudo-element, before using CSS, you add a red asterisk before the hidden text. The visual end result above would be a neat *, with whatever you like as the style.
.sqs-block-form span.required:b efore {
content: "*";
color: red;
visibility: visible! important;
}
4. What part of my Squarespace site do I put this code in?
Go to:
Design → Custom CSS
Paste the CSS code given in this file. No fiddling with code snippets or developer mode.
5. Does this apply to all Squarespace forms?
Yes. This method works on:
Contact Forms
Newsletter Signup Forms
Product Inquiry Forms
Popup Forms
Embedded Forms
6. Can I customize the asterisk to pick up my brand colours?
Absolutely. You can customize:
Color (color: #yourcolor)
Font size (font-size: 16px)
Spacing (margin-left, vertical-align, etc.)
Font weight (font-weight: bold)
7. Does this work for mobile?
Yes, but you should probably:
Test your form on mobile
The text may be too small – increase the font a tiny bit if it is.
8. When would you use visibility: hidden over display: none?
Why? Because visibility: hidden hides the element visually but keeps it in the layout and accessible to screen readers, this is so much better from a usability and accessibility point of view.
9. Will it affect form processing or error checking?
No, this would only change the appearance of the label. The fields required still continue to validate and respond as would normally be expected in the form submission.
10. Is there a way to revert this change?
Yes. Simply delete the custom CSS from the Custom CSS section, and it will go back to show “required” as default.
