Add a form to an Angular app
Template-driven or reactive forms, one HttpClient.post in the handler. The endpoint is a plain CORS-enabled JSON API.
- Free plan
- No plugin to install
- Set up in minutes
Angular in three steps.
- 1
Create a form and copy its Public Key
Sign up and copy the Public Key into the app’s environment files or a runtime-injected config.
- 2
Inject HttpClient and POST on submit
Provide HttpClient, then post the form group’s value to the form-specific endpoint in the submit handler.
- 3
Subscribe and show your success state
The observable completes on the 201. Reset the form and carry on; the response is already stored.
Copy this into Angular.
Swap in your form’s key and submissions start landing in your inbox.
@Component({
selector: "contact-form",
template: `
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input formControlName="email" type="email" />
<textarea formControlName="message"></textarea>
<button type="submit">Send</button>
</form>`,
})
export class ContactFormComponent {
private http = inject(HttpClient);
form = new FormGroup({
email: new FormControl("", Validators.required),
message: new FormControl(""),
});
onSubmit() {
this.http
.post("https://api.surveyowl.co/v1/submit/" + encodeURIComponent(environment.formKey), this.form.value)
.subscribe(() => this.form.reset());
}
}What people build with it.
Contact and feedback forms in Angular SPAs.
Reactive forms with validation that still need somewhere to land.
Enterprise Angular apps where adding a backend route for a form is overkill.
Angular forms, answered.
1. Create a form and copy its Public Key: Sign up and copy the Public Key into the app’s environment files or a runtime-injected config. 2. Inject HttpClient and POST on submit: Provide HttpClient, then post the form group’s value to the form-specific endpoint in the submit handler. 3. Subscribe and show your success state: The observable completes on the 201. Reset the form and carry on; the response is already stored.
Angular’s HttpClient maps cleanly onto the submit API: this.http.post(ENDPOINT, form.value, { headers }) in the component and nothing else. Reactive forms get the field names from the FormGroup, so the JSON body builds itself.
The FormGroup’s control names are the question labels. “email” and “message” arrive as labeled answers with no mapping layer in between.