---
title: Forms
slug: forms
createdAt: 2025-01-13T22:33:17.712Z
---

# HTML

## General Form Structure

```html
<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**

```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**

```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.&#x20;

**Attributes**

| Attribute         | Description                                                       | Example                           |
| ----------------- | ----------------------------------------------------------------- | --------------------------------- |
| `placeholder`     | Placeholder text shown inside the input.                          | `placeholder="email@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**

```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@example.com" 
        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**

```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**

```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>
```

## Dropdown Field

See [Dropdowns - Done](docId\:kzIErERMrLfzPVh_dmEyH)&#x20;



## 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**

```html
<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.&#x20;

**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.&#x20;

**Example Usage**

```html
<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](https://factory-docs.userfirstdigital.com/buttons-etc).
  - 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](https://factory-docs.userfirstdigital.com/tooltips).&#x20;
  - 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](https://factory-docs.userfirstdigital.com/buttons-etc).
  - e.g. `<button type="button" class="button" data-wait="Loading...">Button</button>`

::Image[]{src="https://api.archbee.com/api/optimize/ekdzobNU8PAqpbk3VU6LC-GSio3dRUok1Vb039oTq9W-20250121-064316.png" size="22" width="210" height="82" position="center" showCaption="false"}