All frameworks
AngularAngular

Use NBForms with Angular

Add a working contact form to your Angular application without spinning up a backend. NBForms handles submission storage, email alerts, and spam protection — your Angular component just sends a FormData POST and manages its own state.

Official Angular docs
Angular
import { Component } from '@angular/core';

@Component({
  selector: 'app-contact-form',
  template: `
    <p *ngIf="success">Thanks — we'll be in touch!</p>
    <form *ngIf="!success" (ngSubmit)="submit($event)">
      <input type="hidden" name="_token" value="YOUR_TOKEN" />
      <label>Name</label>
      <input type="text" name="name" required />
      <label>Email</label>
      <input type="email" name="email" required />
      <label>Message</label>
      <textarea name="message" required></textarea>
      <button type="submit" [disabled]="sending">
        {{ sending ? 'Sending…' : 'Send' }}
      </button>
    </form>
  `,
})
export class ContactFormComponent {
  sending = false;
  success = false;

  async submit(e: SubmitEvent) {
    e.preventDefault();
    this.sending = true;
    const res = await fetch('https://api.nbforms.com', {
      method: 'POST',
      body: new FormData(e.target as HTMLFormElement),
    });
    this.success = res.ok;
    this.sending = false;
  }
}

Why NBForms?

  • Works with Angular 15+ standalone components and NgModules
  • No Express or Node backend required
  • TypeScript-typed with proper SubmitEvent handling
  • Handles loading, success, and error states in the component class

Add to your Angular app in minutes

Free tier included. No credit card. No backend setup — just copy the snippet above and go.

Get started free