How to Add a Contact Form to Angular (No Backend Required)

Create a FormsList endpoint

Sign up at formslist.com and create a form.

Generate the component

Run ng generate component contact-form.

Build the reactive form

Use ReactiveFormsModule and HttpClient.

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-contact-form',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    @if (submitted) { <p>Thanks!</p> }
    @else {
      <form [formGroup]="form" (ngSubmit)="onSubmit()">
        <input formControlName="name" placeholder="Name" />
        <input formControlName="email" type="email" placeholder="Email" />
        <textarea formControlName="message" placeholder="Message"></textarea>
        <button type="submit" [disabled]="form.invalid">Send</button>
      </form>
    }
  `,
})
export class ContactFormComponent {
  form = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email]),
    message: new FormControl('', Validators.required),
  });
  submitted = false;
  constructor(private http: HttpClient) {}
  onSubmit() {
    this.http.post('https://formslist.com/f/YOUR_HASH', this.form.value,
      { headers: { Accept: 'application/json' } }
    ).subscribe(() => this.submitted = true);
  }
}

Add to your app

Use <app-contact-form /> in your template.

Test

Run ng serve and submit a test form.