Aggiunta di un pulsante Cancella per reimpostare tutti i campi nel tuo modulo

Per impostazione predefinita, WPForms non include un pulsante di reset integrato. Se desideri offrire ai tuoi utenti la possibilità di cancellare tutti i campi di input contemporaneamente, invece di resettare ogni campo manualmente, puoi aggiungere un pulsante personalizzato “Cancella” utilizzando JavaScript e CSS.

In questo tutorial, ti mostreremo come implementare un pulsante di reset per l'intero modulo che funziona con tutti i tipi di campo, inclusi checkbox e pulsanti radio.

Dopo aver creato il tuo modulo e aggiunto i campi necessari, aggiungi il seguente snippet di codice.

Questo snippet di codice aggiungerà un pulsante “Cancella” sotto il tuo modulo. Quando cliccato, reimposterà tutti gli input al loro stato predefinito.

Styling del pulsante Cancella

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; /* 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 */
}

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 del tuo modulo e dei tuoi campi, consulta questo tutorial.

E questo è tutto! Ora hai aggiunto un pulsante Cancella completamente funzionante al tuo modulo WPForms