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
Placeholder Text
CSS
::input-placeholder {font-family: Georgia;} :input-placeholder {font-family: Georgia;} ::placeholder {font-family: Georgia; /* FFx 19+ */} :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
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.