css for squarespace: customize your contact form

Let me let you in a little secret of mine - I have a habit of implementing a little extra CSS code to pretty much all of the websites jgdigital.co designs for our clients. Don't get me wrong...I love me some Squarespace, but sometimes the existing templates don't deliver the bespoke look and feel I'm going for.  Which means I have to pop in some simple CSS to get things looking shipshape for our clients. And, while you don't have to go the extra mile to create a beautiful design, I've found that adding a little extra customization can go a long way when it comes to your website.

One of my go-to CSS hacks for Squarespace is to create a custom contact form, complete with a client's brand colors and styling. It's super simple and takes an otherwise blah form up a few notches. If you are a newbie when it comes to CSS, I urge you not to be intimidated. You'll be amazed at how quickly you can take your site up from basic to custom with just a few simple lines of code.

 Learn How to Remove Hyphens in Text Blocks on Mobile - For Good! FREE & Simple CSS Code and Step-by-Step Process Included by jgdigital.co

While I am still learning the intricacies of CSS, I often look to Pinterest for inspiration and direction. There are a bevy of resources out there when it comes to customizing a Squarespace contact form, but I most recently came across this bit of custom CSS coding on the Forth and Create website and wanted to share it with you. What's great about this code is you can change the thickness and the color of your form to fit your branding. Follow along below...seriously, it will only take you about 5 minutes to implement! 

step one

Copy this code:

/// Custom Contact Form

.form-wrapper .field-list .field .field-element{ border:none;

border-bottom: 3px solid;

border-color: #000000;

background: #fff; } }

Next, paste it in your Custom CSS box. You can find it by going to Design > Custom CSS.

Step two

Now it's time to make the brand your own by customizing it with your brand colors.

If you prefer a color that isn't black take your color hex code and replace the border-color: #000000; to whichever color you prefer. One of my favorite resources for color selection is the Eyedropper Extension for Google Chrome. It's free and allows you to "capture" and save random hues you come across online, so no more trying to match that pretty pale gray or creamy neutral just by eye balling it. But, I digress...back to the CSS.

For the contact form on this site, I played around with a variety of black lines, but ultimately decided to use a pale blush hue #f2e5e0 that works really nicely with our branding.

CSS for Squarespace: How To Create a Custom Contact Form Example 1

step three

An voila, you now have a new contact form design! 

But let's say you want a different line thickness. Go back to your CSS code and fine this line:

border-bottom: 3px solid;

Adjust the pixel size until you're happy with it. 

For example, maybe you want a thinner line so you change the pixel number to 2...

border-bottom: 2px solid;

Or, maybe you would prefer a thicker line so you change the pixel number to 5...

You can even add a dotted line if you want something other than just a simple black line. 

border-bottom: 2px dotted;

You will get this result...

CSS for Squarespace: How To Create a Custom Contact Form Example 2

Or perhaps, you don't want a line at all and would prefer that the input field standout just a tad more.

Go back to your CSS code and fine this line: 

background: #fff;  }

Go ahead and change the hex code to one of your brand colors, and you might end up with something like this...

CSS for Squarespace: How To Create a Custom Contact Form Example 3

Now that was easy, wasn't it?

I'd love to see how you used this code to brand your own contact form. Drop your link in the comment section so I can check it out. Having trouble or looking for another CSS tip or trick? Give me a shout and we will give you a hand!