Customize the look of your forms

Last update: March 5, 2025

CREATED FOR:

  • Admin
  • Developer

Forms are crucial for user interaction on websites, allowing them to input data. You can use Cascading Style Sheets (CSS) to style form fields, enhance the visual presentation of your forms, and improve the user experience.

The Adaptive Forms Block produces a consistent structure for all form fields. This consistent structure makes it easier to develop CSS Selectors to select and style form fields based on field type and field names.

This document outlines the HTML Structure for various form components and helps you build an understanding of how to create CSS Selectors for various form fields to style form fields of an Adaptive Forms Block.

By the end of the article, you will:

  • Build an understanding of the structure of the default CSS file included with Adaptive Forms Block
  • Build an understanding of the HTML structure of form components provided by the Adaptive Forms Block, including general components and specific components like dropdowns, radio groups, and checkbox groups
  • Learn how to style form fields based on field type and field names using CSS Selectors, allowing for consistent or unique styling based on requirements

Understanding Form Field Types

Before diving into styling, let’s review the common form field types supported by the Adaptive Forms Block:

  • Input Fields: These include text inputs, email inputs, password inputs, and more
  • Checkbox Groups: Used for selecting multiple options
  • Radio Groups: Used for selecting only one option from a group
  • Dropdowns: Also known as select boxes, used for selecting one option from a list
  • Panels/Containers: Used to group related form elements together

Basic Styling Principles

Understanding fundamental CSS concepts is crucial before styling specific form fields:

  • Selectors: CSS Selectors allow you to target specific HTML elements for styling. You can use element selectors, class selectors, or ID selectors
  • Properties: CSS properties define the visual appearance of elements. Common properties for styling form fields include color, background-color, border, padding, margin, and more
  • Box Model: The CSS box model describes the structure of HTML elements as a content area surrounded by padding, borders, and margins
  • Flexbox/Grid: CSS Flexbox and Grid layouts are powerful tools for creating responsive and flexible designs

Styling a form for Adaptive Forms Block

The Adaptive Forms Block offers a standardized HTML structure, simplifying the process of selecting and styling form components:

  • Update default styles: You can modify the default styles of a form by editing the /blocks/form/form.css file. This file provides comprehensive styling for a form, supporting multi-step wizard forms. It emphasizes using custom CSS variables for easy customization, maintenance, and uniform styling across forms. For instructions on adding the Adaptive Forms Block to your project, refer to create a form.

  • Customization: Use the default forms.css as a base and customize it to modify the look and feel of your form components, making them visually appealing and user-friendly. The file’s structure encourages organization and maintains styles for forms, promoting consistent designs across your website.

Breakdown of forms.css structure

  • Global variables: Defined at the :root level, these variables (--variable-name) store values used throughout the style sheet for consistency and ease of updates. These variables define colors, font sizes, padding, and other properties. You can declare your own Global variables or modify existing ones to change the form’s style.

  • Universal selector styles: The * selector matches every element in the form, ensuring styles are applied to all components by default, including setting the box-sizing property to border-box.

  • Form styling: This section focuses on styling form components using selectors to target specific HTML elements. It defines styles for input fields, text areas, checkboxes, radio buttons, file inputs, form labels, and descriptions.

  • Wizard styling (if applicable): This section is dedicated to styling the wizard layout, a multi-step form where each step is displayed one at a time. It defines styles for the wizard container, fieldsets, legends, navigation buttons, and responsive layouts.

  • Media queries: These provide styles for different screen sizes, adjusting layout and styling accordingly.

  • Miscellaneous styling: This section covers styles for success or error messages, file upload areas, and other elements you might encounter in a form.