Reactive Form
Use Angular’s reactive forms with FormBnB:contact.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-contact',
templateUrl: './contact.component.html'
})
export class ContactComponent {
contactForm: FormGroup;
status: 'idle' | 'loading' | 'success' | 'error' = 'idle';
constructor(private fb: FormBuilder, private http: HttpClient) {
this.contactForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
message: ['', Validators.required]
});
}
onSubmit() {
if (this.contactForm.invalid) return;
this.status = 'loading';
const formData = new FormData();
Object.keys(this.contactForm.value).forEach(key => {
formData.append(key, this.contactForm.value[key]);
});
this.http.post('https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM', formData)
.subscribe({
next: () => {
this.status = 'success';
this.contactForm.reset();
},
error: () => {
this.status = 'error';
}
});
}
}
Template
contact.component.html
<form [formGroup]="contactForm" (ngSubmit)="onSubmit()">
<div>
<label for="name">Name</label>
<input id="name" formControlName="name" />
</div>
<div>
<label for="email">Email</label>
<input id="email" type="email" formControlName="email" />
</div>
<div>
<label for="message">Message</label>
<textarea id="message" formControlName="message"></textarea>
</div>
<button type="submit" [disabled]="status === 'loading'">
{{ status === 'loading' ? 'Sending...' : 'Send' }}
</button>
<p *ngIf="status === 'success'">Thanks for your message!</p>
<p *ngIf="status === 'error'">Something went wrong. Please try again.</p>
</form>
Simple HTML Form
Or use a simple HTML form without reactive forms:<form action="https://api.formbnb.com/f/YOUR_ORG/YOUR_FORM" method="POST">
<input type="hidden" name="_next" value="https://yoursite.com/thanks" />
<input type="text" name="_gotcha" style="display:none" />
<input type="text" name="name" required />
<input type="email" name="email" required />
<textarea name="message" required></textarea>
<button type="submit">Send</button>
</form>