Form Integration

Angular Contact Form Without Your Own API

Use a standalone component, ngModel and HttpClient. Formbold stores the entry and emails you. Free includes 250 submissions a month and 10 forms, so you can try it before upgrading.

What does a working Angular contact form look like?

Standalone component with FormsModule and HttpClient. Replace FORM_ID. Call provideHttpClient() in app.config.ts once for the app.

angular.js

// contact.component.ts
import { Component, inject } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { FormsModule } from "@angular/forms";
import { NgIf } from "@angular/common";

@Component({
  selector: "app-contact",
  standalone: true,
  imports: [FormsModule, NgIf],
  template: `
    <form (ngSubmit)="submit()" class="flex flex-col gap-3 max-w-md">
      <label for="email">Email</label>
      <input id="email" name="email" type="email" [(ngModel)]="email" required />

      <label for="subject">Subject</label>
      <input id="subject" name="subject" type="text" [(ngModel)]="subject" required />

      <label for="message">Message</label>
      <textarea id="message" name="message" rows="5" [(ngModel)]="message" required></textarea>

      <button type="submit" [disabled]="loading">
        {{ loading ? "Sending..." : "Submit" }}
      </button>
      <p *ngIf="status">{{ status }}</p>
    </form>
  `,
})
export class ContactComponent {
  private http = inject(HttpClient);

  email = "";
  subject = "";
  message = "";
  loading = false;
  status = "";

  submit() {
    this.loading = true;
    const headers = new HttpHeaders({
      "Content-Type": "application/json",
      Accept: "application/json",
    });

    this.http
      .post<{ message?: string }>(
        "https://formbold.com/s/FORM_ID",
        { email: this.email, subject: this.subject, message: this.message },
        { headers }
      )
      .subscribe({
        next: (result) => {
          this.status = result?.message || "Message sent.";
          this.email = "";
          this.subject = "";
          this.message = "";
          this.loading = false;
        },
        error: () => {
          this.status = "Request failed.";
          this.loading = false;
        },
      });
  }
}

// Provide HttpClient in app.config.ts:
// provideHttpClient()

How it works

How do I connect an Angular form to Formbold?

Create the form, provide HttpClient, post JSON. Three moves.

Create a form in the dashboard

Open All Forms, create one, then copy https://formbold.com/s/FORM_ID from the Form Setup tab.

Add provideHttpClient()

In app.config.ts add provideHttpClient() so HttpClient injects cleanly. Paste FORM_ID into the component.

Submit from ng serve

Fill the form once. The row shows up under Submissions, and the notification email follows.

Features

What do you skip by posting to Formbold?

No Nest controller, no SMTP config and no custom spam queue for a simple contact page.

HttpClient only

One POST from the component. You do not need a Formbold-specific Angular library.

Inbox delivery

Every plan can email you each submission. Field names become the labels in that email.

Spam filter toggle

Basic Spam Filter lives under Settings > Spam & Security. Add Custom reCAPTCHA when you need a challenge.

Uploads on Starter+

Paid plans accept files at 10 MB, 25 MB or 50 MB by plan. Send multipart FormData from Angular when you need them.

CRM and chat tools

Starter and higher push entries to Slack, HubSpot, Notion, Sheets and webhooks from the Integrations tab.

FAQ's

Angular questions that come up after install

Short answers for the first week.

No for this example. Template-driven ngModel is enough. You can swap in a FormGroup and still JSON.stringify the value into the same POST.