Come cambiare l'icona di pre-caricamento all'invio

Introduzione

Vuoi cambiare l'icona del pre-loader sui tuoi WPForms? Esiste un'icona di pre-caricamento predefinita utilizzata su tutti i WPForms quando l'impostazione Abilita invio modulo AJAX è abilitata sul tuo modulo. Se desideri personalizzare questa icona con la tua, dovrai aggiungere un piccolo snippet PHP per farlo. In questo tutorial, ti mostreremo come ottenere questo risultato.

Creazione del modulo

Innanzitutto, inizieremo creando il nostro modulo e aggiungendo i nostri campi.

Abilitazione AJAX nelle impostazioni del modulo

Successivamente, dovrai assicurarti di abilitare AJAX. Per fare ciò, fai clic su Impostazioni e su Generale fai clic su Avanzate per aprire le opzioni avanzate e attiva Abilita invio modulo AJAX per abilitare AJAX.

Aggiunta dello snippet

Successivamente, dovrai copiare e incollare questo snippet sul tuo sito. Se hai bisogno di aiuto su come aggiungere snippet al tuo sito, consulta questo tutorial

/**
 * Change the pre-loader icon
 *
 * @link https://wpforms.com/developers/how-to-change-the-pre-loader-icon-on-submit/
 */
 
function custom_wpforms_display_submit_spinner_src( $src, $form_data ) {
 
    // Enter the URL to the loading image in between the single quotes
    return 'http://yoursite.com/your-image.svg';

}

add_filter( 'wpforms_display_submit_spinner_src', 'custom_wpforms_display_submit_spinner_src', 10, 2 );

L'aggiunta di questo snippet cambierà l'URL di dove trovare l'icona di caricamento.

E questo è tutto! Hai cambiato con successo l'icona. Vuoi imparare come posizionare la Descrizione del campo sopra il campo del modulo? Dai un'occhiata all'articolo su Come posizionare la descrizione del campo sopra il campo del modulo.

Correlati

Riferimento filtro: wpforms_display_submit_spinner_src