Modal Bootstrap 5

O form é "submetido" via ajax?

Remova a associação do submit do form com o fechamento da modal.

Aguarde a response da request e exiba como preferir.

Bom dia

Desculpe a demora pra responder.

Achei um tutorial que divide o envio em duas etapas: um modal com o formulário e outro modal exibindo um alerta de mensagem enviada.

Assim que conseguir  vou postar aqui o código.

Não sei se já resolveu a sua questão aí...

Para dividir o envio da mensagem em duas etapas com modais, você pode seguir o seguinte processo:

Primeiro Modal: Contém o formulário de contato.

Processamento do Formulário: O formulário é enviado através de AJAX.

Segundo Modal: Exibe uma mensagem de sucesso ou erro após o envio.

Aqui está um exemplo detalhado de como você pode implementar isso:

Primeiro Modal com Formulário

<!-- Primeiro Modal -->

<div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="contactModalLabel">Quero fazer este curso</h5>
 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 </div>
 <div class="modal-body">
 <form id="contactForm">
 <div class="mb-3">
 <label for="name" class="form-label">Nome</label>
 <input type="text" class="form-control" id="name" name="name" required>
 </div>
 <div class="mb-3">
 <label for="email" class="form-label">Email</label>
 <input type="email" class="form-control" id="email" name="email" required>
 </div>
 <div class="mb-3">
 <label for="message" class="form-label">Mensagem</label>
 <textarea class="form-control" id="message" name="message" rows="3" required></textarea>
 </div>
 <button type="submit" class="btn btn-primary">Enviar</button>
 </form>
 </div>
 </div>
 </div>
</div>

	Segundo Modal para Mensagem de Sucesso/Erro

<!-- Segundo Modal -->

<div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <h5 class="modal-title" id="statusModalLabel">Status da Mensagem</h5>
 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
 </div>
 <div class="modal-body" id="statusMessage">
 <!-- Mensagem de status será inserida aqui -->
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
 </div>
 </div>
 </div>
</div>

	Script AJAX para Envio do Formulário

	 

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 $(document).ready(function(){
 $("#contactForm").on("submit", function(e){
 e.preventDefault();
 $.ajax({
 type: "POST",
 url: "send_message.php", // O arquivo PHP que processa o formulário
 data: $(this).serialize(),
 success: function(response){
 $("#contactModal").modal('hide');
 $("#statusMessage").html(response);
 $("#statusModal").modal('show');
 },
 error: function(){
 $("#contactModal").modal('hide');
 $("#statusMessage").html('<p class="text-danger">Houve um erro ao enviar sua mensagem. Tente novamente mais tarde.</p>');
 $("#statusModal").modal('show');
 }
 });
 });
 });
</script>

	Arquivo PHP (send_message.php) para Processar o Formulário com PHPMailer

	 

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'PHPMailer/src/Exception.php';
require 'PHPMailer/src/PHPMailer.php';
require 'PHPMailer/src/SMTP.php';

if ($_SERVER["REQUEST_METHOD"] == "POST") {
 $name = htmlspecialchars($_POST['name']);
 $email = htmlspecialchars($_POST['email']);
 $message = htmlspecialchars($_POST['message']);

 $mail = new PHPMailer(true);

 try {
 // Configurações do servidor
 $mail->isSMTP();
 $mail->Host = 'smtp.exemplo.com';
 $mail->SMTPAuth = true;
 $mail->Username = 'seu_email@exemplo.com';
 $mail->Password = 'sua_senha';
 $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;
 $mail->Port = 587;

 // Remetente e destinatário
 $mail->setFrom('seu_email@exemplo.com', 'Seu Nome');
 $mail->addAddress('destinatario@exemplo.com', 'Nome Destinatário');

 // Conteúdo do email
 $mail->isHTML(true);
 $mail->Subject = 'Nova mensagem do formulário de contato';
 $mail->Body = "<p><strong>Nome:</strong> {$name}</p>
 <p><strong>Email:</strong> {$email}</p>
 <p><strong>Mensagem:</strong><br>{$message}</p>";

 $mail->send();
 echo '<p class="text-success">Sua mensagem foi enviada com sucesso!</p>';
 } catch (Exception $e) {
 echo '<p class="text-danger">Houve um erro ao enviar sua mensagem. Tente novamente mais tarde.</p>';
 }
}
?>

	Não sei como você está fazendo aí, mais pode ajustar ao seu critério