Você gostaria de mostrar ou ocultar automaticamente o botão Enviar com base nas respostas do campo do formulário? Com um simples trecho de código, você pode controlar a visibilidade do botão Enviar do seu formulário usando 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 botão Enviar.
Configuração do formulário
Para começar, abra o construtor de formulários criando um novo formulário ou editando um já existente.
Para este exemplo, criaremos um formulário de doação com um campo de múltipla escolha que mostra as opções Sim/Não. Todos os outros campos adicionais no formulário serão revelados somente se Yes for selecionado usando a lógica condicional.
O botão Enviar será exibido somente 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ários e campos.
Configuração da lógica condicional
Antes de adicionarmos o código para o botão Enviar, precisamos configurar a lógica condicional para os outros campos do formulário. Esses campos devem permanecer ocultos até que o usuário selecione "Yes" (Sim) no campo Multiple Choice (Múltipla escolha).
Para isso, abra as configurações de cada campo e configure a lógica condicional para mostrar o campo quando o campo Múltipla escolha for igual a Sim. Isso garante que esses campos permaneçam ocultos por padrão e só apareçam 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.
Criação da página de agradecimento
Como nosso formulário oferece aos usuários uma opção Sim/Não, queremos proporcionar uma boa experiência mesmo quando a opção "Não" for selecionada. Em vez de apenas ocultar o botão Enviar, redirecionaremos os usuários para uma página dedicada de agradecimento.
Para fazer isso, crie uma nova página no WordPress e chame-a de Thank You (ou qualquer outro nome que você preferir). É para ela 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 snippet de código.
Adição do snippet de código
O trecho de código a seguir controlará a visibilidade do botão Enviar com base nas respostas do formulário:
Esse snippet primeiro usa CSS para ocultar o botão Enviar quando a página é carregada inicialmente. Em seguida, ele configura um ouvinte de eventos JavaScript que observa as alterações nas opções do campo Múltipla escolha do formulário.
Quando um usuário seleciona "Yes" (Sim), o script adiciona uma classe CSS que torna visível o botão Submit (Enviar). Se o usuário selecionar "No" (Não), o script o redirecionará 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.
Personalização do código
Você precisará personalizar vários valores-chave no snippet de código para seu formulário específico:
- Em linha 12 e linha 16, localize o seletor CSS
#wpforms-form-1000e substituir1000com seu ID de formulário real. - Em linha 30no seletor jQuery
form#wpforms-form-1000, substitua1000com seu ID de formulário mais uma vez. - Em linha 33você encontrará o caminho do URL de redirecionamento
/thank-you. Atualize isso para corresponder ao caminho real do URL de sua página de agradecimento.- Por exemplo, se você nomeou sua página como "Thanks" (Obrigado), você a alteraria para
/thanks.
- Por exemplo, se você nomeou sua página como "Thanks" (Obrigado), você a alteraria para
Teste de sua implementação
Depois de adicionar e personalizar o snippet de código, é essencial testar completamente a funcionalidade:
- Comece carregando seu formulário novo e verifique se o botão Submit está oculto por padrão.
- Em seguida, selecione No (Não ) em seu formulário e confirme que você será imediatamente redirecionado para a página de agradecimento.
- Em seguida, teste o caminho "Yes" (Sim) - selecione Yes (Sim ) e verifique se não apenas o botão Submit (Enviar) é exibido, mas também se todos os campos ocultos condicionalmente ficam visíveis.
- Por fim, preencha e envie o formulário com a opção Sim selecionada para garantir que todo o processo funcione conforme o esperado.
Perguntas frequentes
P: Isso pode ser usado em um campo de texto de linha única?
R: Sem dúvida! 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 esse snippet para o campo Dropdown?
R: Sim, você pode usar isso com campos suspensos 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 de quebra de página seguinte e anterior?
R: Para usar essa mesma funcionalidade para botões de quebra de página, você só precisaria alterar o .wpforms-submit para button.wpforms-page-next. Portanto, o trecho de código completo seria algo parecido com isto.
/**
* 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 Yes ou No, poderá identificar o script especificando o ID do campo. Por exemplo, se você tiver três campos de múltipla escolha em uma página, o script terá a seguinte aparência.
/**
* 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 a ID do 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 desativar o botão Enviar 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. Esse snippet só procurará por qualquer valor antes de permitir que o botão enviar 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);
Observação: Você só precisa se certificar de que o 727 corresponde ao ID do formulário e que você listou cada ID de campo nesse 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 opção para um campo?
R: Se você tiver mais de um campo que deseja comparar, basta usar o equivalente em PHP para o operador OR.
Este exemplo usa um formulário de reserva simples com o campo Caixa de seleção para que o usuário selecione o horário solicitado. Se o usuário selecionar 8:00 - 9:00am, 9:00 - 10:00am ou 10:00 - 11:00am, ele será redirecionado para a página de agradecimento, 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 os operadores de comparação do PHP, consulte a documentação sobre esse assunto aqui.
P: Posso modificar isso para comparar duas datas?
R: Sem dúvida! Digamos que você tenha dois campos Date em seu site. A data um seria a data do pedido e a data dois seria a data da 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 de que, para obter ajuda sobre como adicionar snippets, consulte 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 );
Toda referência a 1899 no trecho acima é o ID do meu formulário. O _32 e o _33 são os IDs de campo para os dois selecionadores de data em nosso formulário.
Você precisará atualizar todos esses IDs para que correspondam 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 usando o formulário com base em uma opção suspensa?
R: Sem dúvida. Neste exemplo, exibiremos os botões Next (Próximo) e Previous (Anterior) conforme o esperado, mas se o usuário selecionar No (Não) no formulário, queremos desativar esses botões para não permitir que o usuário continue com o 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 esse snippet, lembre-se de que o usuário pode não entender por que o botão está desativado e pode causar confusão. Certifique-se de que o usuário entenda o fluxo do seu formulário ao usar esse 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 um valor numérico, você poderia usar este trecho.
/**
* 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 ID do seu próprio formulário e também de alterar o ID do campo _15 para corresponder ao ID do campo do formulário Número.
P: Como posso ocultar o botão Next até que um determinado número de caixas de seleção seja selecionado em um formulário de várias etapas?
R: Você pode ocultar o botão Next até que um número específico de caixas de seleção seja marcado usando uma combinação de CSS e JavaScript. Aqui está um exemplo que oculta o botão Next até que pelo menos duas caixas de seleção sejam marcadas:
/**
* 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 isso é 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 Enviar? Dê uma olhada em nosso artigo sobre Como alterar a cor do botão Enviar.