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!
