How to style forms - step by step CSS for beginners

CSS is probably the simplest coding language ever invented and takes all of a few days to really come to grips with.

Keeping things simple, the format of css is:

css_selector { 
    Thing_You_Want_To_Change: Values;
}

E.g.

.form-control { 
    font-family: Poppins !important;
}

.form control is the css_selector (the name of the thing we want to change).

"font-family" is the thing we want to change.

"Poppins" is the value of what we want to change it to.

"!important" just overrides any other values that may have been set. It's not normally required, but we've added it to every value below just to play it safe.

The format of CSS is usually as follows:

css_selector {
  thing1: value1;
  thing2: value2;
  thing3: value3;
}

E.g.

.form-control {
    height: 50px !important;
    font-family: Poppins !important;
    font-size: 18px !important;
}

Notice, after the value of the thing I want to change, there's a colon like this :

I leave a space, then the value, then !important;

In Page Settings > CSS or Site Settings > CSS if you type !, it'll automatically add "important" for you.

Always remember to finish each line with a semi-colon like this ;

Finally make sure you've got the last curly bracket } on it's own line at the end.

Where do you find CSS Selectors?

To find the CSS selector, you want to add the form to a page, and preview the page.

Right click on the particular part of the form that you want to edit and choose "Inspect".

A right sidebar window will open in your browser and show HTML code at the top, with CSS at the bottom.

As you move your mouse through the HTML code, you'll see different sections highlighted on the page.

Find the right element and then right click on it and choose "Copy" and "Copy Selector".

Paste it into the Page Settings > CSS.

Next you need to decide what you want to change.

Popular CSS Selectors For Forms

.form-control - input fields

.btn-primary - submit button (colors can easily be set in the site builder).

#form-style - form background (can easily be set in the site builder)

Popular "Things" You Want To Change In Forms

height - usually a set number of px. E.g. 50px

width - usually a %. E.g 100%.

font-family - The font name E.g. Poppins

font-weight - a number from 100 to 900 rounded to the nearest 100. E.g. 700

color - the color of the text.

opacity - best bet is just to always set opacity: 1;