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, é possível controlar a visibilidade do botão Enviar do seu formulário usando lógica condicional.
Este guia mostra como adicionar um snippet de código e configurar a lógica condicional para controlar a visibilidade do seu botão Enviar.
Configurar o formulário
Para começar, abra o criador de formulários criando um novo formulário ou editando um já existente.
Para este exemplo, vamos criar um formulário de donativo com um campo de Escolha múltipla que mostra opções Sim/Não. Todos os outros campos adicionais do formulário só serão revelados se for selecionado Sim utilizando a lógica condicional.
O botão Enviar só aparecerá se for selecionado Sim e os utilizadores serão redireccionados para uma página de agradecimento se for selecionado Não.
Nota: Tome nota do ID do seu formulário, uma vez que irá precisar dele quando adicionar o snippet de código. Se precisar de ajuda para encontrar estes IDs, consulte o nosso guia sobre como encontrar IDs de formulários e campos.
Definição da lógica condicional
Antes de adicionarmos o código para o botão Submeter, 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 o conseguir, abra as definições de cada campo e configure a lógica condicional para mostrar o campo quando o campo de Escolha múltipla for igual a Sim. Isto assegura que estes campos permanecem ocultos por predefinição e só aparecem quando necessário.
Nota: Se precisar de ajuda para entender como a lógica condicional funciona no WPForms, consulte o nosso guia detalhado sobre lógica condicional.
Criar a página de agradecimento
Uma vez que o nosso formulário oferece aos utilizadores uma opção Sim/Não, queremos proporcionar uma boa experiência mesmo quando é selecionado "Não". Em vez de ocultar apenas o botão Enviar, redireccionaremos os utilizadores para uma página de agradecimento dedicada.
Para o fazer, crie uma nova página no WordPress e dê-lhe o nome de Obrigado (ou qualquer outro nome que prefira). É para esta página que os utilizadores que seleccionarem "Não" serão automaticamente redireccionados.
Tome nota do caminho do URL da página, uma vez que vai precisar dele para o redireccionamento no nosso fragmento de código.
Adicionar o snippet 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 ouvinte de eventos JavaScript que observa as alterações nas opções do campo Múltipla escolha do formulário.
Quando um utilizador seleciona "Sim", o script adiciona uma classe CSS que torna visível o botão Submeter. Se o utilizador selecionar "Não", o script redirecciona-o 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 com segurança.
Personalização do código
Terá de personalizar vários valores-chave no snippet de código para o seu formulário específico:
- Em linha 12 e linha 16, localize o seletor CSS
#wpforms-form-1000e substituir1000com o seu ID de formulário atual. - Em linha 30, no seletor jQuery
form#wpforms-form-1000, substituir1000com o seu ID de formulário mais uma vez. - Em linha 33, encontrará o caminho do URL de redireccionamento
/thank-you. Actualize isto para corresponder ao caminho URL real da sua página de agradecimento.- Por exemplo, se o nome da sua página for "Obrigado", altere-o para
/thanks.
- Por exemplo, se o nome da sua página for "Obrigado", altere-o para
Testar a sua implementação
Depois de adicionar e personalizar o snippet de código, é essencial testar exaustivamente a funcionalidade:
- Comece por carregar o seu formulário e verifique se o botão Enviar está oculto por predefinição.
- Em seguida, selecione Não no seu formulário e confirme que é imediatamente redireccionado para a sua página de agradecimento.
- Em seguida, teste o caminho "Sim" - selecione Sim e verifique não só se o botão Submeter aparece, mas também se todos os seus campos condicionalmente ocultos se tornam visíveis.
- Por fim, preencha e envie o formulário com Sim selecionado para garantir que todo o processo funciona como esperado.
Perguntas mais frequentes
P: Isto pode ser utilizado para 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 utilizar este snippet para o campo Dropdown?
R: Sim, pode utilizá-lo com campos suspensos utilizando o seguinte fragmento 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: Isto também pode ser utilizado para os botões de quebra de página seguinte e anterior?
R: Para utilizar esta mesma funcionalidade para botões de quebra de página, basta alterar o .wpforms-submit para button.wpforms-page-next. Portanto, o trecho de código completo seria algo como 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 do que um campo de Escolha Múltipla na página?
R: Se tiver mais de uma pergunta Sim ou Não, pode identificar o script especificando o ID do campo. Por exemplo, se tiver três campos de Múltipla escolha numa página, o script terá o seguinte aspeto.
/**
* 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 );
O nosso ID de formulário é 1000 e o ID do Escolha múltipla que queremos utilizar no nosso código é 15. Portanto, estamos a definir uma variável para avaliar com $("div#wpforms-1000-field_15-container input[type='radio']:checked")
P: Posso desativar o botão de envio até que todos os campos tenham um valor?
R: Sim, no entanto, não validará números de telefone, endereços de email, etc. Este snippet só 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: Só precisa de se certificar de que o 727 corresponde ao seu ID de formulário e que 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 do que uma opção para um campo?
R: Se tiver mais do que um campo que pretende comparar, basta utilizar o equivalente em PHP para o operador OR.
Este exemplo utiliza um formulário de reserva simples com o campo Caixa de verificação para o utilizador selecionar a hora pretendida. Se o utilizador selecionar 8:00 - 9:00am, 9:00 - 10:00am ou 10:00 - 11:00am, será redireccionado para a página de agradecimento, uma vez que estas faixas horárias já estão ocupadas.
/**
* 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 );
Nota: Para saber mais sobre os operadores de comparação do PHP, consulte a documentação sobre este assunto aqui.
P: Posso modificar isto para comparar duas datas?
R: Sem dúvida! Digamos que tem dois campos Date no seu site. A data um seria a data da encomenda e a data dois seria a data de recolha. 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 );
Todas as referências a 1899 no snippet acima são o ID do meu formulário. Os campos _32 e _33 são os IDs dos 2 selectores de data do nosso formulário.
Terá de atualizar todos estes IDs para corresponderem aos seus próprios IDs de formulário e de campo. Para obter ajuda para encontrá-los, basta rever este tutorial.
P: Posso impedir que o utilizador continue a preencher o formulário com base numa opção pendente?
R: Sem dúvida. Para este exemplo, vamos apresentar os botões Seguinte e Anterior como esperado, mas se seleccionarem Não no formulário, queremos desativar estes botões para não permitir que o utilizador 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 );
Nota: Quando utilizar este snippet, tenha em conta que o utilizador pode não compreender porque é que o botão está desativado e pode causar confusão. Certifique-se de que o utilizador compreende o fluxo do seu formulário quando utilizar este snippet.
P: Como é que posso impedir o botão Submeter a menos que um campo Número seja maior ou igual a 3?
R: Ao analisar um valor numérico, pode utilizar este excerto.
/**
* 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 );
Nota: Não se esqueça de alterar o ID do formulário de 1000 para corresponder ao seu próprio ID do 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 Seguinte até que um determinado número de caixas de verificação seja selecionado num formulário de várias etapas?
R: Pode ocultar o botão Seguinte até que um número específico de caixas de verificação seja selecionado utilizando uma combinação de CSS e JavaScript. Aqui está um exemplo que oculta o botão Seguinte até que pelo menos 2 caixas de verificação sejam selecionadas:
/**
* 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 precisa para mostrar condicionalmente o botão de submissão no seu formulário! Gostaria de saber mais sobre como alterar a cor do botão de envio? Dê uma olhada no nosso artigo sobre Como alterar a cor do botão Enviar.