<form action="" method="POST" id="demoForm" class="row row-cols-lg-auto g-3 align-items-center">

<div class="container-input">
<label class="visually-hidden" for="inlineFormInputGroupName">Name</label>
<div class="input-group">
<div class="input-group-text"><i class="fa-solid fa-user"></i></div>
<input type="text" name="name" class="form-control" id="inlineFormInputGroupName" placeholder="name" maxlength="20">
</div>
</div>

<div class="container-input">
<label class="visually-hidden" for="inlineFormInputGroupEmail">Email</label>
<div class="input-group">
<div class="input-group-text"><i class="fa-solid fa-at"></i></div>
<input type="text" name="email" class="form-control" id="inlineFormInputGroupEmail" placeholder="email" maxlength="40">
</div>
</div>

<div class="container-input">
<label class="visually-hidden" for="inlineFormInputGroupSubject">Subject</label>
<div class="input-group">
<div class="input-group-text"><i class="fa-solid fa-comment-dots fa-flip-horizontal"></i></div>
<input type="text" name="subject" class="form-control" id="inlineFormInputGroupSubject" placeholder="subject" maxlength="20">
</div>
</div>

<div class="container-input">
<label class="visually-hidden" for="inlineFormInputGroupMessage">Message</label>
<div class="input-group">
<textarea class="form-control" name="message" id="inlineFormInputGroupMessage" placeholder="message" maxlength="60"></textarea>
</div>
</div> 

<div class="container-input">
<input name="submit" type="submit" value="Submit" class="btn btn-primary float-end" data-toggle="tooltip" data-bs-placement="left" title="This is a demonstration. Your input will not be posted.">
</div>
</form>


<div id="output"></div>

.demo-container {
  padding: 2em;
}
	
.demo-input-error {
  color: red;
  font-weight: 500;
}
	
.demo-fa-error {
  padding-left: 0.5em;
  font-size: small;
}
	
.demo-fa-warning {
  padding-left: 0.5em;
  font-size: small;
  color: #ff9900;
}
	
.demo-container-after-submit {
  text-align: left;
}
	
.container-input {
  display: block;
  width: 100%;
}

<script>
$(function () {

$('#demoForm').on('submit', function (event) {
  $.ajax({
  type: 'post',
  url: 'post.php',
  data: $('form').serialize(),
  success: function (data) {
  $("#output").html(data);
}
});
event.preventDefault();
});

});
</script>

<?php
$name = $_POST["name"];
$email = $_POST["email"];
$subject = $_POST["subject"];
$message = $_POST["message"];

// if the name field is empty:
if ($name == "" ) {
echo "Please fill in your <span class=\"demo-input-error\">name <i class=\"fa-solid fa-user demo-fa-error\"></i> </span>";
}

// if the email address field is empty:
else if ($email == "" ) {
echo "Please fill in your <span class=\"demo-input-error\">email address <i class=\"fa-solid fa-at demo-fa-error\"></i> </span>";
}

// if the email address is not valid
else if (!preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $email)) {
echo "Please enter <span class=\"demo-input-error\">a valid email address 
<i class=\"fa-solid fa-circle-exclamation demo-fa-warning\"></i></span>";
}

// if the subject field is empty:
else if ($subject == "" ) {echo "Please fill in <span class=\"demo-input-error\">the subject <i class=\"fa-solid fa-brain\"></i>";}
// if the message field is empty:
else if ($message == "" ) {echo "Please enter <span class=\"demo-input-error\">your message</span>";}

// if all the fields have been filled in:
else {
echo "<div class=\"rounded-8 demo-container-after-submit\">";
echo "Your information has been submitted successfully. Thank you <strong>". $name . "</strong><br><br>";
echo "<b>Name:</b> ".$name."<br>";
echo "<b>Email:</b> ".$email."<br>";
echo "<b>Subject:</b> ".$subject."<br>";
echo "<b>Message:</b><br> ".$message;
echo "</div>";
}

?>