Angular Integration
Add a contact form to an Angular app
Last updated
To add a contact form to an Angular app without a backend, post the form data with HttpClient to https://api.staticforms.dev/submit, including your form's API key as apiKey. Static Forms emails each submission to you, so the app can stay a static build on any host. Reactive forms and template-driven forms both work; each example below is complete. It works on the free plan.
Reactive Forms
Using Angular Reactive Forms (recommended):
Template-Driven Forms
Using Angular Template-Driven Forms:
Environment Configuration
Store your API key in environment files:
HttpClient treats a non-2xx response as an error, so a rejected submission arrives in the error callback, with the reason in error.error.error. For a CAPTCHA (reCAPTCHA v2 on Free; Turnstile, hCaptcha and ALTCHA from Starter) or file uploads (Starter and up), see the HTML guide; the field names are the same.
FAQ
Does this work on the free plan?
Yes. The snippet only uses Free plan features: 250 submissions every 30 days, 1 form endpoint, email delivery, the built-in spam filter, a honeypot field and reCAPTCHA v2. No credit card is needed.
How do I keep spam out?
Every submission is checked by the built-in spam filter on every plan. The snippet adds a hidden honeypot field (any field whose name contains "honeypot"); bots fill it in and those submissions are dropped. reCAPTCHA v2 is available on Free. Cloudflare Turnstile, hCaptcha, ALTCHA and reCAPTCHA v3 are available from the Starter plan.
Is it safe to put the API key in my HTML?
Yes. The form API key is meant to be public. It cannot read your submissions or sign in to your dashboard. From the Starter plan you can also restrict submissions to your own domains.
Do I need a server or Angular SSR?
No. The component posts from the browser straight to Static Forms, so a static Angular build on any host works.
