Volete impedire a WPForms di scorrere automaticamente fino agli errori di validazione? Per impostazione predefinita, quando un modulo presenta degli errori - sia che si tratti di un modulo a pagina singola che di uno con interruzioni di pagina - WPForms scorre fino al primo campo di errore.
Questa guida vi mostrerà come disabilitare questo effetto di scorrimento fluido, facendo in modo che la pagina salti direttamente all'errore.
Impostazione del modulo
Per prima cosa, è necessario creare il modulo e aggiungere i campi. Se avete bisogno di aiuto per creare un modulo, consultate la nostra guida su come creare il vostro primo modulo.
Disabilitazione degli effetti di scorrimento
Avete due opzioni per disabilitare l'effetto di scorrimento: per un modulo specifico o per tutti i moduli del vostro sito. Vediamo entrambi i metodi.
Per un modulo specifico
Se si desidera disabilitare l'effetto di scorrimento per un solo modulo, utilizzare questo snippet di codice. Se non sapete come aggiungere codice personalizzato al vostro sito, consultate la nostra guida sull'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 );
Assicurarsi di sostituire 1000 nel codice con l'ID del proprio modulo. Se avete bisogno di aiuto per trovare l'ID del vostro modulo, consultate la nostra guida per trovare gli ID dei moduli e dei campi.
Per tutti i moduli
Se si desidera che questo codice venga eseguito su tutti i moduli, utilizzare invece questo frammento 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 l'aggiunta di uno dei due snippet, quando si verifica un errore di convalida durante l'invio del modulo, la pagina salta immediatamente al primo errore, invece di scorrere in modo fluido. In questo modo si crea un'esperienza di feedback più immediata per gli utenti che preferiscono la navigazione diretta allo scorrimento fluido.
Ed è tutto ciò di cui avete bisogno! Volete modificare la velocità di scorrimento durante la creazione di moduli multipagina? Consultate la nostra guida sulla modifica della velocità di scorrimento nei moduli a più pagine per maggiori dettagli.