How to Customize Squarespace Form Fields using CSS

 
 

If you aren’t a fan of the standard contact form look on Squarespace, then you should be really excited about this weeks tutorial! CSS is a great way to update the style of your contact form to match the rest of your branded look. I created two copy+paste codes on my blog, but if you want to learn more about how they work and what you can do, be sure to watch the quick tutorial video below.

Option One

.field-list .field-element{

border-color: #50bdb8 !important;;//change color

border-bottom: solid 2px #50bdb8 !important;//change color size and type

border-left: none !important;

border-right: none !important;

border-top: none !important;

background-color: #eeffff !important;//change field background color

}

.field-list select:focus{

outline-color: #000000 !important;

}

.field-list .section{

border-color: #000000 !important;background-color: #f6c03c !important;

}

Option Two

.field-list .field-element{

border-color: #000000 !important;//change color

border-bottom: dotted 2px #000000 !important;//change color size and type

border-left: none !important;

border-right: none !important;

border-top: none !important;

background-color: transparent !important;//change field background color

}

.field-list select:focus{

outline-color: #000000 !important;

}

.field-list .section{

border-color: #000000 !important;

background-color: #000000 !important;

}

That’s all for today’s tutorial folks! I try to upload a new Squarespace tutorial every week. If you want to be notified when I post one, be sure to sign up for my email list below!