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;
}
)
);
}
}