Squarespace 7.1 form inputs use the .form-item input and .form-item textarea selectors. Override their borders, padding, and background to match your site design.
Don't skip the focus state — it tells users which field they're typing in. A colored border or subtle box-shadow on :focus is standard practice for accessibility and usability.
.form-item input,
.form-item textarea {
border: 1px solid #ddd !important;
border-radius: 6px !important;
padding: 12px 16px !important;
background-color: #fafafa !important;
font-size: 16px !important;
transition: border-color 0.2s ease;
}
.form-item input:focus,
.form-item textarea:focus {
border-color: #e63946 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.15);
background-color: #ffffff !important;
}Generate custom form styles with our Form Styler toolTry it free →
