Integrate FormSubmit into Your Angular 18 App – The Easiest Way!

Sending e-mails without backend the easiest way? Let's see:

Make a new service

ng g s formsubmit --skip-tests

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Injectable({
  providedIn: 'root'
})
export class FormsubmitService {
  constructor(private http: HttpClient) { }
  sendEmail(name: string, email: string, message: string) {
    const formData = new FormData();
    formData.append('name', name);
    formData.append('email', email);
    formData.append('message', message);
    formData.append('_subject', 'New Message!');
    formData.append('_captcha', 'false');
    this.http.post('https://formsubmit.co/hello@sksdevelop.com', formData) //Set your own mail address here
      .subscribe(
        (response) => {
          console.log('Form submitted successfully:', response); //for testing
        },
        (error) => {
          console.error('Error submitting form:', error); //for testing
        }
      );
  }
}

Make a new component if needed

ng g c contact --skip-tests

🟣contact.component.html

<form (ngSubmit)="onSubmit()" #contactForm="ngForm">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" [(ngModel)]="name" required />
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" [(ngModel)]="email" required />
  </div>
  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" [(ngModel)]="message" required></textarea>
  </div>
  <button type="submit" [disabled]="contactForm.invalid">Send</button>
</form>

🟣contact.component.ts

import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormsubmitService } from '../../services/formsubmit.service';
@Component({
  selector: 'app-contact',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './contact.component.html',
  styleUrl: './contact.component.css',
  animations: []
})
export class ContactComponent {
  name: string = '';
  email: string = '';
  message: string = '';
  constructor(private formsubmitService: FormsubmitService) { }
  onSubmit() {
    this.formsubmitService.sendEmail(this.name, this.email, this.message);
  }
 
}

After testing you'll receive an Activation link to your given e-mail address