Problem with POST in angular 6 and ajax to send forms to formspree

I'm a bit new to Angular and I was trying to use the link service when I found out that the forms could not execute the POST method, here the code of my form

    <form class="form" [formGroup]="contactForm" method="POST" (ngSubmit)="onSubmit()" action="https://formspree.io/[email protected]" novalidate>
  <mat-form-field class="full-width">
    <input matInput placeholder="Nombre completo" formControlName="name" id="name" type="text" name="name" required>
  </mat-form-field>
  <mat-form-field class="full-width">
      <input matInput placeholder="Email" [formControl]="email" [errorStateMatcher]="matcher" type="email" formControlName="email" id="email" name="email" required>
      <mat-hint></mat-hint>
      <mat-error *ngIf="email.hasError('email') && !email.hasError('required')">
        Por favor ingrese un email válido
      </mat-error>
    </mat-form-field>
  <mat-form-field class="full-width">
    <textarea matInput placeholder="Deja un comentario" formControlName="message" id="message" name="message" type="text" required></textarea>
  </mat-form-field>
  <input type="submit" value="Enviar" class="mat-raised-button">
</form>

In my component I imported the HttpClient and HttpHeaders from '@ angular / common / http'; to be able to use the http.post () method that I passed the formspreed url with my mail, the JSON of the form and the headers that I found as an example, I leave the code of all my component

    import { Component, AfterViewInit, ElementRef, OnInit } from '@angular/core';
    import { FormControl, FormGroupDirective, NgForm, Validators, FormGroup } from '@angular/forms';
    import { ErrorStateMatcher } from '@angular/material/core';
    import {HttpClient, HttpHeaders} from '@angular/common/http';
    // Error when invalid control is dirty, touched, or submitted.
    export class MyErrorStateMatcher implements ErrorStateMatcher {
      isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
        const isSubmitted = form && form.submitted;
        return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
      }
    }
    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements AfterViewInit, OnInit {
      contactForm: FormGroup;
      name = new FormControl('', Validators.required);
      email = new FormControl('', [ Validators.email, Validators.required ]);
      message = new FormControl('', Validators.required);
      matcher = new MyErrorStateMatcher();
      ngOnInit() {
        this.contactForm = new FormGroup({
          name: this.name,
          email: this.email,
          message: this.message
        });
      }
      onSubmit() {
        if (this.contactForm.valid) {
          const headers = new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded');
          this.http.post(
            'https://formspree.io/[email protected]',
            this.contactForm,
            { headers: headers }
          );
          window.alert('Mensaje enviado');
          this.contactForm.reset();
        }
      }
      constructor(public http: HttpClient) {}
    }

The submit method works well and the post does not make any mistakes but the formspreed confirmation email that should arrive when sending them a POST does not arrive. This makes me think that this method is not working, it would help me a lot if I could make you understand how you should use this method or if you know someone else to perform the same action, greetings and thanks.