Start collecting form submissions from your Angular app with FormAPI in 2 minutes. Create your form in FormAPI and paste your unique URL inside your form. Look at the code examples and detailed tutorial below to get started.
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-http-form',
template: `
<form (ngSubmit)="onSubmit()">
<label>Email:</label>
<input type="email" [(ngModel)]="email" name="email" required />
<label>Message:</label>
<textarea [(ngModel)]="message" name="message" required></textarea>
<button type="submit">Send</button>
<p *ngIf="submitted">Form submitted successfully!</p>
<p *ngIf="error" style="color: red">{{ error }}</p>
</form>
`
})
export class HttpFormComponent {
email = '';
message = '';
submitted = false;
error: string | null = null;
constructor(private http: HttpClient) {}
onSubmit() {
this.http.post<any>('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', { email: this.email, message: this.message })
.subscribe({
next: (res) => {
if (res.code === 200) this.submitted = true;
else this.error = res.message || 'Something went wrong';
},
error: (err) => this.error = err.message
});
}
}Angular is a TypeScript-based framework for building dynamic web applications. It provides a structured approach to developing scalable applications. FormAPI works seamlessly with Angular, and this guide will show you how to integrate it.
Angular’s HttpClient module is used for making API requests. Below is an example of how to send form data to FormAPI using HttpClient. Ensure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your unique endpoint URL.
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-http-form',
template: `
<form (ngSubmit)="submitForm()">
<input type="email" [(ngModel)]="email" name="email" placeholder="Email" required />
<input type="text" [(ngModel)]="message" name="message" placeholder="Message" required />
<button type="submit">Submit</button>
</form>
<p>{{ responseText }}</p>
`
})
export class HttpFormComponent {
email = '';
message = '';
responseText = '';
constructor(private http: HttpClient) {}
submitForm() {
this.http.post('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', { email: this.email, message: this.message })
.subscribe(
(res: any) => this.responseText = res.code === 200 ? 'Form submitted successfully!' : 'Error submitting form',
error => this.responseText = 'Error: ' + error
);
}
}Fetch is a native API available in JavaScript for making HTTP requests. Below is an example demonstrating how to send form data to FormAPI using Fetch in an Angular application. Ensure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your unique endpoint URL.
import { Component } from '@angular/core';
@Component({
selector: 'app-fetch-form',
template: `
<form (ngSubmit)="submitForm()">
<input type="email" [(ngModel)]="email" name="email" placeholder="Email" required />
<input type="text" [(ngModel)]="message" name="message" placeholder="Message" required />
<button type="submit">Submit</button>
</form>
<p>{{ responseText }}</p>
`
})
export class FetchFormComponent {
email = '';
message = '';
responseText = '';
async submitForm() {
try {
const response = await fetch('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: this.email, message: this.message })
});
const data = await response.json();
this.responseText = data.code === 200 ? 'Form submitted successfully!' : 'Error submitting form';
} catch (error) {
this.responseText = 'Error: ' + error;
}
}
}To upload files in Angular using FormAPI, you can use FormData along with HttpClient. The example below demonstrates how to handle file uploads in Angular. Ensure that you replace “https://submit.zunoy.com/sub/[YOUR-FORM-KEY]” with your own unique endpoint URL.
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-file-upload',
template: `
<input type="file" (change)="uploadFile($event)" />
<p>{{ responseText }}</p>
`
})
export class FileUploadComponent {
responseText = '';
constructor(private http: HttpClient) {}
uploadFile(event: any) {
const file = event.target.files[0];
if (!file) return;
const formData = new FormData();
formData.append('file', file);
this.http.post('https://submit.zunoy.com/sub/[YOUR-FORM-KEY]', formData)
.subscribe(
(res) => this.responseText = 'File uploaded successfully!',
(error) => this.responseText = 'Upload failed: ' + error
);
}
}Select HTTPS monitoring to track website uptime, SSL expiry, redirects, and response codes from global locations.
Type your website URL, add optional headers or auth tokens, then pick the check interval you prefer.
We run the first check instantly and alert on downtime, SSL errors, or failed HTTPS responses.
USe CAses
A collection of example HTML forms with code that you can edit live, then download or copy/paste. A minimal form reset css is included that should work with most sites. A minimal form reset css is included that should work with most sites. A minimal form reset css is included that should work with most sites.
Copyright © 2025 - Mentcube Innovations Pvt Ltd. All Rights Reserved.
FormAPI