Como Desabilitar 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 padrão, quando um formulário tem erros – seja um formulário de página única ou um com Quebras de Página – o WPForms rolará até o primeiro campo com erro.

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

Configurando Seu Formulário

Primeiro, você precisará criar seu formulário e adicionar seus campos. Se precisar de ajuda para criar um formulário, nosso guia sobre como criar seu primeiro formulário.

Desativando Efeitos de Rolagem

Você tem duas opções para desativar o efeito de rolagem: para um formulário específico ou para todos os formulários em seu site. Vamos ver ambos os métodos.

Para um Formulário Específico

Se você quiser desativar o efeito de rolagem apenas para um formulário, use este trecho de código. Se não tiver certeza de como adicionar código personalizado ao seu site, consulte 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 formulário. Se precisar de ajuda para encontrar o ID do seu formulário, confira nosso guia sobre como encontrar IDs de formulário e campo.

Para Todos os Formulários

Se você quiser que este código seja executado em todos os formulários, use 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é ele. Isso cria uma experiência de feedback mais instantânea para usuários que preferem navegação direta em vez de rolagem suave.

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

Ação de Referência

wpforms_wp_footer_end