Ajouter un bouton Effacer pour réinitialiser tous les champs de votre formulaire

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.

Après avoir créé votre formulaire et ajouté les champs nécessaires, ajoutez l'extrait de code suivant.

Cet extrait de code ajoutera un bouton « Effacer » sous votre formulaire. Lorsqu'il est 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; /* Green background */
    color: #ffffff; /* White text */
    padding: 10px 20px; /* Padding */
    border: none; /* No border */
    border-radius: 3px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 16px; /* Font size */
    font-weight: bold; /* Bold text */
    text-transform: uppercase; /* Uppercase text */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}
#wpforms-form-10 .custom-clear-button:hover {
    background-color: #286b2b; /* Darker green on hover */
}

Personnalisation de 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.

Et voilà ! Vous avez maintenant ajouté un bouton Effacer entièrement fonctionnel à votre formulaire WPForms