Editing Forms

Sometimes the default form styles just don't cut it. When that's the case, style the elements with some pretty simple CSS.

General Form Text

This first chunk redundantly forces whatever font you'd like the form to appear in. It applies to all text in the form — except for placeholder text, which we're getting to.

I used Georgia in these examples, but you can use any websafe font. That includes fonts have selected to use on your website. For instance, I use Le Monde Sans on this website so instead of Georgia I'm using "le-monde-sans-std".

CSS

form {font-family: Georgia !important;}
form input[type="text"],
form textarea {
  font-size: 20px !important;
  font-family: Georgia !important;
}

Example

Notice how it's working here...

Placeholder Text

CSS

::-webkit-input-placeholder {font-family: Georgia;}
     :-ms-input-placeholder {font-family: Georgia;}
          ::-moz-placeholder {font-family: Georgia; /* FFx 19+ */}
           :-moz-placeholder {font-family: Georgia; /* FFx 18- */}

NOTE: When you've got these system-specific fixes, I find it helpful to indent them until all the elemnents are in line. This makes for easier editing and is more legible.

Example

Survey *
Survey
I'm getting this
I'd like to know more about CSS

More You Can Do

Extras

As you've seen in these forms, I prefer to make the descriptions all-caps (it carried over from my own site's custom CSS; the selector is form div.description. I've also resized the size of the two different survey questions above (I'M GETTING THIS and I'D LIKE TO KNOW MORE ABOUT CSS); that selector is form div.question and I'll share the CSS I'm using.

CSS

/* description text: all caps */
form div.description {
  text-transform: uppercase; 
  letter-spacing: 0.5px;
}

/* survey questions: decreased size */
form div.question {
  font-size: 15px !important; 
  text-transform: uppercase; 
  letter-spacing: 0.5px;
}

Got it?

Squarespace does a great job with forms in general, but if you can, it's usually advisable to tweak the CSS a little to match the rest of your site a little better.

If you're having trouble with this, leave a comment or contact me.

Max Buchholz at Distilled Studiocss1 Comment