Aggiunta di un pulsante di cancellazione per resettare tutti i campi del modulo

Per impostazione predefinita, WPForms non include un pulsante di reset integrato. Se volete offrire ai vostri utenti un modo per cancellare tutti i campi di input in una volta sola, invece di resettare ogni campo manualmente, potete aggiungere un pulsante "Clear" personalizzato usando JavaScript e CSS.

In questo tutorial vi mostreremo come implementare un pulsante di reset per l'intero modulo che funzioni con tutti i tipi di campo, comprese le caselle di controllo e i pulsanti di opzione.

Dopo aver creato il modulo e aggiunto i campi necessari, aggiungere il seguente frammento di codice.

Questo frammento di codice aggiunge un pulsante "Cancella" sotto il modulo. Quando viene cliccato, ripristina tutti gli input al loro stato predefinito.

Stilizzazione del pulsante Clear

È possibile applicare il seguente CSS per dare uno stile al pulsante in modo che sia coerente con il 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

È necessario aggiornare l'ID del modulo in entrambi gli snippet JavaScript e CSS:

• Sostituire 10 con il proprio ID modulo in:
  • riga 3: document.getElementById('wpforms-form-10')
  • wpforms-form-2927 .custom-clear-button

Per individuare gli ID dei moduli e dei campi, consultare questa guida.

Ed ecco fatto! Ora avete aggiunto un pulsante Clear completamente funzionale al vostro modulo WPForms.