How to customize active form fields in Squarespace

Ever wished you could make your input fields look perfectly "on brand" when someone's typing away, matching your colors & your unique site style? The Squarespace default is a solid black outline, which is great for accessibility! But thanks to CSS, w can make it even more unique.
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!
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
}
Related Content Links: Learn More About #squarespacecss
⭐️ Free training on Squarespace CSS Basics: insidethesquar...
📺 Free Tutorial: How to create borders with code: insidethesquar...
🎨 Article: Your guide to creating color with code: insidethesquar...
- -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕ buymeacoffee.c...
-
⭐ NEW: grab the 5 codes I use on every site: insidethesqure...
- -
📑 Get access to my collection of CSS codes for Squarespace at insidethesquar...
- -
💻 WEBSITE → insidethesquar...
📧 NEWSLETTER → insidethesquar...
🤳 INSTAGRAM → / thinkinsidethesquare
- -
💸 GET 10% OFF YOUR FIRST YEAR OF SQUARESPACE 💸 Use my affiliate link and code INSIDE10 - You'll save 10% off your first annual subscription & Squarespace will give me a little commission for sending you their way 😎 🔗 INSIDE10 → insidethesquar...
- -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥

[@Digital.Done.Right.]

Wow Wow Wow this is really cool and so simple too!

[@InsideTheSquare]

I'm so glad you think so! I love these little details. Making sure your brand style is everywhere on your Squarespace website is such a great way to make it uniquely yours 😎

[@curtisclark802]

Not a color change - but can this method generally be used for adding character limits to text fields on forms? Thanks!

[@InsideTheSquare]

Intersting question! The CSS codes used in this video are for style (cascading Style sheet) to adjust functionality and create field parameters like this, you'll need to use a different code language. I would recommend posting in the Squarespace forum to see if any coders have developed a plugin that could help: forum.squarespace.com

[@kluttman2]

Hi Becca! I love your channel, very informative. I was looking to do a conditional form on a client's page. Do you have any suggestions or a video made for that?
Thanks!

[@InsideTheSquare]

That's a great question! Unfortunately, Squarespace doesn't have that functionality at this time. I use Google forms as a workaround for that; it's free and fairly easy toe embed in an .

[@Hannah-ll9ty]

Hi Becca! Thanks so much for sharing! :) I wanted to add a border and background color for active form fields for my contact form, and this code works, but for some reason it only worked for adding a border. The background color doesn't show up at all in any of the active fields. And neither the border or the background color worked for field labeled, "Message". Is there something I need to add to my code?
Here is the code I am currently using:
.sqs-block-form .field-list .field input:focus,
.field textarea:focus {
outline: none!important;
background: #f3f2eb!important;
border: 1px solid black!important
}

[@InsideTheSquare]

Thanks so much for commenting with the code - i tested it on my demo site and the form is being super picky!!! To be honest, when this happens, it usually means that SQSP is messing with the code for some kind of change they haven't announced yet 🫠 I did a little extra special digging and for you some advanced selectors to make this work. Give this a try and lemme know how it goes!
.sqs-block-form .form-item input:not([type="checkbox"]):not([type="radio"]):focus, .sqs-block-form .form-item textarea:focus, .sqs-block-form .form-item .file-display:focus, .sqs-block-form .form-item select:focus,
.sqs-block-form .form-item textarea:focus {
outline: none!important;
background-color: #f3f2eb!important;
background: #f3f2eb!important;
border: 1px solid black!important
}

[@Hannah-ll9ty]

@@InsideTheSquare Hi Becca! Thank you SO much for your response and for helping me out!! :) So, I gave it a try and it worked beautifully, but it only worked in editor mode. As soon as I exit out of website tools where I edit custom CSS, and I reload the page or log back into my account, it goes back to the way it was before.

[@newshapes.studio]

Having the same experience! It didn't change anything for me.

[@YvonneBrandt-pj9pi]

Is there a way to update this code for a newsletter? I've tried everything and can't seem to figure this one out.

[@InsideTheSquare]

Newsletter blocks have different selectors. Try using this selector from my CSS cheat sheet:
.newsletter-block .newsletter-form-field-element:focus

[@chrisgironde6669]

Question about contents of fields after completion
Hi Becca
I process a completed form via freebie version of zappier to confirm with the person who submitted it that it’s been submitted. Bit like confirmation email you get when completing an Amazon order.
Trouble is if a couple of fields have been left blank ( totally valid for this to happen) the automated email gets muddled up where the blank fields are.
Do you know of a way to automatically put a N/A in any empty fields upon submission of a form ?

[@InsideTheSquare]

I have no clue -maybe Zapier has an autofill setting? 😬 Sorry I can't be of more help!