If you want to create a custom or unique style for your forms, then CSS is the answer. In this article we will go through the steps required to start building individual style definitions for each of your forms.
Firstly, what is CSS?
CSS stands for Cascading Style Sheets and is the code used to define the style of each element displayed in your browser page. With the help of this code your browser pages transform from a simple plain text page to the incredible visual layouts that help you structure the information for a more easily to read, understand manner.
How can I read a CSS definition
Every CSS definition is composed from three main components:
Selectors: the element that you want to apply styles to, this can be any element found on your page from a heading, paragraph, images…
Properties: the specific style you want to change, such as font size, color, spacing
Values: the specific style effect you want to apply to your element
Let’s take a very simple example:
.kaliforms-form-container h3 {
color: red;
}
The selector in this case is .kaliforms-form-container h3, the property is color and the value is red. This will change the font color of all h3 tags, the actual form title, in the form to red. You can also read this as “change the color of all h3 tags that are contained in the kaliforms-form-container class to red”.
In Kali Forms the form element has a default class assigned: kaliforms-form-container. Using this class you can make sure that your CSS definitions will only target the elements of your form, the rest of the elements on your page will not be affected. If you have any h3 tags on your page aside from the form title then the above CSS definition will not affect them.
How can I find the correct selectors for my form
You can easily see what elements are contained in your form with the help of the developers tools available in your browser. You can try hovering your mouse over the element you want to change the style for, use the right click to open a small actions menu, then select Inspect element.
This will open a small window at the bottom of your browser page with the HTML code used to generate the element.
Where do I add my CSS definitions
After you identify the element you want to change the style for, you will need to start adding your desired CSS definitions. Your CSS code needs to be added in the Custom CSS section. You can find this configuration tab by navigating to Kali Forms > All forms > Contact form > Settings > Custom CSS.
Let’s change the color, font-size, case, make the text bold and also underline the form title.
This editor comes with a built-in syntax highlight feature, so you can easily ensure that no syntax errors will be generated during your edits. You do not need to use the standard style tags, just add the CSS definitions directly.
After saving our definitions all we need to do is refresh the form page and see the result.
