### [Como Mostrar Condicionalmente o Botão de Envio](https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/) **Publicado:** 17 de fevereiro de 2021 **Autor:** Umair Majeed **Resumo:** Este tutorial mostrar-lhe-á como mostrar condicionalmente o botão de envio com base nas respostas às perguntas do seu formulário. **Conteúdo:** Gostaria de mostrar ou ocultar automaticamente o botão de Envio com base nas respostas aos campos do formulário? Com um simples trecho de código, pode controlar a visibilidade do botão de Envio do seu formulário utilizando a lógica condicional. Este guia mostra como adicionar um trecho de código e configurar a lógica condicional para controlar a visibilidade do seu botão de Envio. ## Configuração do Formulário Para começar, abra o construtor de formulários [criando um novo formulário](https://wpforms.com/docs/creating-first-form/) ou editando um existente. Para este exemplo, criaremos um formulário de doação com um campo de Escolha Múltipla que mostra as opções Sim/Não. Todos os outros campos adicionais no formulário serão revelados apenas se **Sim** for selecionado utilizando a lógica condicional. O botão de Envio aparecerá apenas quando **Sim** for selecionado, e os utilizadores serão redirecionados para uma página de Agradecimento se **Não** for selecionado. **Nota:** Anote o ID do seu formulário, pois precisará dele ao adicionar o trecho de código. Se precisar de ajuda para encontrar estes IDs, consulte o nosso guia sobre [como encontrar IDs de formulário e campo](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/). ### Configuração da Lógica Condicional Antes de adicionarmos o código para o botão de Envio, precisamos de configurar a lógica condicional para os outros campos do seu formulário. Estes campos devem permanecer ocultos até que o utilizador selecione “Sim” no campo de Escolha Múltipla. Para conseguir isto, abra as definições de cada campo e configure a lógica condicional para mostrar o campo quando o seu campo de Escolha Múltipla for igual a **Sim**. Isto garante que estes campos permanecem ocultos por defeito e só aparecem quando necessário. **Nota:** Se precisar de ajuda para entender como funciona a lógica condicional no WPForms, consulte o nosso [guia detalhado sobre lógica condicional](https://wpforms.com/docs/how-to-use-conditional-logic-with-wpforms/). ## Criação da página de Agradecimento Como o nosso formulário oferece aos utilizadores uma escolha Sim/Não, queremos proporcionar uma boa experiência mesmo quando “Não” é selecionado. Em vez de apenas ocultar o botão de Envio, redirecionaremos os utilizadores para uma página de Agradecimento dedicada. Para fazer isto, crie uma nova página no WordPress e nomeie-a **Agradecimento** (ou qualquer outro nome que prefira). É para aqui que os utilizadores que selecionarem “Não” serão automaticamente redirecionados. Anote o caminho do URL da página, pois precisará dele para o redirecionamento no nosso trecho de código. ## Adição do Trecho de Código O seguinte trecho de código controlará a visibilidade do seu botão de Envio com base nas respostas do formulário: Este snippet primeiro utiliza CSS para ocultar o botão de Envio quando a página é carregada inicialmente. Em seguida, configura um listener de eventos JavaScript que monitoriza as alterações nas opções do campo de Escolha Múltipla do seu formulário. Quando um utilizador seleciona “Sim”, o script adiciona uma classe CSS que torna o botão de Envio visível. Se selecionarem “Não”, o script redireciona-os automaticamente para a sua página de Agradecimento. **Nota:** Se precisar de ajuda para adicionar trechos de código ao seu site, consulte o nosso tutorial sobre [como adicionar trechos de código](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/) de forma segura. ## Personalização do Código Terá de personalizar vários valores chave no trecho de código para o seu formulário específico: - Na **linha 12** e **linha 16**, localize o seletor CSS `#wpforms-form-1000` e substitua `1000` pelo ID real do seu formulário. - Na **linha 30**, no seletor jQuery `form#wpforms-form-1000`, substitua `1000` pelo ID do seu formulário mais uma vez. - Na **linha 33**, encontrará o caminho do URL de redirecionamento `/thank-you`. Atualize-o para corresponder ao caminho do URL real da sua página de Agradecimento. - Por exemplo, se chamou à sua página “Obrigado”, alteraria para `/obrigado`. ## Teste da sua Implementação Depois de adicionar e personalizar o trecho de código, é essencial testar exaustivamente a funcionalidade: - Comece por carregar o seu formulário pela primeira vez e verifique se o botão **Enviar** está oculto por defeito. - Em seguida, selecione **Não** no seu formulário e confirme que é imediatamente redirecionado para a sua página de Agradecimento. - Depois, teste o caminho “Sim” – selecione **Sim** e verifique se não só o botão de Envio aparece, mas também se todos os seus campos condicionalmente ocultos se tornam visíveis. - Finalmente, preencha e envie o formulário com **Sim** selecionado para garantir que todo o processo funciona como esperado. - ## Perguntas Frequentes #### P: Isto pode ser usado para um campo de Texto de Linha Única? R: Absolutamente! Aqui está um trecho de código que funciona com um campo de Texto de Linha Única. ``` /** * Ocultar condicionalmente o botão de envio * * @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/ */ add_action( 'wp_head', function () { ?> **Categorias:** Extensão **Etiquetas:** Javascript, JS, PHP ---