Form Integration

Angular contact form with HttpClient and no API of your own

You already have HttpClient, so sending a contact form is one call. Use a standalone component with ngModel, post JSON to your Formbold endpoint, and Formbold stores the entry and emails you. Free includes 250 submissions a month and 10 forms.

Contact Form for Angular

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?

If provideHttpClient() is already in app.config.ts, skip the second step.

1

Create a form in the dashboard

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

2

Add provideHttpClient()

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

3

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.

Spam settings live in the dashboard

Basic Spam Filter is under Settings > Spam & Security, so there's nothing to add to the component. Custom reCAPTCHA covers the captcha case.

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.

FAQs

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.

Still have a question?

The docs cover setup, framework guides, integrations and spam protection, step by step.

Read the docs