Forms

HTML

General Form Structure

<form id="example-form" 
    class="form" 
    action="/api/submit-form" 
    method="POST" 
    data-audit="true"
>
    <!-- Start Form Fields -->
    <!-- End Form Fields -->

    <!-- Submit Button -->
    <div class="form-button-container">
        <button type="submit" class="button" data-wait="Loading... Please wait">Submit</button>
    </div>
</form>

Form Fields

Input Fields

Input fields are used for text-based user input, such as email, passwords, and plain text. They are styled with the form-field class and support validation via data-fieldType and data-validation attributes.

Text Input

Used to collect generic text input from users. Commonly used for names, titles, or other string-based inputs.

Attributes

Attribute	Description	Example
maxlength	Maximum number of characters allowed.	maxlength="100"
placeholder	Placeholder text shown inside the input.	placeholder="Enter name"
required	Marks the field as mandatory if needed.	required

Example HTML

<div class="form-field-container">
    <div class="field-label-container">
        <div class="field-label">Name</div>
        <div class="required-star">*</div> <!-- only include if you set field to required -->
    </div>
    <input 
        id="name" 
        name="name" 
        type="text" 
        placeholder="Enter your name" 
        class="form-field" 
        data-fieldType="text"
        required
    >
</div>

Number Input

Used to collect numeric data. Allows for additional attributes like min, max, and step.

Attributes

Attribute	Description	Example
min	Minimum value allowed.	min="0"
max	Maximum value allowed.	max="1000"
step	Increment for valid values (e.g., 1, 0.01, or any). 1 = integer, 0.01 = 2 decemal place.	step="0.01"
placeholder	Placeholder text shown inside the input.	placeholder="Enter age"
required	Marks the field as mandatory.	required

Example HTML

<div class="form-field-container">
    <div class="field-label-container">
        <div class="field-label">Age</div>
        <div class="required-star">*</div> <!-- only include if you set field to required -->
    </div>
    <input 
        id="age" 
        name="age" 
        type="number" 
        placeholder="Enter your age" 
        class="form-field" 
        min="1" 
        max="120" 
        step="1" 
        required
    >
</div>

Email Input

Used for collecting email addresses.

Attributes

Attribute	Description	Example
placeholder	Placeholder text shown inside the input.	placeholder="[email protected]"
required	Marks the field as mandatory.	required
data-validation	Enables or disables validation for the field (true or false).	data-validation="true"

Example HTML

<div class="form-field-container">
    <div class="field-label-container">
        <div class="field-label">Email</div>
        <div class="required-star">*</div> <!-- only include if you set field to required -->
    </div>
    <input 
        id="email" 
        name="email" 
        type="email" 
        placeholder="[email protected]" 
        class="form-field"
        data-validation="true"
        required
    >
</div>

Phone Input

Description

Our phone input fields are built to provide a seamless user experience, leveraging intl-tel-input for formatting and validation behind the scenes. Here’s what you need to know:

Features

Automatic Enhancement: Any <input> element with class="form-field" and type="tel" automatically gets enhanced by our phone-input script.
Country Selection & Formatting: A dropdown is provided for country selection (e.g., US, GB, CA), and the phone number is formatted based on the selected country’s rules.
Validation & Error Messaging: The system checks if the number is valid for the chosen country. Invalid entries are highlighted with a red border and an error message below the field.
Max Digit Enforcement: We maintain a map of how many digits are typically allowed in each country’s local portion. Users can’t type or paste more digits than allowed.
Live Feedback: After 1 second of inactivity (debounce), validation automatically runs. On successful validation, the error message (if any) disappears.

Attributes

Attribute	Description	Example
placeholder	Placeholder text shown inside the input.	placeholder="(123) 456-7890"
required	(optional) Marks the field as mandatory.	required
data-validation	Enables or disables validation for the field (true or false).	data-validation="true"

Example HTML

<div class="form-field-container">
    <div class="field-label-container">
        <div class="field-label">Phone Number</div>
        <div class="required-star">*</div> <!-- only include if you set field to required -->
    </div>
    <input 
        id="phone" 
        name="phone" 
        type="tel" 
        placeholder="(123) 456-7890" 
        class="form-field" 
        required
    >
</div>

URL Input

Attributes

Attribute	Description	Example
placeholder	Placeholder text shown inside the input.	placeholder="https://example.com"
required	Marks the field as mandatory.	required
data-validation	Enables or disables validation for the field (true or false).	data-validation="true"

Example HTML

<div class="form-field-container">
    <div class="field-label-container">
        <div class="field-label">Website</div>
        <div class="required-star">*</div> <!-- only include if you set field to required -->
    </div>
    <input 
        id="website" 
        name="website" 
        type="url" 
        placeholder="https://example.com" 
        class="form-field" 
        data-validation="true"
        required
    >
</div>

See Dropdowns - Done

Form Button(s)

The form-button-container supports the placement of one or more buttons, allowing for consistent styling and spacing between buttons. When two buttons are placed, they are spaced evenly, ensuring a clean and intuitive design. While the container can support more than two buttons, doing so may overwhelm users and is generally discouraged.

Single Button Layout

Single buttons are styled to span the full width of its container while maintaining a clean and centered alignment. This design ensures a prominent call-to-action, making it highly visible and intuitive for users.

Example Usage

<div class="form-button-container">
    <button type="submit" class="button full-width primary">Continue</button>
</div>

Two Button Layout

If using a 2 button configuration, the Secondary Button should be on the left, and the Primary Button on the right.

Primary Button:

Typically represents the main action (e.g., “Save”).
Should be on the right-side of the form (second <button> in HTML)
Should use type="submit" to submit the form.
Use the button primary class for styling.

Secondary Button:

Represents a less prominent action (e.g., “Cancel”).
Should be on the left-side of the form (first <button> in HTML)
Should have a type="button" attribute to avoid triggering form submission.
Styling
- Use the tertiary modifier class for styling in most cases.
- Use the danger modifier class only when appropriate.

Example Usage

<div class="form-button-container">
    <button type="button" class="button tertiary">Cancel</button>
    <button type="submit" class="button">Save</button>
</div>

Button Styling

Buttons can be given different colors and sizes using modifier classes. See button documentation.
- e.g. <button type="button" class="button danger small">Button</button>
Buttons can be given a tooltip by adding the data-tippy-content="{message}" attribute to the button, see Tooltip documentation.
- e.g. <button type="button" class="button" data-tippy-content="I'm a button">Button</button>
Buttons can be given a loading message, spinner, and prevented from being clicked again. See button documentation.
- e.g. <button type="button" class="button" data-wait="Loading...">Button</button>

Forms

HTML

General Form Structure

Form Fields

Input Fields

Text Input

Number Input

Email Input

Phone Input

﻿

URL Input

Dropdown Field

Form Button(s)

Single Button Layout

Two Button Layout

Button Styling