How to change the colour form input text
There may be occasions where you want to change the colour of form input text to better match your website’s branding or design theme. While Squarespace gives you a clean default style, it doesn't offer granular control over form input text colour within the style editor. Fortunately, with a small snippet of custom CSS, you can easily change the colour of input text across your forms for a more polished and consistent appearance. This tutorial will show you how to change the colour form input text on Squarespace 7.0 and 7.1.
Table of Contents
Why Change the Colour of Form Input Text?
Customizing form input text can:
Align your forms with your brand’s colour palette
Improve readability on custom backgrounds
Create a more visually cohesive design experience
Forms are often critical touchpoints for users—making them attractive and readable can enhance conversions and engagement.
Complexity: Easy
Step-by-Step Instructions
Step 1: The following code snippet below changes the colour of the form input text: From the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code below.
// Form input text colour // .form-block input, .field-element{ color: #000; }
Step 2: You can then adjust the colour settings to your liking.
Key Takeaways
Use custom CSS to style form input text and placeholders.
Enhances both aesthetic and accessibility of your forms.
Works across all input types like text, email, phone, and textarea fields.
FAQs
Will this affect all forms site-wide?
Yes, this code will apply to all standard form blocks unless scoped further with a class or ID.
Can I apply different colours to different forms?
Yes. You can target specific forms by wrapping them in a div with a unique class and modifying the CSS accordingly.
Does this change work on mobile?
Yes, the styling will apply consistently across all screen sizes.
Conclusion
Changing the colour of your form input text on Squarespace 7.1 is a simple yet impactful way to ensure your site feels cohesive and user-friendly. With just a bit of CSS, you can enhance your site's visual consistency and improve the overall user experience—especially in forms, where clarity and design both matter.
