Styling Cognito Forms with CSS

Quick Tip

Cognito Forms now uses CSS variables (also called custom properties) for styling embedded forms. Visit our Advanced CSS help guide to learn more.

Take your Cognito Forms to the next level with additional styling options from CSS.

Why bother with CSS?

You can already style any Cognito Form by picking colors, fonts, and backgrounds in the Style Editor. It’s super simple. But if you’re looking for more fine-grained control, you can get the results you want with CSS.

What is CSS?

CSS stands for cascading style sheets, which are text documents that define how web pages look. CSS is what saves the internet from being a sea of black, white, and Times New Roman.

Behind every web page is an HTML document that explains to the browser what elements will go on the page. Examples of HTML elements are text fields, paragraphs, headers, or images. These elements have different properties that can be affected by CSS. Without CSS for those HTML elements, that page will be very plain. We want your forms to be as awesome as possible, so we’re going to show you how to use CSS to define how some key elements of how your Cognito Form look.

I’m going to start by explaining the very basics of CSS and then give you the know-how to style your forms the way you want. So if you know very little about CSS, but still want more control than the Style Editor gives you, this article is for you.

CSS basics

Let’s start by writing some CSS. Don’t worry about where to put this just yet; we’ll cover that at the end.

We’ll begin with a specific task—changing the background color of the submit button. You can already change the color of buttons on your form from the Style Editor, but let’s say that you want the submit button color to be different from other buttons. CSS works by assigning values to the different properties of a selected element, one by one. The element’s background color is an example of such a property. So, to change the color, we need to know three things: 1) How to select the submit button, 2) the name of the background color property in CSS, 3) and what value we want for the background color.

Selecting elements

You can select an element or group of elements using a string of text known as a selector. It is similar to a postal address. So, how do you determine the selector for an element? We provide a list of common selectors in our help topic (as well as at the bottom of this post). The Cognito Forms submit button selector is:

#c-submit-button

This will select the submit button and only the submit button. So now, we just need to know how to change its background color.

Properties and their values

The submit button has several different properties-its background color, its text color, its font, its width, etc. Usually the property name is pretty straightforward, and that is the case for background color. The property name is:

background-color
Now, we just need to know what value to set that property to. Of course, this value will need to be a color. CSS uses six-character codes, called hex values, to identify colors. You can get hex values in a lot of different ways (Photoshop, websites, etc.); one way would be to use the color picker in the Cognito Forms Style Editor.

I’ve picked out a dark sea-foam hex color which has the value of #15c999 (All hex values start with a pound sign, by the way. If you wanted to tag a hex value on Twitter would it be ##15c999? I’m not sure).

Putting it all together

So we have the three bits of info we need to change the submit button color. The selector, the property name, and a value to set the property to. Now, we just need to know how to put it all together. It will go in this format:

[selector] {
    [property name]: [property value];
}

In our specific case, that’ll be:

#c-submit-button {
    background-color: #15c999;
}

This is !important

Since there may be other styles that could influence the color of our submit button, we need to make sure the declaration we just wrote takes highest priority. If we put “!important” after the property value and before the semicolon, it will ensure our CSS will be the one that gets applied even if there are conflicts. So our final CSS will look like:

#c-submit-button {
    background-color: #15c999 !important;
}

Don’t feel limited, you can change as many property values as you want with one selector. Just put them all between the curly braces like so:

[selector] {
    [property name]: [property value];
    [property name]: [property value];
    [rinse and repeat]
}

Also, the spacing is just to make it nice for humans to read. To the browser, these two ways of writing our declaration are identical:

#c-submit-button {
    background-color: #15c999 !important;
}

#c-submit-button{background-color:#15c999 !important;}

Where to put your CSS

So, where does this CSS go? If you’re embedding a Cognito Form into your own web page, you should have access to add your own CSS to that page. If you are handy with HTML, you can link to a custom CSS document from an HTML page. A CMS might also have a place for you to put custom CSS. If you’re using WordPress, here’s a helpful tutorial for how to add custom CSS. If all else fails, you can put it right before your embed code, surrounded by <style> tags. Like this:

<style>
    [your custom CSS]
</style>

[your embed code]

Cognito Forms selectors and common CSS properties

So now that you know the basic structure of CSS and how to tie it to your form, now you just need to know more of the specifics. Check our our CSS help topic to view several useful Cognito Forms selectors, common properties, and some of the values those properties can take.

Example

Below you can see some example CSS I added to an embedded form. Click the “results” tab to see how the form looks. Feel free to play around with the below example by adding and removing CSS.

Digging deeper into CSS

This article just scratches the surface. If you’re curious about the logic of constructing selectors or want to learn more properties, you can easily get more info. Here are some websites to get you started:

• MDN Getting Started Guide
• CodeCademy Class