### [Ajouter un bouton Effacer pour réinitialiser tous les champs de votre formulaire](https://wpforms.com/developers/adding-a-clear-button-to-reset-all-fields-in-your-form/) **Publié le :** 3 juin 2025 **Auteur :** Umair Majeed **Contenu :** Par défaut, WPForms n’inclut pas de bouton de réinitialisation intégré. Si vous souhaitez offrir à vos utilisateurs un moyen de vider tous les champs de saisie en une seule fois, au lieu de réinitialiser chaque champ manuellement, vous pouvez ajouter un bouton personnalisé « Effacer » à l’aide de JavaScript et de CSS. Dans ce tutoriel, nous vous montrerons comment implémenter un bouton de réinitialisation pour l’ensemble du formulaire qui fonctionne avec tous les types de champs, y compris les cases à cocher et les boutons radio. **Remarque :** Ce tutoriel implique l’ajout de PHP et de JavaScript. Si vous avez besoin d’aide pour ajouter des extraits de code à votre site, veuillez consulter ce [guide sur l’ajout de code personnalisé pour WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/). Après avoir créé votre formulaire et ajouté les champs nécessaires, ajoutez le fragment de code suivant. Ce fragment de code ajoutera un bouton « Effacer » sous votre formulaire. Lorsqu’il sera cliqué, il réinitialisera toutes les entrées à leur état par défaut. ### Styliser le bouton Effacer Vous pouvez appliquer le CSS suivant pour styliser le bouton afin qu’il corresponde à votre thème. ``` #wpforms-form-10 .custom-clear-button { background-color: #4CAF50; /* Fond vert */ color: #ffffff; /* Texte blanc */ padding: 10px 20px; /* Rembourrage */ border: none; /* Pas de bordure */ border-radius: 3px; /* Coins arrondis */ cursor: pointer; /* Curseur pointeur au survol */ font-size: 16px; /* Taille de la police */ font-weight: bold; /* Texte en gras */ text-transform: uppercase; /* Texte en majuscules */ transition: background-color 0.3s ease, transform 0.2s ease; /* Transitions fluides */ } #wpforms-form-10 .custom-clear-button:hover { background-color: #286b2b; /* Vert plus foncé au survol */ } ``` ## Personnaliser l’extrait Vous devrez mettre à jour l’ID du formulaire dans les extraits JavaScript et CSS : - Remplacez `10` par votre propre **ID de formulaire** dans : - **ligne 3** : document.getElementById(‘wpforms-form-10’) - wpforms-form-2927 .custom-clear-button Pour trouver les ID de vos formulaires et champs, consultez [ce tutoriel](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/). Et voilà ! Vous avez maintenant ajouté un bouton Effacer entièrement fonctionnel à votre formulaire WPForms **Catégories :** Tutoriels, Champs ---