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 Two

.field-list .field-element{

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

border-bottom: dotted 2px #000000 !important;

border-left: none !important;

border-right: none !important;

border-top: none !important;

background-color: transparent !important;

}

.field-list select:focus{

outline-color: #000000 !important;

}

.field-list .section{

border-color: #000000 !important;

background-color: #000000 !important;

}

Option One

.field-list .field-element{

border-color: #50bdb8 !important;

border-bottom: solid 2px #50bdb8 !im

border-left: none !important;

border-right: none !important;

border-top: none !important;

background-color: #eeffff !important;

}

.field-list select:focus{

outline-color: #000000 !important;

}

.field-list .section{

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

}


Ready for more?


If you want to do more than update your form, download my CSS cheat sheet! 20 pages packed with my collection of tested CSS codes and pro tips you can use on your Squarespace site all in one PDF. The best part? You can download it right now.
css codes for squarespace.jpg