Forms in Angular
Angular's ReactiveFormsModule and HttpClient pair naturally with Formboost. Build your form in Angular, submit it to your Formboost endpoint, and let Formboost handle storage, spam filtering, and notifications.
Prerequisites
- A Formboost account (sign up free)
- An Angular project (v15+)
Step 1: Create a Formboost Endpoint
Log in to your Formboost dashboard and create a new endpoint. Copy the endpoint URL:
https://formboost.app/f/YOUR_ENDPOINT_ID
Step 2: Enable HttpClient
In your app.config.ts (standalone) or AppModule:
1// app.config.ts (standalone)
2import { provideHttpClient } from "@angular/common/http";
3
4export const appConfig: ApplicationConfig = {
5 providers: [provideHttpClient()],
6};Step 3: Create the Contact Component
1// contact.component.ts
2import { Component } from "@angular/core";
3import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from "@angular/forms";
4import { HttpClient } from "@angular/common/http";
5import { CommonModule } from "@angular/common";
6
7@Component({
8 selector: "app-contact",
9 standalone: true,
10 imports: [ReactiveFormsModule, CommonModule],
11 template: `
12 <form [formGroup]="form" (ngSubmit)="onSubmit()">
13 <div>
14 <label for="name">Name</label>
15 <input id="name" type="text" formControlName="name" />
16 </div>
17 <div>
18 <label for="email">Email</label>
19 <input id="email" type="email" formControlName="email" />
20 </div>
21 <div>
22 <label for="message">Message</label>
23 <textarea id="message" formControlName="message" rows="5"></textarea>
24 </div>
25 <button type="submit" [disabled]="form.invalid || submitting">
26 {{ submitting ? "Sending…" : "Send" }}
27 </button>
28 <p *ngIf="success">Message sent successfully!</p>
29 </form>
30 `,
31})
32export class ContactComponent {
33 form: FormGroup;
34 submitting = false;
35 success = false;
36
37 private endpoint = "https://formboost.app/f/YOUR_ENDPOINT_ID";
38
39 constructor(private fb: FormBuilder, private http: HttpClient) {
40 this.form = this.fb.group({
41 name: ["", Validators.required],
42 email: ["", [Validators.required, Validators.email]],
43 message: [""],
44 });
45 }
46
47 onSubmit() {
48 if (this.form.invalid) return;
49 this.submitting = true;
50
51 this.http.post(this.endpoint, this.form.value).subscribe({
52 next: () => {
53 this.success = true;
54 this.form.reset();
55 this.submitting = false;
56 },
57 error: () => {
58 this.submitting = false;
59 },
60 });
61 }
62}Replace YOUR_ENDPOINT_ID with your actual endpoint ID.
Step 4: Add the Component to a Page
1// app.component.ts or any route component
2import { ContactComponent } from "./contact/contact.component";
3
4@Component({
5 imports: [ContactComponent],
6 template: `<app-contact />`,
7})
8export class AppComponent {}Step 5: Test It
Run ng serve and submit the form. The submission will appear in your Formboost dashboard within seconds.