Par défaut, WPForms n'inclut pas de bouton de réinitialisation. Si vous souhaitez offrir à vos utilisateurs un moyen d'effacer tous les champs de saisie en une seule fois, au lieu de réinitialiser chaque champ manuellement, vous pouvez ajouter un bouton "Clear" personnalisé en utilisant JavaScript et CSS.
Dans ce tutoriel, nous allons vous montrer comment mettre en place 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 ajoute un bouton "Effacer" sous votre formulaire. Lorsqu'il sera cliqué, il réinitialisera toutes les entrées à leur état par défaut.
Style du bouton Clear
Vous pouvez appliquer la feuille de style CSS suivante pour styliser le bouton de manière à ce qu'il soit cohérent avec 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 :
- Remplacer
10avec votre propre ID du formulaire en :- ligne 3: document.getElementById('wpforms-form-10')
- wpforms-form-2927 .custom-clear-button
Pour localiser vos identifiants de formulaire et de champ, consultez ce tutoriel.
Et c'est tout ! Vous avez maintenant ajouté un bouton Clear entièrement fonctionnel à votre formulaire WPForms.