Come disabilitare l'effetto di scorrimento sugli errori di validazione dei campi

Desideri impedire a WPForms di scorrere automaticamente verso gli errori di convalida? Per impostazione predefinita, quando un modulo presenta errori – sia esso un modulo a pagina singola o uno con interruzioni di pagina – WPForms scorrerà fino al primo campo con errore.

Questa guida ti mostrerà come disabilitare questo effetto di scorrimento fluido, facendo invece saltare la pagina direttamente all'errore.

Configurazione del tuo modulo

Innanzitutto, dovrai creare il tuo modulo e aggiungere i tuoi campi. Se hai bisogno di aiuto per creare un modulo, consulta la nostra guida su come creare il tuo primo modulo.

Disabilitare gli effetti di scorrimento

Hai due opzioni per disabilitare l'effetto di scorrimento: o per un modulo specifico o per tutti i moduli sul tuo sito. Diamo un'occhiata a entrambi i metodi.

Per un modulo specifico

Se desideri disabilitare l'effetto di scorrimento solo per un modulo, utilizza questo snippet di codice. Se non sei sicuro di come aggiungere codice personalizzato al tuo sito, consulta la nostra guida all'aggiunta di snippet di codice.

/** 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 );

Assicurati di sostituire 1000 nel codice con l'ID del tuo modulo. Se hai bisogno di aiuto per trovare l'ID del tuo modulo, consulta la nostra guida per trovare gli ID dei moduli e dei campi.

Per tutti i moduli

Se desideri che questo codice venga eseguito su tutti i moduli, utilizza invece questo snippet più semplice.

/** 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 );

Dopo aver aggiunto uno degli snippet, quando si verifica un errore di convalida durante l'invio del modulo, la pagina salterà immediatamente al primo errore invece di scorrere fluidamente. Ciò crea un'esperienza di feedback più immediata per gli utenti che preferiscono la navigazione diretta allo scorrimento fluido.

E questo è tutto ciò di cui hai bisogno! Desideri modificare la velocità di scorrimento durante la creazione di moduli multipagina? Consulta la nostra guida su come modificare la velocità di scorrimento sui moduli multipagina per maggiori dettagli.

Azione di riferimento

wpforms_wp_footer_end