Build an Accessible Contact Form with Angular and Tailwind CSS

This tutorial starts a practical Angular and Tailwind learning series from the angularmicrotutorials project. We will build the contact form UI first: labeled fields, Angular bindings, browser validation, responsive spacing, and visible keyboard focus. Submission state and NgRx are covered separately in the next state-management tutorial.

What you will build

A full-name field, email field, and message area
Angular template-driven bindings using FormsModule
A clear submit action and responsive Tailwind layout
Semantic labels and keyboard focus indicators

1. Keep form values in the component

A simple component can hold the three input values. In the workspace tutorial, the contact component dispatches an NgRx action from onSubmit(); in this first UI pass, focus on the data fields and a submit handler.

export class Contact {
  name = '';
  email = '';
  message = '';

  onSubmit(): void {
    // The submission action is connected in the NgRx tutorial.
  }
}

2. Bind labeled controls

Import FormsModule in the standalone component before using [(ngModel)]. Inside a form, each control should have a unique name so Angular can register it. Associate each visible label with the matching input ID.

<form (ngSubmit)="onSubmit()" class="space-y-4">
  <div>
    <label for="name" class="mb-1 block text-sm font-medium text-gray-700">
      Full Name
    </label>
    <input
      id="name"
      name="name"
      type="text"
      [(ngModel)]="name"
      required
      class="w-full rounded-md border border-gray-300 px-4 py-2 focus-visible:outline-2 focus-visible:outline-blue-600"
    />
  </div>
  <button type="submit" class="rounded-md bg-blue-700 px-4 py-2 font-semibold text-white focus-visible:outline-2 focus-visible:outline-offset-2">
    Send Message
  </button>
</form>

3. Understand the Tailwind utilities

w-full lets a field fill its container.
space-y-4 adds consistent vertical spacing between form children.
border, rounded-md, and px-4 py-2 provide the field outline, corners, and internal spacing.
focus-visible:outline-2 displays a keyboard focus indicator rather than relying only on color.
bg-blue-700 text-white gives the submit action a high-contrast button treatment.

4. Verify the interaction

Try submitting with a missing required value, tab through each field, and verify focus remains visible. Check a narrow viewport to ensure labels and controls fit without horizontal scrolling. The page’s form bindings and accessible structure are the foundation; request handling and NgRx loading/error/history states are intentionally handled in the next tutorial.

Key takeaway

Building the form UI first separates presentation and browser validation from submission state. This makes the later NgRx lesson easier to follow because the fields and submit event are already defined.

Build an Accessible Contact Form with Angular and Tailwind CSS