### [Aggiungere un pulsante di pulizia per reimpostare tutti i campi nel tuo modulo](https://wpforms.com/developers/adding-a-clear-button-to-reset-all-fields-in-your-form/) **Pubblicato:** 3 giugno 2025 **Autore:** Umair Majeed **Contenuto:** Per impostazione predefinita, WPForms non include un pulsante di reimpostazione integrato. Se desideri offrire ai tuoi utenti un modo per cancellare tutti i campi di input contemporaneamente, invece di reimpostare ogni campo manualmente, puoi aggiungere un pulsante personalizzato "Pulisci" utilizzando JavaScript e CSS. In questo tutorial, ti mostreremo come implementare un pulsante di reimpostazione per l'intero modulo che funziona con tutti i tipi di campo, inclusi checkbox e pulsanti radio. **Nota**: questo tutorial prevede l'aggiunta di PHP e JavaScript. Se hai bisogno di aiuto per aggiungere snippet al tuo sito, consulta questa [guida all'aggiunta di codice personalizzato per WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/). Dopo aver creato il tuo modulo e aggiunto i campi necessari, aggiungi il seguente snippet di codice. Questo snippet di codice aggiungerà un pulsante "Pulisci" sotto il tuo modulo. Quando viene cliccato, reimposterà tutti gli input al loro stato predefinito. ### Stile del pulsante di pulizia Puoi applicare il seguente CSS per stilizzare il pulsante in modo che sia coerente con il tuo tema. ``` #wpforms-form-10 .custom-clear-button { background-color: #4CAF50; /* Sfondo verde */ color: #ffffff; /* Testo bianco */ padding: 10px 20px; /* Spaziatura interna */ border: none; /* Nessun bordo */ border-radius: 3px; /* Angoli arrotondati */ cursor: pointer; /* Cursore puntatore al passaggio del mouse */ font-size: 16px; /* Dimensione del carattere */ font-weight: bold; /* Testo in grassetto */ text-transform: uppercase; /* Testo in maiuscolo */ transition: background-color 0.3s ease, transform 0.2s ease; /* Transizioni fluide */ } #wpforms-form-10 .custom-clear-button:hover { background-color: #286b2b; /* Verde più scuro al passaggio del mouse */ } ``` ## Personalizzazione dello snippet Dovrai aggiornare l'ID del modulo sia nello snippet JavaScript che in quello CSS: - Sostituisci `10` con il tuo **ID modulo** in: - **riga 3**: document.getElementById(‘wpforms-form-10’) - wpforms-form-2927 .custom-clear-button Per individuare gli ID dei tuoi moduli e campi, consulta [questo tutorial](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/). Ed ecco fatto! Hai ora aggiunto un pulsante Pulisci completamente funzionante al tuo modulo WPForms **Categorie:** Tutorial, Campi ---