Resumo de IA
Anote o caminho do URL da página, pois precisará dele para o redirecionamento no nosso trecho de código.
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.
Configuração do 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 Escolha Múltipla que apresenta 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 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ários e campos.
Configurar a Lógica Condicional
Antes de adicionarmos o código para o botão Enviar, 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.
Criar a 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 Enviar, 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.
Tome nota do caminho do URL da página, pois precisará dele para o redirecionamento no nosso trecho de código.
Adicionar o Excerto 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 trecho usa primeiro CSS para ocultar o botão Enviar quando a página é carregada inicialmente. Em seguida, configura um ouvinte 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 Enviar 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 de forma segura.
Personalizar o Código
Precisará 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-1000e substitua1000pelo ID real 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, encontrará o caminho do URL de redirecionamento
/thank-you. Atualize isto para corresponder ao caminho real do URL da sua página de Agradecimento.- Por exemplo, se chamou à sua página “Obrigado”, alteraria para
/obrigado.
- Por exemplo, se chamou à sua página “Obrigado”, alteraria para
Testar a 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 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 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 funciona como esperado.
Perguntas Frequentes
P: Pode isto 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.
/**
* 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 de Seleção?
R: Sim, pode usar isto com campos de Seleção 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: Pode isto ser usado também para os Botões de Próxima e Página Anterior?
R: Para usar esta mesma funcionalidade para botões de Quebra de Página, basta alterar .wpforms-submit para button.wpforms-page-next. Assim, o trecho de código completo ficaria 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 do que uma pergunta de Sim ou Não, pode identificar o script especificando o ID do campo. Por exemplo, se tiver três campos de Escolha Múltipla numa página, o 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 );
O nosso ID de formulário é 1000 e o ID do campo de Escolha Múltipla que queremos usar 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 simplesmente 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 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: Precisa apenas de garantir que o 727 corresponde ao ID do seu 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 escolha para um campo?
R: Se tiver mais do que um campo que deseja comparar, basta usar o equivalente em PHP para o operador OU.
Este exemplo está a usar um formulário de reserva simples com o campo Checkbox para o utilizador selecionar a hora solicitada. Se o utilizador selecionar 8:00 – 9:00, 9:00 – 10:00 ou 10:00 – 11:00, será redirecionado para a página Obrigado, pois estes 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 );
Nota: Para saber mais sobre operadores de comparação PHP, consulte a documentação sobre este assunto aqui.
P: Poderia modificar isto para comparar duas datas?
R: Absolutamente! Vamos supor que tem dois campos de Data no seu site. A Data um seria a data da encomenda e a Data dois seria a data de levantamento. Mas não quer exibir o botão Submeter a menos que a Data dois seja maior que a Data um.
Lembre-se, para qualquer assistência 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 );
Cada referência a 1899 no snippet acima é o ID do meu formulário. O _32 e o _33 são os IDs dos campos para os 2 seletores de data no nosso formulário.
Terá de atualizar todos estes IDs para corresponderem aos seus próprios IDs de formulário e campo. Para obter assistência a encontrá-los, basta rever este tutorial.
P: Posso impedir o utilizador de continuar no formulário com base numa opção de dropdown?
R: Absolutamente. Para este exemplo, exibiremos os botões Seguinte e Anterior como esperado, mas se selecionarem Não no formulário, queremos desativar estes botões para não permitir que o utilizador 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 );
Nota: Ao usar este snippet, tenha em mente que o utilizador pode não entender porque o botão está desativado e isso pode causar confusão. Certifique-se de que o utilizador compreende o fluxo do seu formulário ao usar este snippet.
P: Como posso impedir o botão Submeter a menos que um campo Número seja maior ou igual a 3?
R: Ao analisar uma quantidade numérica, 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 );
Nota: Lembre-se de alterar o ID do formulário de 1000 para corresponder ao seu próprio ID de formulário e também alterar 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 Seguinte até que um determinado número de checkboxes sejam selecionados num formulário multi-etapas?
R: Pode ocultar o botão Seguinte 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 Seguinte 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 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 submissão? Dê uma vista de olhos ao nosso artigo sobre Como Alterar a Cor do Botão de Submissão.