How to customize active form fields in Squarespace
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About this tutorial
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
Ever wished you could make your input fields pop when someone's typing away?
This tutorial shows you how to change the style of active form fields with your own custom code.
You can create background colors that are on brand and custom bold outlines; the possibilities are endless
If this is your first time using CSS for Squarespace awesome! I have a lot more to teach you - check out my free class on basic CSS for Squarespace here: insidethesquare.co/learn
Video tutorial
Code Example
Here is the code used in this tutorial video; make sure you update the background and borders to your own unique style. Check the related content links for more ideas on customizing your code!
.sqs-block-form .field-list .field input:focus,
.field textarea:focus {
outline: none!important;
background: lightyellow!important;
border: none!important
}
