Angular

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-contact-form',
  standalone: true,
  imports: [FormsModule, CommonModule],
  templateUrl: './contact-form.component.html',
})
export class ContactFormComponent {
  status: 'idle' | 'loading' | 'success' | 'error' = 'idle';
  message = '';

  name = '';
  email = '';
  formMessage = '';

  constructor(private http: HttpClient) {}

  onSubmit() {
    this.status = 'loading';

    this.http
      .post('https://pipedform.com/f/{form_id}', {
        name: this.name,
        email: this.email,
        message: this.formMessage,
      }, {
        headers: {
	    'Content-Type': 'application/json',
          Accept: 'application/json',
        },
      })
      .subscribe({
        next: () => {
          this.status = 'success';
          this.message = 'Form submitted successfully';
        },
        error: (err) => {
          this.status = 'error';
          this.message = err?.error?.message ?? 'Something went wrong. Please try again.';
        },
      });
  }
}

<form (ngSubmit)="onSubmit()">
  <input name="name" [(ngModel)]="name" placeholder="John" required />
  <input
    type="email"
    name="email"
    [(ngModel)]="email"
    placeholder="[email protected]"
    required
  />
  <textarea
    name="message"
    [(ngModel)]="formMessage"
    placeholder="Enter your message..."
    required
  ></textarea>

  <p *ngIf="status === 'error'" style="color: red">{{ message }}</p>
  <p *ngIf="status === 'success'" style="color: green">{{ message }}</p>

  <button type="submit">
    {{ status === 'loading' ? 'Loading...' : 'Send' }}
  </button>
</form>