Forms

Live Demo

Variant 1 — Contact Form

Variant 2 — Enrollment / Registration (Multi-Step)

Variant 3 — Simple Feedback Form

States

Follows the Interaction States matrix. Inputs implement default, focus, valid, invalid (error), and disabled. The static is-focus class mirrors the live :focus ring for documentation and Figma export.

Variant 4 — Pension Solutions Form (Account Engagement)

Use this pattern for employer-facing lead-gen forms posted to Account Engagement (Pardot). Includes logo, UTM tracking, honeypot, reCAPTCHA, email opt-in, and privacy consent.

Connect with Pension Solutions

Complete the form below and our team will follow up within 2 business days.

First name * required

Last name * required

Company / Organization * required

Work email * required

Phone

Province / territory * required Select a province or territory AlbertaBritish ColumbiaManitobaNew BrunswickNewfoundland and LabradorNova ScotiaNorthwest TerritoriesNunavutOntarioPrince Edward IslandQuebecSaskatchewanYukon

How many employees? Select an option 1–49 50–299 300–499 500–999 1,000+

Current retirement plan? Select an option Defined benefit (DB) pension plan Defined contribution (DC) pension plan Group RRSP Other No plan

What would you like to discuss? * required

I would like to receive occasional emails from CAAT about pension solutions, events, and resources. I can unsubscribe at any time.

By submitting this form, you agree that CAAT may use the information provided to respond to your inquiry and follow up about pension solutions. Personal information is handled according to CAAT's privacy practices.

reCAPTCHA

Submit

Website

Form Consent, Validation & Follow-Up Patterns

Standard patterns for Account Engagement forms, campaign landing pages, gated content, event registrations, and contact requests.

Thank You Page Pattern

A successful form submission should redirect to a dedicated thank-you page or show a persistent success state. Never leave users on a blank form or rely only on a toast notification.

<main class="caat-form__thank-you">
  <div class="caat-form__thank-you-icon">
    <i class="bi bi-check-circle-fill"></i>
  </div>
  <h1>Thank you!</h1>
  <p>A member of the Pension Solutions team
  will be in touch with you soon.</p>
  <a href="/pension-solutions"
     class="caat-button caat-button--primary">
    Return to Pension Solutions
  </a>
</main>

1. Summary

2. Design Tokens

Forms consume these semantic tokens — no component-specific tokens are defined.

3. Authoring Fields

4. Validation Rules

Behaviour contract (JS)

The design system ships no forms JavaScript — behaviour below is the implementing team's responsibility (AEM clientlib). The live demo includes a minimal reference implementation (goToStep() in this page's source) for the step-switching mechanics only.

5. Content Guidance

• Labels: Use clear, concise labels. Avoid jargon — say "Date of Birth" not "DOB."
• Placeholder text: Show an example value (e.g., "jane.smith@example.com") rather than repeating the label.
• Help text: Explain why the information is needed or the expected format (e.g., "Format: 000-000-000").
• Error messages: Be specific and actionable — "Please enter a valid email address" not "Invalid input."
• Submit button: Use a verb phrase that describes the action — "Submit Enrollment," "Send Message."
• Progress steps: Use short labels (2–3 words) for multi-step indicators.
• Privacy note: For forms collecting personal data, include a link to CAAT's Privacy Policy.

6. Semantic HTML

<form class="caat-form" action="/api/contact" method="POST" novalidate
      aria-label="Contact Member Services"
      data-analytics-component="form"
      data-analytics-form-name="contact-member-services">

  <div class="caat-form__group">
    <label class="form-label" for="field-name">
      Full Name <span class="text-danger" aria-hidden="true">*</span>
    </label>
    <input class="form-control" type="text" id="field-name"
           name="name" required aria-required="true"
           aria-describedby="field-name-help field-name-error">
    <span class="caat-form__help" id="field-name-help">
      As it appears on your pension statement.
    </span>
    <span class="caat-form__error" id="field-name-error" role="alert"
          hidden>
      Please enter your full name.
    </span>
  </div>

  <!-- Grouped fields (radio/checkbox) -->
  <fieldset class="caat-form__group">
    <legend class="form-label">Preferred Contact Method</legend>
    <label class="caat-form__radio">
      <input type="radio" name="contactMethod" value="email"> Email
    </label>
    <label class="caat-form__radio">
      <input type="radio" name="contactMethod" value="phone"> Phone
    </label>
  </fieldset>

  <button type="submit" class="caat-button caat-button--primary">
    Submit Inquiry
  </button>
</form>

Multi-Step Structure

<form class="caat-form caat-form--multi-step" …>
  <div class="caat-form__progress" aria-label="Form progress">
    <ol class="caat-form__progress-steps">
      <li class="caat-form__progress-step active" aria-current="step">
        <span class="step-number">1</span> Personal Info
      </li>
      <li class="caat-form__progress-step">…</li>
    </ol>
  </div>

  <fieldset class="caat-form__step" id="step-1">
    <legend class="visually-hidden">Step 1: Personal Information</legend>
    <!-- fields -->
  </fieldset>
</form>

7. CSS Contract

8. Accessibility

9. SEO

Transient / structural UI with no indexable content of its own — no SEO markup required. Ensure any content this component wraps or reveals stays server-rendered and crawlable.

10. Analytics

Analytics are captured through the shared data-analytics-component attribute on the component root (emitted automatically) and reported to the central data layer. Event names and payloads follow the organisation's standard analytics schema — defined centrally with the analytics team, not invented per component — so no bespoke tracking is specified here.

11. AEM Implementation Notes

• Resource type: caat/components/form
• Proxy: /apps/caat/components/form
• Sling model: Provides field list, step configuration, action URL, and method.
• Client-side validation: Progressive enhancement — uses novalidate on form, JS handles validation and focus management.
• Server-side handling: Action URL should point to a Sling POST servlet or external API endpoint.
• Multi-step JS: A lightweight controller manages step visibility, progress state, and per-step validation.
• File uploads: When file field type is used, form encoding switches to multipart/form-data.
• CSRF protection: Include AEM CSRF token as hidden field for POST submissions.
• Captcha: Optional reCAPTCHA/hCaptcha integration configured at the form level.

12. Dialog Model

Simplified model — shows field intent and Granite UI resource types, not the literal cq:dialog node tree (e.g. select options are authored as child items nodes).

{
  "jcr:primaryType": "nt:unstructured",
  "sling:resourceType": "cq/gui/components/authoring/dialog",
  "content": {
    "items": {
      "tabs": {
        "items": {
          "formSettings": {
            "jcr:title": "Form Settings",
            "items": {
              "columns": {
                "items": {
                  "column": {
                    "items": {
                      "formTitle": { "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield", "name": "./formTitle", "fieldLabel": "Form Title" },
                      "actionUrl": { "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield", "name": "./actionUrl", "fieldLabel": "Action URL", "required": true },
                      "method": { "sling:resourceType": "granite/ui/components/coral/foundation/form/select", "name": "./method", "fieldLabel": "Method", "items": { "post": { "text": "POST", "value": "POST", "selected": true }, "get": { "text": "GET", "value": "GET" } } },
                      "enableMultiStep": { "sling:resourceType": "granite/ui/components/coral/foundation/form/checkbox", "name": "./enableMultiStep", "text": "Enable Multi-Step Layout" },
                      "successMessage": { "sling:resourceType": "granite/ui/components/coral/foundation/form/textarea", "name": "./successMessage", "fieldLabel": "Success Message" }
                    }
                  }
                }
              }
            }
          },
          "fields": {
            "jcr:title": "Form Fields",
            "items": {
              "columns": {
                "items": {
                  "column": {
                    "items": {
                      "fields": {
                        "sling:resourceType": "granite/ui/components/coral/foundation/form/multifield",
                        "fieldLabel": "Fields",
                        "composite": true,
                        "field": {
                          "items": {
                            "fieldType": { "sling:resourceType": "granite/ui/components/coral/foundation/form/select", "name": "./fieldType", "fieldLabel": "Field Type", "items": { "text": { "text": "Text", "value": "text" }, "email": { "text": "Email", "value": "email" }, "tel": { "text": "Telephone", "value": "tel" }, "select": { "text": "Dropdown", "value": "select" }, "textarea": { "text": "Textarea", "value": "textarea" }, "checkbox": { "text": "Checkbox", "value": "checkbox" }, "radio": { "text": "Radio Buttons", "value": "radio" }, "date": { "text": "Date", "value": "date" }, "file": { "text": "File Upload", "value": "file" } } },
                            "label": { "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield", "name": "./label", "fieldLabel": "Label", "required": true },
                            "placeholder": { "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield", "name": "./placeholder", "fieldLabel": "Placeholder" },
                            "required": { "sling:resourceType": "granite/ui/components/coral/foundation/form/checkbox", "name": "./required", "text": "Required" },
                            "validationPattern": { "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield", "name": "./validationPattern", "fieldLabel": "Validation Pattern (regex)" },
                            "helpText": { "sling:resourceType": "granite/ui/components/coral/foundation/form/textfield", "name": "./helpText", "fieldLabel": "Help Text" },
                            "options": { "sling:resourceType": "granite/ui/components/coral/foundation/form/multifield", "name": "./options", "fieldLabel": "Options (for select/radio)", "composite": true }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

13. QA Acceptance Checklist

• All field types render correctly (text, email, tel, select, textarea, checkbox, radio, date, file).
• Required fields show asterisk and aria-required="true".
• Validation triggers on submit (not on blur for first interaction).
• Invalid fields show error message with role="alert" and receive focus.
• Valid fields show green border confirmation.
• Multi-step progress indicator updates correctly and announces step changes.
• Each step validates before allowing progression.
• Back button in multi-step preserves entered data.
• Labels are correctly associated (for / id matching).
• aria-describedby links help text and error messages to their fields.
• Radio/checkbox groups use fieldset and legend.
• Form is fully operable via keyboard only.
• Analytics events fire: form-start, form-step, form-submit, form-error.
• Responsive layout renders correctly on mobile, tablet, and desktop.
• File upload field accepts specified file types and shows file name.

14. Definition of Done