Angular already owns the submit, and Reactive Forms makes that easy to forget.

@Component({
  selector: 'app-contact-form',
  template: `
    <form #form="ngForm" (ngSubmit)="onSubmit($event)">
      <label for="email">Email</label>
      <input id="email" name="email" type="email" required />

      <label for="message">Message</label>
      <textarea id="message" name="message" required></textarea>

      <button type="submit" [disabled]="status() === 'sending'">Send</button>
      <p role="status">{{ message() }}</p>
    </form>
  `,
})
export class ContactFormComponent {
  readonly status = signal<'idle' | 'sending' | 'sent' | 'error'>('idle');
  readonly message = signal('');

  async onSubmit(event: Event) {
    event.preventDefault();
    const form = event.target as HTMLFormElement;
    this.status.set('sending');

    const response = await fetch("https://freelyform.com/f/FORM_ID", {
      method: 'POST',
      headers: { Accept: 'application/json' },
      body: new FormData(form),
    });
    const result = await response.json().catch(() => ({}));

    if (response.ok && result.ok) {
      form.reset();
      this.status.set('sent');
      this.message.set(result.message);
    } else {
      this.status.set('error');
      this.message.set(result.message || 'That did not send.');
    }
  }
}