Why my Bootstrap alert not showing in my form? AJAX - php

Question

My form is supposed to show an alert, either "success" if the message was sent successfully or "danger" if there was an error, for example incorrect captcha or captcha completion.
The problem is that it doesn't show the alert with the CSS style, it only shows the close button and the error. Could someone tell me what is wrong?
Bootstrap version: 4.1 && PHP version 8.1
HTML:
<form id="contact_form" class="contact-form" action="contact_form/contact_form.php" method="post">
<div class="messages"></div>
<div class="controls two-columns">
<div class="fields clearfix">
<div class="left-column">
<div class="form-group form-group-with-icon">
<input id="form_name" type="text" name="name" class="form-control" placeholder="" required="required" data-error="Write your name.">
<label>Name</label>
<div class="form-control-border"></div>
<div class="help-block with-errors"></div>
</div>
<div class="form-group form-group-with-icon">
<input id="form_email" type="email" name="email" class="form-control" placeholder="" required="required" data-error="Put your email.">
<label>Email</label>
<div class="form-control-border"></div>
<div class="help-block with-errors"></div>
</div>
<div class="form-group form-group-with-icon">
<input id="form_subject" type="text" name="subject" class="form-control" placeholder="" required="required" data-error="Write a Subject.">
<label>Subject</label>
<div class="form-control-border"></div>
<div class="help-block with-errors"></div>
</div>
</div>
<div class="right-column">
<div class="form-group form-group-with-icon">
<textarea id="form_message" name="message" class="form-control" placeholder="" rows="7" required="required" data-error="And... your message?."></textarea>
<label>Message</label>
<div class="form-control-border"></div>
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="g-recaptcha" data-theme="dark" data-sitekey="6Lc9oSQcAAAAAMd-JXG26NP1iNzIeNZatd_Eetrv"></div>
<input type="submit" class="button btn-send" value="Send">
</div>
</form>
Code JS:
$(function () {
$('#contact_form').validator();
$('#contact_form').on('submit', function (e) {
if (!e.isDefaultPrevented()) {
var url = "contact_form/contact_form.php";
$.ajax({
type: "POST",
url: url,
data: $(this).serialize(),
success: function (data)
{
var messageAlert = 'alert-' + data.type;
var messageText = data.message;
var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>' + messageText + '</div>';
if (messageAlert && messageText) {
$('#contact_form').find('.messages').html(alertBox);
$('#contact_form')[0].reset();
}
}
});
return false;
}
});
});
CODE PHP:
<?php
// configure
$from = ''; // Replace it with Your Hosting Admin email. REQUIRED!
$sendTo = ''; // Replace it with Your email. REQUIRED!
$subject = '';
$fields = array('name' => 'Name', 'email' => 'Email', 'subject' => 'Subject', 'message' => 'Message'); // array variable name => Text to appear in the email. If you added or deleted a field in the contact form, edit this array.
$okMessage = 'Contact form successfully submitted. Thank you, I will get back to you soon!';
$errorMessage = 'There was an error while submitting the form. Please try again later';
// let's do the sending
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])):
//your site secret key
$secret = '';
//get verify response data
$c = curl_init('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
$verifyResponse = curl_exec($c);
$responseData = json_decode($verifyResponse);
if($responseData->success):
try
{
$emailText = nl2br("You have new message from Contact Form\n");
foreach ($_POST as $key => $value) {
if (isset($fields[$key])) {
$emailText .= nl2br("$fields[$key]: $value\n");
}
}
$headers = array('Content-Type: text/html; charset="UTF-8";',
'From: ' . $from,
'Reply-To: ' . $from,
'Return-Path: ' . $from,
);
mail($sendTo, $subject, $emailText, implode("\n", $headers));
$responseArray = array('type' => 'success', 'message' => $okMessage);
}
catch (\Exception $e)
{
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
}
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
}
else {
echo $responseArray['message'];
}
else:
$errorMessage = 'Robot verification failed, please try again.';
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
endif;
else:
$errorMessage = 'Please click on the reCAPTCHA box.';
$responseArray = array('type' => 'danger', 'message' => $errorMessage);
$encoded = json_encode($responseArray);
header('Content-Type: application/json');
echo $encoded;
endif;
Thanks in advance.