نموذج تواصل لـ Angular

import { Component } from "@angular/core";

@Component({
  selector: "contact-form",
  template: `
    <form (ngSubmit)="onSubmit($event)">
      <input name="name" required>
      <input name="email" type="email" required>
      <textarea name="message" required></textarea>
      <div aria-hidden="true" style="position:absolute;left:-10000px">
        <input name="botcheck" tabindex="-1" autocomplete="off">
      </div>
      <button type="submit">Send</button>
      <p>{{ status }}</p>
    </form>
  `,
})
export class ContactForm {
  status = "";

  async onSubmit(event: Event) {
    event.preventDefault();
    const form = event.currentTarget;
    if (!(form instanceof HTMLFormElement)) return;
    const fields = Object.fromEntries(new FormData(form));
    const response = await fetch("https://formgong.com/submit", {
      method: "POST",
      headers: { "Content-Type": "application/json", Accept: "application/json" },
      body: JSON.stringify({ ...fields, access_key: "fk_your_access_key" }),
    });
    const result = await response.json();
    this.status = result.success ? "ok" : (result.message || "error");
  }
}