Send email of contact form with Angular

Viewed 2246

I have a contact form in my Angular project and I am trying to use https://mailthis.to/ for my email sending. All my input data is working correctly because it shows in the console - however, the mailthis.to is still not working - I'm not receiving any emails or any submissions in my login at mailthis.to.

contact.component.html
           <form
                action="https://mailthis.to/my_email@yahoo.com"
                method="POST"
                encType="multipart/form-data"
                novalidate
                class="needs-validation"
                (ngSubmit)="processForm()"
                *ngIf="!submitted"
                #form="ngForm"
              >
                <div
                  class="field"
                  [ngClass]="{ 'has-error': name.invalid && name.touched }"
                >
                  <label>First and Last Name:</label>
                  <input
                    type="text"
                    name="Name"
                    class="input"
                    placeholder="Full Name"
                    [(ngModel)]="user.Name"
                    #name="ngModel"
                    required
                  />
                  <span class="help-block" *ngIf="name.invalid && name.touched"
                    >Name is required.</span
                  >
                </div>

                <div
                  class="field"
                  [ngClass]="{ 'has-error': email.invalid && email.touched }"
                >
                  <label>Your Email:</label>
                  <input
                    type="email"
                    name="Email"
                    class="input"
                    [(ngModel)]="user.Email"
                    #email="ngModel"
                    required
                  />
                  <span
                    class="help-block"
                    *ngIf="email.invalid && email.touched"
                    >Email is required.</span
                  >
                </div>

                <button type="submit" class="button" [disabled]="form.invalid">
                  <input type="submit"  [disabled]="form.invalid"/>
                </button>
              </form>

Then here is my contact.component.ts

export class User {
  Name: string;
  Email: string;
}

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css'],
})
export class ContactComponent implements OnInit {
  user: User;
  submitted: boolean = false; // checks if the form has been submitted

  constructor(private contact: ConnectionService) {}

  ngOnInit() {
    this.user = {
      Name: '',
      Email: ''
   };

processForm() {
    this.contact.PostMessage(this.user);
    console.log(this.user);
    this.submitted = true;
  }
}

And lastly, here is my connection.service.ts

@Injectable({
  providedIn: 'root',
})
export class ConnectionService {
  private api = 'https://mailthis.to/my_email@yahoo.com';

  constructor(private http: HttpClient) {}

  PostMessage(input: any) {
    return this.http.post(this.api, input, { responseType: 'text' }).pipe(
      map(
        (response) => {
          if (response) {
            return response;
          }
        },
        (error: any) => {
          return error;
        }
      )
    );
  }
}
1 Answers

if you use api then its beter you send your mail with backend code instead of frontand code

Related