DIY | Library | Form Block
This post focuses on how to customise your Squarespace CSS form block using practical, easy-to-adapt code snippets. Form blocks are great for contact forms, signups, or enquiries—but sometimes they need a little help to match your site’s aesthetic. Below you’ll find accordion blocks with CSS to change spacing, field sizes, button design, font styling and more.
I’ll keep adding useful snippets as I discover new solutions. As always, reach out to me at sarah@foubography.com if you have any questions or requests.
-
/* Form Block - Change style of Button */
.form-wrapper .button.sqs-system-button.sqs-editable-button {
margin-top: 40px;
} -
/* Form Block - Change active form field */
.sqs-block-form .field-list .field input:focus, .field textarea:focus {
outline: 2px solid #283B28 !important;
border-color: none! important;
background: lightyellow !important;
} -
Hide required on field titles Tip by sf.digital / .form-wrapper .react-form-contents .field-list .title .required, .form-wrapper .react-form-contents .field-list .fields .description.required { visibility: hidden; } .form-wrapper .react-form-contents .field-list .title .required:before, .form-wrapper .react-form-contents .field-list .fields .description.required:before {
visibility: visible;
content: "";
font-size: 1.5em;
line-height: 1em;
}
.form-wrapper .react-form-contents--submitted .required:before {
visibility: hidden!important;
}
Related posts
Looking to customise your Squarespace site with code? This post is part of the DIY | LIBRARY —a growing collection of practical code snippets designed for Squarespace users who want to take control of their site’s design and functionality. Whether you’re tweaking your navigation, adjusting your mobile menu, or styling buttons, these copy-paste solutions are clean, reliable, and built with SEO and usability in mind. Bookmark this space for easy access to Squarespace custom code that works.
