Drupal 9 - Sending email by Ajax form

Sending email by Ajax form in Drupal 9:

First make the HTML form, say it is here in this twig template:

<div id="shop-feedback-form" class="container-fluid">

  <div class="container">

    <div class="row">

     <div class="col-12 col-lg-5 text-left">

       <span class="d-block mb-3">Share your experience</span>

        <span class="d-none mb-3">How can we help?</span>

        <div class="d-block">

         <label class="ib-label" for="validationTextarea">Message</label>

          <textarea class="form-control exp-text-value" id="validationTextarea" 

placeholder="Please send us your question/remark or 

any problems you experienced during ordering. 

We will contact you as soon as possible."></textarea>

          <button class="btn btn-outline-secondary mx-0 share-exp-btn">Send</button>

        </div>

        <div class="d-none please-wait-box">Please wait!</div>

        <div class="d-none message-result-display-box">

         Thank you for sharing.  We will contact you as soon as possible.

        </div>

      </div>

    </div>

  </div>

</div> 

Second write down the Ajax functionalities: in your JS file, I hope you know how to add JS file/code in Drupal 9.

// Start

(function ($, Drupal) {

  'use strict';

  $(document).ready(function() {

    $('.share-exp-btn').click(function() {

      var _self = $(this);

      var experienceBox = $(this).prev();

      var experienceText = $(this).prev().val();

      if (experienceText != "") {

        $.ajax({

          url: Drupal.url('module_name/share-your-experience-form'),

          type: "POST",

          contentType: "application/json; charset=utf-8",

          dataType: "json",

          data: experienceText,

          beforeSend: function() {

            _self.addClass('d-none');

            $('.please-wait-box').addClass('d-block');

            $('.message-result-display-box').addClass('d-none');

          },

          success: function(response) {

            _self.addClass('d-block');

            $('.message-result-display-box').addClass('d-block');

            $('.message-result-display-box').text(response.data);

            $('.please-wait-box').removeClass('d-block');

            experienceBox.val('');

          }

        });

      }

      else {

        $('.message-result-display-box').addClass('d-block');

        $('.message-result-display-box').text('Please enter something in message input box!');

      }

    });

  });

})(jQuery, Drupal);

Third write down the route in module_name.routing.yml file:

module_name.share_experience_form:

  path: '/module_name/share-your-experience-form'

  defaults:

    _controller: '\Drupal\module_name\Controller\ShareYourExperienceController::submit'

    _title: 'Share your experience form'

  methods: [POST]

  requirements:

    _permission: 'access content'

Fourth write down the controller in your modue here src/Controller/ShareYourExperienceController.php 

<?php

namespace Drupal\ibcart\Controller;

use Drupal\Core\Controller\ControllerBase;

use Symfony\Component\HttpFoundation\Request;

use Symfony\Component\HttpFoundation\JsonResponse;

class ShareYourExperienceController extends ControllerBase {

  public function submit(Request $request) {

    $params = array();

    $content = $request->getContent();

    if (!empty($content) && $content != "") {

      // Send email to CS

      $module = 'module_name';

      $key = 'customerservice';

      $to = 'someemail@domain.org';

      $params['subject'] = 'Customer experience';

      $params['message'] = $content;

      $langcode = \Drupal::currentUser()->getPreferredLangcode();

      $send = true;

      $mailManager = \Drupal::service('plugin.manager.mail');

      $result = $mailManager->mail($module, $key, $to, $langcode, $params, NULL, $send);

      if ($result['result'] !== true) {

        return new JsonResponse(['success' => 0, 'data' => 'E-mail not sent!']);

      }

      return new JsonResponse(['success' => 1, 'data' => 'Thank you for sharing. We will contact you as soon as possible.']);

    }

    return new JsonResponse(['success' => 0, 'data' => 'Please enter something in message input box!']);

  }

}

Happy Coding!