Resumo de IA
Você gostaria de mostrar ou ocultar automaticamente o botão Enviar com base nas respostas dos campos do formulário? Com um simples trecho de código, você pode controlar a visibilidade do botão Enviar do seu formulário usando 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 Enviar.
Configurando o Formulário
Para começar, abra o construtor de formulários criando um novo formulário ou editando um existente.
Para este exemplo, criaremos um formulário de doação com um campo de Múltipla Escolha que exibe opções Sim/Não. Todos os outros campos adicionais no formulário serão revelados apenas se Sim for selecionado usando lógica condicional.
O botão Enviar aparecerá apenas quando Sim for selecionado, e os usuários serão redirecionados para uma página de Agradecimento se Não for selecionado.
Observação: Anote o ID do seu formulário, pois você precisará dele ao adicionar o trecho de código. Se precisar de ajuda para encontrar esses IDs, consulte nosso guia sobre como encontrar IDs de formulário e campo.
Configurando a Lógica Condicional
Antes de adicionar o código para o botão Enviar, precisamos configurar a lógica condicional para os outros campos do seu formulário. Esses campos devem permanecer ocultos até que o usuário selecione "Sim" no campo de Múltipla Escolha.
Para conseguir isso, abra as configurações de cada campo e configure a lógica condicional para mostrar o campo quando o seu campo de Múltipla Escolha for igual a Sim. Isso garante que esses campos permaneçam ocultos por padrão e apareçam apenas quando necessário.
Observação: Se precisar de ajuda para entender como a lógica condicional funciona no WPForms, consulte nosso guia detalhado sobre lógica condicional.
Criando a página de Agradecimento
Como nosso formulário oferece aos usuários uma escolha Sim/Não, queremos proporcionar uma boa experiência mesmo quando "Não" é selecionado. Em vez de apenas ocultar o botão Enviar, redirecionaremos os usuários para uma página de Agradecimento dedicada.
Para fazer isso, crie uma nova página no WordPress e nomeie-a Obrigado (ou qualquer outro nome que preferir). É para cá que os usuários que selecionarem "Não" serão redirecionados automaticamente.
Anote o caminho do URL da página, pois você precisará dele para o redirecionamento em nosso trecho de código.
Adicionando o Trecho de Código
O seguinte trecho de código controlará a visibilidade do seu botão Enviar com base nas respostas do formulário:
Este snippet primeiro usa CSS para ocultar o botão Enviar quando a página é carregada inicialmente. Em seguida, ele configura um listener de eventos JavaScript que monitora as alterações nas opções do campo de Múltipla Escolha do seu formulário.
Quando um usuário seleciona "Sim", o script adiciona uma classe CSS que torna o botão Enviar visível. Se eles selecionarem "Não", o script os redireciona automaticamente para sua página de Agradecimento.
Observação: Se precisar de ajuda para adicionar trechos de código ao seu site, consulte nosso tutorial sobre como adicionar trechos de código com segurança.
Personalizando o Código
Você precisará personalizar vários valores importantes no trecho de código para o seu formulário específico:
- Na linha 12 e linha 16, localize o seletor CSS
#wpforms-form-1000e substitua1000pelo ID do seu formulário. - Na linha 30, no seletor jQuery
form#wpforms-form-1000, substitua1000pelo ID do seu formulário mais uma vez. - Na linha 33, você encontrará o caminho da URL de redirecionamento
/thank-you. Atualize isso para corresponder ao caminho real da URL da sua página de agradecimento.- Por exemplo, se você nomeou sua página como “Obrigado”, você a alteraria para
/obrigado.
- Por exemplo, se você nomeou sua página como “Obrigado”, você a alteraria para
Testando Sua Implementação
Depois de adicionar e personalizar o trecho de código, é essencial testar completamente a funcionalidade:
- Comece carregando seu formulário pela primeira vez e verifique se o botão Enviar está oculto por padrão.
- Em seguida, selecione Não em seu formulário e confirme se você é redirecionado imediatamente para sua página de agradecimento.
- Em seguida, teste o caminho "Sim" – selecione Sim e verifique se não apenas o botão Enviar aparece, mas também se todos os seus campos ocultos condicionalmente se tornam visíveis.
- Finalmente, preencha e envie o formulário com Sim selecionado para garantir que todo o processo funcione como esperado.
Perguntas Frequentes
P: Isso pode ser usado para um campo de Texto de Linha Única?
R: Com certeza! Aqui está um trecho de código que funciona com um campo de Texto de Linha Única.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000.wpforms-submit {
visibility: hidden;
}
#wpforms-form-1000.wpforms-submit-container .wpforms-submit.show-submit {
visibility: visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect_text_area() {
?>
<script>
jQuery(function($){
// Form ID 1000 and Field ID 15
$( "#wpforms-1000-field_15" ).change(function(){
var inputvalue = $( "div#wpforms-1000-field_15-container input[type='text']" ).val();
var specificText ="Some Text Here"
if(inputvalue == specificText){
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect_text_area', 10 );
P: Posso usar este trecho para o campo Dropdown?
R: Sim, você pode usar isso com campos Dropdown usando o seguinte trecho de código:
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000.wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000.wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).on( 'change', function () {
var selectedval = $( "#wpforms-1000-field_15 option:selected" ).text();
if(selectedval == "First Choice"){
$( ".wpforms-submit" ).removeClass( "show-submit" );
}
else{
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
P: Isso também pode ser usado para os botões Próxima e Página Anterior?
R: Para usar essa mesma funcionalidade para botões de Quebra de Página, você só precisaria alterar .wpforms-submit para button.wpforms-page-next. Portanto, o trecho de código completo ficaria algo assim.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 button.wpforms-page-next {
visibility: hidden;
}
#wpforms-form-1000 button.wpforms-page-next.show-next {
visibility: visible;
}
</style>
<?php } );
// Conditional logic for Next button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($) {
$( "form#wpforms-form-1000" ).click(function() {
var selectedval = $( ".wpforms-form input[type='radio']:checked" ).val();
if (selectedval == "No") {
window.location = "/thank-you";
}
if (selectedval == "Yes") {
$( "button.wpforms-page-next" ).addClass( "show-next" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
P: E se eu tiver mais de um campo de Múltipla Escolha na página?
R: Se você tiver mais de uma pergunta Sim ou Não, pode identificar o script especificando o ID do campo. Por exemplo, se você tiver três campos de Múltipla Escolha em uma página, seu script ficaria assim.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).click(function(){
// Form ID 1000 and Field ID 15
var selectedval = $( "div#wpforms-1000-field_15-container input[type='radio']:checked" ).val();
if(selectedval == "Yes"){
window.location = "/thank-you";
}
if(selectedval == "No"){
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
Nosso ID de formulário é 1000 e o ID do campo de Múltipla Escolha que queremos usar em nosso código é 15. Portanto, estamos definindo uma variável para avaliar com $("div#wpforms-1000-field_15-container input[type='radio']:checked")
P: Posso simplesmente desabilitar o botão de envio até que todos os campos tenham um valor?
R: Sim, no entanto, ele não validará números de telefone, endereços de e-mail, etc. Este trecho apenas procurará qualquer valor antes de permitir que o botão de envio seja clicado.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
function wpf_dev_disable_submit_validation() {
?>
<script type="text/javascript">
jQuery(function () {
// Disable the submit button with the ID of #wpforms-submit-727, change the 727 to match your form ID
jQuery('#wpforms-submit-727').attr('disabled', true);
// Look and listen for any change on the form ID 727, change the 727 to match your form ID
jQuery('#wpforms-form-727').change(function () {
// List all field IDs in this section using the && to join them
if (jQuery('#wpforms-727-field_1').val() != '' &&
jQuery('#wpforms-727-field_2').val() != '' &&
jQuery('#wpforms-727-field_3').val() != '' &&
// Check for radio button (adjust field number as needed)
jQuery('input[name="wpforms[fields][4]"]:checked').val() &&
// Check for checkbox (adjust field number as needed)
jQuery('input[name="wpforms[fields][5][]"]:checked').length > 0) {
// If all of those field IDs have values, the submit button can be clicked
jQuery('#wpforms-submit-727').attr('disabled', false);
} else {
// Otherwise, the submit button for this form remains disabled
jQuery('#wpforms-submit-727').attr('disabled', true);
}
});
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_disable_submit_validation', 1);
Nota: Você só precisa garantir que o 727 corresponda ao ID do seu formulário e que você listou cada ID de campo neste formulário. Se precisar de ajuda para encontrar os números de ID do formulário ou do campo, consulte este tutorial.
P: E se eu quiser comparar mais de uma escolha para um campo?
R: Se você tiver mais de um campo que deseja comparar, basta usar o equivalente em PHP para o operador OU.
Este exemplo usa um formulário de reserva simples com o campo Checkbox para o usuário selecionar o horário solicitado. Se o usuário selecionar 8:00 – 9:00h, 9:00 – 10:00h ou 10:00 – 11:00h, ele será redirecionado para a página Obrigado, pois esses horários já estão ocupados.
/**
* Conditionally show the submit button
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).click(function(){
var selectedval = $( ".wpforms-form input[type='checkbox']:checked" ).val();
if ( selectedval == "8:00 - 9:00am" || selectedval == "9:00 - 10:00am" || selectedval == "10:00 - 11:00am" ) {
window.location = "/thank-you";
}
if ( selectedval == "11:00 - 12:00pm" || selectedval == "12:00 - 1:00pm" || selectedval == "1:00 - 2:00pm" ) {
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
Observação: Para saber mais sobre operadores de comparação PHP, consulte a documentação deles sobre este assunto aqui.
P: Eu poderia modificar isso para comparar duas datas?
R: Com certeza! Vamos supor que você tenha dois campos de Data em seu site. A data um seria a data do pedido e a data dois seria a data de retirada. Mas você não quer exibir o botão Enviar a menos que a data dois seja maior que a data um.
Lembre-se, para qualquer ajuda sobre como adicionar snippets, confira este tutorial.
/**
* Conditionally show the submit button if date 2 is greater than date 1
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1899 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1899 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_compare_two_dates() {
?>
<script>
jQuery(function($){
// Only fire this script when date 2 has been selected
document.querySelector( "#wpforms-1899-field_33-container" ).onchange = function() {
// Set the first date picker variable
var oneDate = $( "input#wpforms-1899-field_32" ).val();
// Set the second date picker variable
var twoDate = $( "input#wpforms-1899-field_33" ).val();
// Now compare the 2 dates, show a message and keep the Submit button hidden
// if date 2 is less than date 1
if(twoDate < oneDate){
alert( "Please make sure that the pickup date is after the dropoff date" );
e.preventDefault();
e.stopPropagation();
}
else {
// since date 2 is greater than date 1, go ahead and show the submit button
$( ".wpforms-submit" ).addClass( "show-submit" );
}
}
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_compare_two_dates', 10 );
Cada referência a 1899 no snippet acima é o ID do meu formulário. Os _32 e _33 são os IDs dos campos para os 2 seletores de data em nosso formulário.
Você precisará atualizar todos esses IDs para corresponder aos seus próprios IDs de formulário e campo. Para obter ajuda para encontrá-los, basta revisar este tutorial.
P: Posso impedir que o usuário continue no formulário com base em uma opção de dropdown?
R: Com certeza. Para este exemplo, exibiremos os botões Próximo e Anterior como esperado, mas se eles selecionarem Não no formulário, queremos desabilitar esses botões para não permitir que o usuário continue no formulário.
/**
* Conditionally show the Next button based on dropdown choice
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
function wpf_dev_conditional_next_page() {
?>
<script>
jQuery(function($){
// Only run this on the form ID 727
$( "form#wpforms-form-727" ).on( 'change', function () {
// Look at the field ID 9 which is a dropdown to see what the user selected
var selectedval = $( "#wpforms-727-field_9 option:selected" ).text();
// If the user selects no from the dropdown, disable the Next button
if(selectedval == "No"){
$( ".wpforms-page-next" ).attr({disabled: "true"});
}
else {
// Otherwise, the next button for this form remains disabled
$( '.wpforms-page-next' ).attr('disabled', false);
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_conditional_next_page', 10 );
Observação: Ao usar este snippet, tenha em mente que o usuário pode não entender por que o botão está desabilitado e isso pode causar confusão. Certifique-se de que o usuário entenda o fluxo do seu formulário ao usar este snippet.
P: Como posso impedir o botão Enviar a menos que um campo Número seja maior ou igual a 3?
R: Ao analisar uma quantidade numérica, você pode usar este snippet.
/**
* Check if amount entered on field ID 15 is greater than or equal to 3
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide submit button on page load */
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1000 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
?>
<script>
jQuery(function($){
$( "form#wpforms-form-1000" ).click(function(){
// Form ID 1000 and Field ID 15
var selectedval = $( "div#wpforms-1000-field_15-container input[type='number']" ).val();
if(selectedval <= "2"){
$( ".wpforms-submit" ).removeClass( "show-submit" );
}
if(selectedval >= "3"){
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
Observação: Lembre-se de alterar o ID do formulário de 1000 para corresponder ao seu próprio ID de formulário e também altere o ID do campo _15 para corresponder ao ID do campo do seu campo de formulário Número.
P: Como posso ocultar o botão Próximo até que um certo número de checkboxes sejam selecionados em um formulário de várias etapas?
R: Você pode ocultar o botão Próximo até que um número específico de checkboxes sejam selecionados usando uma combinação de CSS e JavaScript. Aqui está um exemplo que oculta o botão Próximo até que pelo menos 2 checkboxes sejam selecionados:
/**
* Hide Next button until multiple checkboxes are selected
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button
*/
add_action( 'wp_head', function () { ?>
<style>
/* CSS hide next button on page load for specific form and page */
#wpforms-form-35864 .wpforms-page-next[data-page="4"] {
visibility: hidden;
}
#wpforms-form-35864 .wpforms-page-next[data-page="4"].show-next {
visibility: visible;
}
</style>
<?php } );
function wpf_dev_form_conditional_next() {
?>
<script type="text/javascript">
jQuery(function($) {
// Function to check the number of selected checkboxes
function checkCheckboxes() {
var minSelection = $('#wpforms-35864-field_33-container input[type=checkbox]:checked').length;
if (minSelection >= 2) {
$("button.wpforms-page-next").addClass("show-next");
} else {
$("button.wpforms-page-next").removeClass("show-next");
}
}
// Check the checkboxes on form load and when any checkbox is clicked
checkCheckboxes();
$('#wpforms-35864-field_33-container input[type=checkbox]').on('change', function() {
checkCheckboxes();
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_conditional_next', 10 );
E é tudo o que você precisa para mostrar condicionalmente o botão de envio em seu formulário! Gostaria de saber mais sobre como alterar a cor do botão de envio? Dê uma olhada em nosso artigo sobre Como Alterar a Cor do Botão de Envio.