Como Desativar o Efeito de Rolagem em Erros de Validação de Campo

Gostaria de impedir que o WPForms role automaticamente para os erros de validação? Por defeito, quando um formulário tem erros – seja um formulário de página única ou um com Quebras de Página – o WPForms irá rolar para o primeiro campo de erro.

Este guia irá mostrar-lhe como desativar este efeito de rolagem suave, fazendo com que a página salte diretamente para o erro em vez disso.

Configurar o Seu Formulário

Primeiro, terá de criar o seu formulário e adicionar os seus campos. Se precisar de ajuda para criar um formulário, consulte o nosso guia sobre como criar o seu primeiro formulário.

Desativar Efeitos de Rolagem

Tem duas opções para desativar o efeito de rolagem: ou para um formulário específico ou para todos os formulários no seu site. Vamos analisar ambos os métodos.

Para um Formulário Específico

Se quiser desativar o efeito de rolagem apenas para um formulário, utilize este trecho de código. Se não tiver a certeza de como adicionar código personalizado ao seu site, consulte o nosso guia sobre como adicionar trechos de código.

/** Disable the scroll on field validation errors
 *
 *  @link   https://wpforms.com/developers/how-to-disable-the-scrolling-effect-on-field-validation/
 */
 
function wpf_dev_disable_scroll_to_error_by_form_id( $forms ) {
     
    // If scrollToError is disabled for at least one form on the page, it will be disabled for all the forms on the page.
 
    foreach ( $forms as $form ) {
 
        // Only run snippet on the form ID 1000
        if ( isset( $form[ 'id' ] ) && (int) $form[ 'id' ] === 1000 ) {
    ?>
 
            <script type="text/javascript">wpforms.scrollToError = function(){};</script>
 
    <?php
        }
    }
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_scroll_to_error_by_form_id', 10, 1 );

Certifique-se de substituir 1000 no código pelo ID do seu próprio formulário. Se precisar de ajuda para encontrar o ID do seu formulário, consulte o nosso guia sobre como encontrar IDs de formulários e campos.

Para Todos os Formulários

Se desejar que este código seja executado em todos os formulários, utilize este trecho mais simples em vez disso.

/** Disable the scrolling effect on field validation errors
 *
 *  @link   https://wpforms.com/developers/how-to-disable-the-scrolling-effect-on-field-validation/
 */
 
function wpf_dev_disable_scroll_to_error() {
 
    // If scrollToError is disabled for at least one form on the page, it will be disabled for all the forms on the page.
    ?>
 
    <script type="text/javascript">wpforms.scrollToError = function(){};</script>
 
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_scroll_to_error', 10 );

Após adicionar qualquer um dos trechos, quando ocorrer um erro de validação durante o envio do formulário, a página saltará imediatamente para o primeiro erro em vez de rolar suavemente até lá. Isto cria uma experiência de feedback mais instantânea para os utilizadores que preferem navegação direta em vez de rolagem suave.

E é tudo o que precisa! Gostaria de alterar a velocidade da rolagem ao criar formulários de várias páginas? Consulte o nosso guia sobre alterar a velocidade de rolagem em formulários de várias páginas para mais detalhes.

Ação de Referência

wpforms_wp_footer_end