Styling Forms with CSS

Styling forms with CSS helps web developers customize forms to match company branding, increase the general aesthetics of their forms, and create a better user experience. CSS stands for cascading stylesheets and is supported by all major browsers. CSS uses what are called classes to reference and style specific form elements. Applying CSS to form elements can be implemented by hiring a developer, incorporating a library, or choosing from a theme/template.

Before styling forms with CSS, it’s important to understand how CSS is interpreted and how the CSS rules are applied. It is the browser’s responsibility to interpret and execute CSS rules. When a web page is loaded, the browser looks for inline CSS and CSS stylesheets referenced inside the HTML document or webpage. Inline CSS and stylesheet-based CSS accomplish the same result and are written similarly, but inline CSS is contained directly inside of HTML tags, whereas non-inline CSS is written inside a .css file, also known as a stylesheet. When the browser locates and reads the CSS rules and the classes associated with the rule, it then applies the styling.

When writing CSS, every rule requires a reference selector. There are three ways to reference form elements by selector: by ID, by class, and with attribute selectors. Rules always begin by using the selector, for example, input, input[type=text], input[type=email], or .input-element-class. Once the selector has been added, an opening and closing curly brace are added to encapsulate the style properties. For example, input {}. After the selector and curly braces have been added, the properties can be added inside the curly braces. For example, .input-element-class {border: solid 0.5px #1d1d1d;}

Classes are generally not known by memory and require a quick search to identify them. Online SaaS websites and WordPress plugins generally offer a documentation website covering various CSS selectors that are used, but classes/selector can also be found by accessing the built-in web inspector tool through your preferred web browser. For Chrome, you can access the inspector tool by clicking the 3 dot icon in the top right corner of the browser window, then selecting more tools, and lastly, developer tools. Once the Chrome inspector is open, enter Ctrl + shift + c. To locate the CSS selectors/classes, hover over the element or input field, and now a popup will display the class. The class is used to tell the browser which rules/styles to apply for that particular element or elements that share the same class.

How you style forms is ultimately a preference and is not a one-size-fits-all. However, there are modern design practices for styling form elements as well as web design best practices that should be adhered to. For example, the font size for field labels and input fields should be at least 16px. When input fields are less than 16px or pixels, the browser will auto-zoom on mobile devices and force part of the form to go outside the viewport or screen. Keeping the font size at a minimum of 16px also helps to make the form readable for the end user. The font-size property can be added to field labels and input elements with the following syntax: label {font-size:16px;} input {font-size:16px;}

Keeping your forms mobile-responsive is a critical design aspect of modern web design. Currently, over 50% of the World’s population accesses the internet with a mobile device. In CSS, a form can be styled for desktop, laptop, tablet, and mobile with what is called a media query. However, when possible, it is better to use percentages or % instead of pixels when defining the height or width of the form, the input elements, and the form submit button. For example, if a form’s width is set to 1000px, when viewing the form on a device smaller than 1000px, the form, including its inner elements, would become invisible or only visible until the window is scrolled to the left or to the right. For example, form {width: 90%;} is better than form {width:1000px;}. By using the % instead of pixels, the form's width will automatically adjust as the devices change or the screen becomes smaller.

If using pixels does not work for achieving a cohesive design or functional design, media queries should be used. Media queries are an additional rule that encapsulates the CSS rule for the particular element(s). When writing media queries, the device screen size is the factor at play. For example, this is how a media query is written, @media only screen and (max-width: 675px) { form{width:90%;}} The media query will make the form 90% wide when a user is viewing the page on a mobile device or a screen no larger than 675px. The specific max-width property is also called a breakpoint and defines the maximum width of the device to which the rule should be applied. Since media queries work for specific breakpoints, it is important to make sure your breakpoints match modern-day devices. Lastly, when using media queries, it is important to always have a CSS rule outside a media query so that if in the event a media query does not cover a specific breakpoint, the elements will still have styling.

As mentioned previously, form elements can be styled with CSS by using the selector attribute or the HTML form tag. However, the selectors you use could have positive or negative long-term impacts on your stylesheets. When building a custom website, it is generally much easier to use the form tag or selector attribute, as this will style all forms and inputs site-wide. If you are building a website or blog using a content management system such as WordPress, it may be more beneficial long-term to use classes. In the event that you have multiple plugins that produce or use form elements, it may cause a conflict with other plugin elements or styles. Additionally, if one plugin is uninstalled, it may make it easier to remove unused CSS because, in general, branded CSS classes typically include the initials of the company name.