Jump to content

POWERED BY:

Recommended Posts

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.

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By sNniffer
      Pessoal,
       
      Numa página chamado 3 modais bootstrap, em cada modal há um mapa, preciso que cada mapa ao ser clicado, seja criado um marker, capturado as coordenadas desse marker e exibido o endereço correspondente num input. Os mapas estão sendo exibidos corretamente, mas, esta sendo criado apenas o marker no primeiro mapa 'map', nos outros, ao clicar não está criando o marker e o endereço enviado para o input é apenas 'Brasil'.
       
      Abaixo meu arquivo .js, com todas as funções.
       
      A função createMarker..., cria o marker, e a função getCoords..., captura o endereço.
      $(function () { $("#rota_mapa_saida").on('shown.bs.modal', function () { google.maps.event.trigger(map, 'resize'); }); $("#rota_mapa_coleta").on('shown.bs.modal', function () { google.maps.event.trigger(map_coleta, 'resize'); }); $("#rota_mapa_destino").on('shown.bs.modal', function () { google.maps.event.trigger(map_destino, 'resize'); }); }); var map var map_coleta var map_destino var marker; function initialize() { //Inicializa mapa var mapOptions = { center: new google.maps.LatLng(-9.435530395596114,-36.09555605468743), zoom: 9, mapTypeId: 'roadmap' }; map = new google.maps.Map(document.getElementById('map-canvas-maker-saida'), mapOptions); map_coleta = new google.maps.Map(document.getElementById('map-canvas-maker-coleta'), mapOptions); map_destino = new google.maps.Map(document.getElementById('map-canvas-maker-destino'), mapOptions); google.maps.event.addListener(map, "click", function(event) { var lat_saida = event.latLng.lat().toFixed(6); var lng_saida = event.latLng.lng().toFixed(6); createMarker_saida(lat_saida, lng_saida); getCoords_saida(lat_saida, lng_saida); }); google.maps.event.addListener(map_coleta, "click", function(event) { var lat_coleta = event.latLng.lat().toFixed(6); var lng_coleta = event.latLng.lng().toFixed(6); createMarker_coleta(lat_coleta, lng_coleta); getCoords_coleta(lat_coleta, lng_coleta); }); google.maps.event.addListener(map_destino, "click", function(event) { var lat_destino = event.latLng.lat().toFixed(6); var lng_destino = event.latLng.lng().toFixed(6); createMarker_destino(lat_destino, lng_destino); getCoords_destino(lat_destino, lng_destino); }); } google.maps.event.addDomListener(window, 'load', initialize); // Função que cria o marcador no maps Saída////////////////////////////////////////////////////////////////////// function createMarker_saida(lat, lng) { if (marker) { // remover esse marcador do mapa marker.setMap(null); // remover qualquer valor da variável marker_saida marker = ""; } marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), draggable: true, map: map }); // Evento que detecta o arrastar do marcador para google.maps.event.addListener(marker, 'dragend', function() { marker.position = marker.getPosition(); // os valores das caixas de texto no topo var lat = marker.position.lat().toFixed(6); var lng = marker.position.lng().toFixed(6); // Atualiza Inputs getCoords_saida(lat, lng); }); } // Função que actualiza as caixas de texto no topo da página function getCoords_saida(lat, lng) { /////////////////////////////////////////////////////// //Captura o endereço var latlng = lat + "," +lng; var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=" + latlng + "&sensor=true"; $.getJSON(url, function (data) { for(var i=0;i<data.results.length;i++) { var adress = data.results[i].formatted_address; //alert(adress); document.getElementById('endereco_saida_maps').value = adress; endereco_campo.value = adress; } }); } // Função que cria o marcador no maps Saída/////////////////////////////////////////////////////////////////// // Função que cria o marcador no maps Coelta////////////////////////////////////////////////////////////////// function createMarker_coleta(lat_coleta, lng_coleta) { if (marker) { // remover esse marcador do mapa marker.setMap(null); // remover qualquer valor da variável marker marker = ""; } marker = new google.maps.Marker({ position: new google.maps.LatLng(lat_coleta, lng_coleta), draggable: true, map_coleta: map_coleta }); // Evento que detecta o arrastar do marcador para google.maps.event.addListener(marker, 'dragend', function() { marker.position = marker.getPosition(); // os valores das caixas de texto no topo var lat_coleta = marker.position.lat().toFixed(6); var lng_coleta = marker.position.lng().toFixed(6); // Atualiza Inputs getCoords_coleta(lat_coleta, lng_coleta); }); } function getCoords_coleta(lat, lng) { /////////////////////////////////////////////////////// //Captura o endereço var latlng = lat + "," +lng; var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=" + latlng + "&sensor=true"; $.getJSON(url, function (data) { for(var i=0;i<data.results.length;i++) { var adress = data.results[i].formatted_address; //alert(adress); document.getElementById('endereco_coleta_maps').value = adress; //endereco_campo.value = adress; } }); } // Função que cria o marcador no maps Coleta////////////////////////////////////////////////////////////////// // Função que cria o marcador no maps Destino///////////////////////////////////////////////////////////////// function createMarker_destino(lat, lng) { if (marker) { // remover esse marcador do mapa marker.setMap(null); // remover qualquer valor da variável marker marker = ""; } marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lng), draggable: true, map_destino: map_destino }); // Evento que detecta o arrastar do marcador para google.maps.event.addListener(marker, 'dragend', function() { marker.position = marker.getPosition(); // os valores das caixas de texto no topo var lat = marker.position.lat().toFixed(6); var lng = marker.position.lng().toFixed(6); // Atualiza Inputs getCoords_destino(lat, lng); }); } function getCoords_destino(lat, lng) { /////////////////////////////////////////////////////// //Captura o endereço var latlng = lat + "," +lng; var url = "http://maps.googleapis.com/maps/api/geocode/json?latlng=" + latlng + "&sensor=true"; $.getJSON(url, function (data) { for(var i=0;i<data.results.length;i++) { var adress = data.results[i].formatted_address; //alert(adress); document.getElementById('endereco_destino_maps').value = adress; //endereco_campo.value = adress; } }); } // Função que cria o marcador no maps Destino//////////////////////////////////////////////////////////////////////
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.