Modal Bootstrap 5

[Artes Ussler 1]

Bom dia!

 

Inseri um modal em meu site com um formulário nele para a pessoa enviar uma mensagem (estou usando PhpMailer nesse caso). Esse modal é aberto através de um botão.

Abaixo segue o trecho inicial do modal:

 

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Quero fazer este curso</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              ...

Aí no final do modal tem o botão Enviar. Só que ao enviar a mensagem, o modal fecha.

 

Gostaria que o modal ficasse aberto, exibindo uma mensagem do tipo "Mensagem enviada".

 

Não sei se passei todas as informações necessárias, mas se alguém puder ajudar, fico grato.

 

[tetsuo 0]

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.

[Artes Ussler 1]

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.

 

[Jack Oliveira 1]

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