Angular

Forms in Angular

Angular's reactive and template-driven forms both work well with Formward. This guide uses a template-driven form with HttpClient so you get a smooth in-page experience without a page redirect.

1. 01Create your form in Formward

   Sign up at formward.eu, create a new form, and copy the endpoint URL (https://formward.eu/f/your-form-id).

2. 02Import HttpClientModule

   In your app.config.ts (standalone) or AppModule, add provideHttpClient() so Angular can make HTTP requests. If you are on Angular 14 or earlier, import HttpClientModule in @NgModule imports instead.

   // app.config.ts (Angular 17+ standalone)
   import { provideHttpClient } from '@angular/common/http';
   import { ApplicationConfig } from '@angular/core';
   
   export const appConfig: ApplicationConfig = {
     providers: [provideHttpClient()],
   };

3. 03Create the contact component

   Generate a component with ng generate component contact and replace its contents with the template and class below. The component submits as URL-encoded form data and passes Accept: application/json so Formward returns JSON instead of a redirect.

   // contact.component.ts
   import { Component } from '@angular/core';
   import { HttpClient, HttpHeaders } from '@angular/common/http';
   import { FormsModule } from '@angular/forms';
   import { CommonModule } from '@angular/common';
   
   interface FormData {
     name: string;
     email: string;
     message: string;
   }
   
   @Component({
     selector: 'app-contact',
     standalone: true,
     imports: [FormsModule, CommonModule],
     template: `
       <form (ngSubmit)="onSubmit()" #contactForm="ngForm">
         <label>Name
           <input type="text" name="name" [(ngModel)]="model.name" required />
         </label>
         <label>Email
           <input type="email" name="email" [(ngModel)]="model.email" required />
         </label>
         <label>Message
           <textarea name="message" [(ngModel)]="model.message" rows="5" required></textarea>
         </label>
         <!-- honeypot: keep hidden -->
         <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off" />
         <button type="submit" [disabled]="submitting">
           {{ submitting ? 'Sending…' : 'Send' }}
         </button>
         <p *ngIf="success">Message sent, thank you!</p>
         <p *ngIf="error">Something went wrong. Please try again.</p>
       </form>
     `,
   })
   export class ContactComponent {
     model: FormData = { name: '', email: '', message: '' };
     submitting = false;
     success = false;
     error = false;
   
     constructor(private http: HttpClient) {}
   
     onSubmit() {
       this.submitting = true;
       this.success = false;
       this.error = false;
   
       const body = new URLSearchParams({
         name: this.model.name,
         email: this.model.email,
         message: this.model.message,
         _gotcha: '',
       }).toString();
   
       const headers = new HttpHeaders({
         'Content-Type': 'application/x-www-form-urlencoded',
         Accept: 'application/json',
       });
   
       this.http
         .post('https://formward.eu/f/your-form-id', body, { headers })
         .subscribe({
           next: () => {
             this.success = true;
             this.submitting = false;
             this.model = { name: '', email: '', message: '' };
           },
           error: () => {
             this.error = true;
             this.submitting = false;
           },
         });
     }
   }

4. 04Test and view submissions

   Run ng serve, open the contact page, and submit the form. The page shows a success message without reloading. Open the Formward dashboard to confirm the submission arrived.