CSS Tutorial: Taking the Mystery out of Form Design

Written by Heather Mueller on May 21, 2015

Posted in Form Design

If you’ve ever customized a WordPress theme or used a MailChimp template, you’ve benefited from CSS—even if you didn’t realize it. Cascading Style Sheets is a coding language used by web developers and designers to control how colors and fonts are rendered by different web browsers and devices. It can also be used to modify Formstack forms.

While Formstack’s drag-and-drop theme builder is a powerful way to stylize and brand your web forms, there may be times when you want even more customization. That’s where CSS comes in.

Cascading Style Sheets can be used to make detailed changes to your form’s appearance and better match it to your branding. If you’re new to CSS with Formstack, the following answers to common CSS questions will help you get started.

How do I start making changes to my form’s CSS?
To apply CSS to a web form, you’ll need to work within your form themes. There are two ways to access Cascading Style Sheets when using a Formstack theme.

You can find it within the form builder under “Theme.”

Form-Builder-CSS

Or you can get to CSS from the Themes tab.

CSS-Form-Themes


CSS-Form-Themes-2

How can I use CSS to customize elements like label colors and header fonts?
Making universal CSS changes to form themes requires getting to know the two main components of a CSS command line. (Don’t worry—it’s not as scary as it sounds!) For each element you want to change, you’ll need to type in a selector (the item you want to edit, often referred to as a “class” or “ID”) and a declaration (the element you’d like to change).

CSS-Selector-Declaration

What are some common Formstack CSS selectors?
If you’re new to Formstack CSS, you’ll love our handy list of common classes and IDs and cut-and-paste “how tos.”

How can I test changes before they’re published?
The best way to learn Formstack CSS is to try out different classes and IDs until you get comfortable making changes. You can create a new theme (or a second copy of an existing theme) for experimenting and testing. Then, when you’re ready, you can simply apply that theme to any form to change its styling.

If you’d like to see it all in action, we highly recommend this introductory CSS video tutorial.

Best of all, once you become comfortable with Formstack CSS you can easily make changes to one theme and apply them to multiple forms. Talk about an easy way to match your company’s branding!