post #6205
Código JavaScript para Exibir Conteúdo Depois do Envio do Formulário no Elementor
Publicado em: 02/05/2025 / Atualizado em: 03/05/2025
Nesse post vou compartilhar um código para ser usado junto com o formulário do Elementor, onde você pode exibir uma seção oculta depois do envio do formulário e esconder o formulário atual.
Segue código abaixo:
<script>
(function () {
let form = document.querySelector('#form-download-material form');
if (form && !form.dataset.listenerAdicionado) {
form.dataset.listenerAdicionado = "true";
jQuery(form).on('submit_success', function () {
const secaoParaExibir = document.querySelector('.secao-resultado-download');
const secaoParaOcultar = document.querySelector('.secao-form-download');
if (secaoParaExibir) {
secaoParaExibir.classList.remove('ocultar-secao-download-mt');
}
if (secaoParaOcultar) {
secaoParaOcultar.classList.add('ocultar-secao-download-mt');
}
});
}
})();
</script>
<style>
.ocultar-secao-download-mt {
display: none !important;
}
</style>Em seu código, você precisa ter as seções como abaixo:
<section class="secao-form-download"> <!-- essa será ocultada --> <!-- Formulário aqui --> </section> <section class="secao-resultado-download ocultar-secao-download-mt"> <!-- essa será exibida após envio --> <!-- Conteúdo pós-formulário --> </section>
Alem disso, não esquecer de adicionar o ID #form-download-material no widget do seu formulário.
Publicações recomendadas:
Link Direto
Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.
bruno.art.br/?p=6205
ID de Referência: 6205
Sugira uma publicação
Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.