Home Angular 10 Angular 11 Laravel 8 User Contact Form with Send Email Functionality

Angular 11 Laravel 8 User Contact Form with Send Email Functionality

by therichpost
0 comment
Angular 11 Laravel 8 User Contact Form with Send Email Functionality

Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Angular 11 Laravel 8 User Contact Form with Send Email Functionality.

Angular Laravel

Angular10 came and if you are new then you must check below two links:

  1. Angular11 Basic Tutorials

Here are the working code snippet for Angular 11 Laravel 8 User Contact Form with Send Email Functionality and please follow carefully:

1. Firstly friends we need fresh angular 11 setup and for this we need to run below commands but if you already have angular 11 setup then you can avoid below commands. Secondly we should also have latest node version installed on our system:

Guys you can skip this step this step if you already have angular 11 fresh setup:

npm install -g @angular/cli 

ng new angularlaravel //Create new Angular Project

cd angularlaravel  // Go inside the Angular Project Folder

ng serve --open // Run and Open the Angular Project

http://localhost:4200/ // Working Angular Project Url

2. Now friends, here we need to run below commands into our project terminal to install sweetalert2  modules into our angular application:

npm install --save sweetalert2

npm i bootstrap --save

ng serve --o

3. Now friends, here we need to add below  into our angular.json file to get modules styles and scripts:

"styles": [
            "scripts": [

4. Now friends we need to add below code into your src/app/app.module.ts file:

import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
  imports: [

5. Now friends we need to add below code into src/app/app.component.ts file:

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import Swal from 'sweetalert2/dist/sweetalert2.js';
export class AppComponent {
  //Mail user form start
mailForm: FormGroup;
submitted = false;
constructor(private http: HttpClient, private formBuilder: FormBuilder){}
//Mail user form actions
get f() { return this.mailForm.controls; }
onSubmit() {
  this.submitted = true;
  // stop here if form is invalid
  if (this.mailForm.invalid) {
  //True if all the fields are filled
    // Initialize Params Object
     var myFormData = new FormData();
   // Begin assigning parameters
      myFormData.append('myUsername', this.mailForm.value.firstname);
      myFormData.append('myEmail', this.mailForm.value.email);
      myFormData.append('textquery', this.mailForm.value.textquery);
    //post request
    return this.http.post('http://localhost/laravel8/public/api/send/email'
    , myFormData).subscribe((res: Response) => {
        //sweetalert message popup
        title: 'Hurray!!',
        text:   "Mail has been send successfully.",
        icon: 'success'
  ngOnInit() {
    //Mail User form validations
    this.mailForm = this.formBuilder.group({
    email: ['', [Validators.required, Validators.email]],
    firstname: ['', [Validators.required]],
    textquery:['', [Validators.required]]

6. Now friends we need to add below code into src/app/app.component.html file:

<form [formGroup]="mailForm" (ngSubmit)="onSubmit()">
   <div class="row">
      <div class="col-sm-6">
         <div class="form-group">
               <input type="text" formControlName="firstname" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstname.errors }" />
               <div *ngIf="submitted && f.firstname.errors" class="invalid-feedback">
                     <div *ngIf="f.firstname.errors.required">Name is required</div>
      <div class="col-sm-6">
         <div class="form-group">
            <input type="text" formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
            <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
               <div *ngIf="f.email.errors.required">Email is required</div>
               <div *ngIf="f.email.errors.email">Email must be a valid email address</div>
      <div class="col-sm-12">
       <div class="form-group">
          <textarea formControlName="textquery" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.textquery.errors }"></textarea>
          <div *ngIf="submitted && f.textquery.errors" class="invalid-feedback">
             <div *ngIf="f.textquery.errors.required">Query is required</div>
  <button type="submit" class="btn btn-primary">Send Mail</button>

Laravel Section Start


a) Now friends we need to create `email` folder inside `resources/view folder

b) Now create new name.blade.php file inside resources/views/email folder

c) Now add below code into resources/views/ email/name.blade.php file

Name  : {{ $data1["Name"] }}<br>
Email : {{ $data1["Email"] }}<br>
Query : {{ $data1["Query"] }}


2. Now friends, we need to add below code into our laravel 8 project routes/api.php file:

//Email Route which we used in angular http service
Route::post('send/email', [App\Http\Controllers\HomeController::class, 'mail'])->name('email');


3. Now friends, we need to add below code into our laravel 8 project app/Http/Controllers/HomeController.php file:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Illuminate\Support\Facades\Mail;

class HomeController extends Controller

    public function mail(Request $request)
        $data = [
                'Name'  => $request->input('myUsername'),
                'Email' => $request->input('myEmail'),
                'Query' => $request->input('textquery')
        //Mail Function
        Mail::send('email.name', ['data1' => $data], function ($m) {
            $m->to('therichposts@gmail.com')->subject('Contact Form Mail!');

        //Json Response For Angular frontend
        return response()->json(["message" => "Email sent successfully."]);


6. Finally but not the last, we need to set mailgun credentials into our Laravel 8 project .env file:



Now we are done friends and don’t forget to start your Laravel 8 project server also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Guys in this post, I am sending email from my angular 11 front-end via Laravel 8 backend with the help of mailgun.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.



You may also like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.