Jump to content

Contact form active field border issue

Recommended Posts

https://sepia-koala-36ck.squarespace.com/contact

Password: Sqs45d6tttt

I'm trying to add a border on the fields when they are active, same as the newsletter fields in the footer.

I've tried this but doesn't seem to stick (it works when I have the Custom CSS panel open, but when that's closed it does not (odd!)

 

// change the contact form border colour and input field when active //
.sqs-block-form .field-list .field input:focus, .field textarea:focus {
outline: 2px solid #7CCCBD !important;
}

Thanks for any help 🙂

Edited by AdamBlyth
spelling
Link to comment
  • Replies 2
  • Views 90
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

You shouldn't need code for this any more (may be why your code isn't working) as Squarespace have add a lot of style options to the Form block, including field focus effects, you can find them in the Styles menu.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Thanks for the tip.  I've got what I need now with a little tweaking.

Under Styles > Forms > Effects > Hover & Focus, I selected 'Outline' (previously I had selected 'Accent').

This provided a white border around the field on focus.

I then used the same code above to change that border to my desired colour and it worked:

// change the contact form border colour and input field when active //
.sqs-block-form .field-list .field input:focus, .field textarea:focus {
outline: 2px solid #7CCCBD !important;
}

 

Edited by AdamBlyth
spelling
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.