Curso Mago Contact Form 7

Como Desabilitar Botão De Enviar Após Click no Contact Form 7

Aula 37
11:43 minutos de vídeo

FalaÊ Incuber beleza? Seja muito bem-vindo a mais uma aula do Curso gratuito Mago Contact Form 7 do Nano Academy.

Aqui é o Paulo Felipe e nessa aula eu vou te ensinar Como Desabilitar Botão De Enviar Após Click no Contact Form 7 em seu site WordPress utilizando um código simples de javascript para realizar o processo.

Ter esse recurso em formulários de contato evita que aconteça o envio de múltiplos e-mails pelo usuário.

Front-end na Nano Incub.
Estudou banco de dados na FATEC de Indaiatuba/SP, é formado pela equipe Nano Incub de desenvolvimento, é neurótico por autoconhecimento, pai, skatista, slackliner e doido por ensinar.

Materiais de apoio:

Código para inserir no seu arquivo JS customizado:

//Inserindo máscaras nos campos do form

//Se já existir a linha abaixo em seu código NÃO Copie e cole o restante do código abaixo da função
jQuery(document).ready(function ($) {  


    //Desabilitando o botão de enviar do CF7 após clicar nele
    jQuery( '.wpcf7-submit' ).click(function() {
        jQuery( this ).attr( 'disabled', true );
        jQuery( this ).attr( 'value', 'Enviando...' );
        jQuery( this ).submit();
    });

    //Evento disparado se existir campos inválidos
    document.addEventListener( 'wpcf7invalid', function() {
        jQuery( '.wpcf7-submit' ).attr( 'disabled', false );
        jQuery( '.wpcf7-submit' ).attr( 'value', 'Enviar' );
    }, false );

    //Evento disparado se o Contact Form 7 considerar o envio um Spam
    document.addEventListener( 'wpcf7spam ', function() {
        jQuery( '.wpcf7-submit' ).attr( 'disabled', false );
        jQuery( '.wpcf7-submit' ).attr( 'value', 'Enviar' );
    }, false );

    //Evento disparado depois que o form for enviado com sucesso
    document.addEventListener( 'wpcf7mailsent', function() {
        jQuery( '.wpcf7-submit' ).attr( 'disabled', false );
        jQuery( '.wpcf7-submit' ).attr( 'value', 'Enviar' );
    }, false );

    //Evento disparado quando o envio falha por motivos de servidores de e-mail
    document.addEventListener( 'wpcf7mailfailed', function() {
        jQuery( '.wpcf7-submit' ).attr( 'disabled', false );
        jQuery( '.wpcf7-submit' ).attr( 'value', 'Enviar' );
    }, false );

    //Evento disparado após clicar no botão de enviar
    document.addEventListener( 'wpcf7submit', function() {
        jQuery( '.wpcf7-submit' ).attr( 'disabled', false );
        jQuery( '.wpcf7-submit' ).attr( 'value', 'Enviar' );
    }, false );

});
//Se não copiou a linha comentada no início do código, NÃO copie a linha acima