Skip to main content
An Angular SPA needs somewhere to send its form data. Instead of writing and hosting an API for a contact form, POST to a Crunchforms endpoint — it stores the submission, filters spam, and emails you.

​
Before you start: create your endpoint

Every guide on this page needs a Crunchforms form ID. Getting one takes about two minutes:
  1. Sign up free — 1,000 submissions a month included, no credit card required.
  2. In your dashboard, click New Form, give it a name, and pick a response type: Redirect for classic form posts (the visitor lands on your thank-you page), or JSON if you’ll submit with JavaScript and handle the response yourself.
  3. Your endpoint is https://crunchforms.com/form/{formID} — copy it with the Copy Action URL button, or use the dashboard’s snippet generator.
The quickstart covers this in more detail.

​
The component

Set the form’s response type to JSON. With a standalone component and template-driven forms:
contact-form.component.ts
import { Component, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-contact-form',
  standalone: true,
  imports: [FormsModule],
  template: `
    @if (status() === 'sent') {
      <p>Thanks — we'll be in touch!</p>
    } @else {
      <form (ngSubmit)="submit()" #form="ngForm">
        <label for="email">Email</label>
        <input name="email" type="email" id="email" [(ngModel)]="model.email" required />

        <label for="message">Message</label>
        <textarea name="message" id="message" rows="5" [(ngModel)]="model.message" required></textarea>

        <button type="submit" [disabled]="status() === 'sending' || form.invalid">
          {{ status() === 'sending' ? 'Sending…' : 'Send' }}
        </button>
        @if (status() === 'error') {
          <p role="alert">Something went wrong — please try again.</p>
        }
      </form>
    }
  `,
})
export class ContactFormComponent {
  model = { email: '', message: '' };
  status = signal<'idle' | 'sending' | 'sent' | 'error'>('idle');

  constructor(private http: HttpClient) {}

  submit() {
    this.status.set('sending');
    this.http
      .post<{ success: boolean }>('https://crunchforms.com/form/{formID}', this.model)
      .subscribe({
        next: (result) => this.status.set(result.success ? 'sent' : 'error'),
        error: () => this.status.set('error'),
      });
  }
}
Remember to provide HttpClient (provideHttpClient() in app.config.ts). The endpoint accepts cross-origin JSON posts, so this works from any origin your app is served on.

​
Prefer zero JavaScript?

A plain HTML form post works in Angular templates too — set the response type to Redirect and use a regular <form action="https://crunchforms.com/form/{formID}" method="post"> with an ngNoForm attribute so Angular doesn’t intercept it.

​
Stop the spam before it starts

Every public form gets found by bots eventually. Crunchforms filters submissions server-side on every plan, including Free:

Honeypot

A hidden field humans never see — if it’s filled, the submission is rejected. Zero friction for real visitors.

Cloudflare Turnstile

Invisible bot detection. Add the widget to your form and Crunchforms validates the token server-side.

reCAPTCHA v3

Score-based validation with a threshold you control per form.
The honeypot alone stops most drive-by spam and takes one extra line of markup — enable it in your form’s settings, then include the hidden field in your form.

​
Troubleshooting

  • Check the form is set to Active in your dashboard.
  • If you’ve enabled Turnstile or reCAPTCHA on the form, submissions without a valid token are rejected — including your own tests.
  • Check you haven’t exceeded your plan’s monthly submission quota.
Set the form’s response type to Redirect and provide a success URL (and a failure URL) in the form settings. If you’re submitting with JavaScript, use the JSON response type instead and navigate in your code.
The endpoint accepts cross-origin requests, JSON bodies (Content-Type: application/json), and classic URL-encoded form bodies. Set the form’s response type to JSON so your code gets { "success": true } back instead of a redirect.
Use the Send Test Submission action next to your form in the dashboard — it posts a sample submission to your live endpoint so you can see the pipeline working end to end.

​
Next steps

Form configuration

Response types, notification emails, daily summaries, and more

Free HTML form templates

Contact, feedback, RSVP, job application, and quote-request forms ready to paste

​
Need help?

Get Support

Send us a note — we read everything.