Comment modifier l'icône de pré-chargement lors de la soumission

Introduction

Souhaitez-vous modifier l’icône de préchargement sur vos formulaires WPForms ? Il existe une icône de préchargement par défaut utilisée sur tous les formulaires WPForms lorsque le paramètre Activer la soumission de formulaire AJAX est activé sur votre formulaire. Si vous souhaitez personnaliser cette icône avec la vôtre, vous devrez ajouter un petit extrait de code PHP pour ce faire. Dans ce tutoriel, nous vous montrerons comment y parvenir.

Création du formulaire

Tout d’abord, nous commencerons par créer notre formulaire et ajouter nos champs.

Activation d’AJAX dans les paramètres du formulaire

Ensuite, vous devrez vous assurer que vous activez AJAX. Pour ce faire, cliquez sur Paramètres, puis sur Général, cliquez sur Avancé pour ouvrir les options avancées et activez l’option Activer la soumission de formulaire AJAX pour activer AJAX.

Ajout du snippet

Ensuite, vous devrez copier et coller cet extrait de code sur votre site. Si vous avez besoin d’aide pour ajouter des extraits de code à votre site, veuillez consulter ce tutoriel

/**
 * 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’ajout de cet extrait de code modifiera l’URL où trouver l’icône de chargement.

Et voilà ! Vous avez réussi à changer l’icône. Souhaitez-vous apprendre à positionner la Description du champ au-dessus du champ du formulaire ? Consultez l’article sur Comment positionner la description du champ au-dessus du champ du formulaire.

Articles associés

Référence de filtre : wpforms_display_submit_spinner_src