Añadir un botón de Borrar para restablecer todos los campos de tu formulario

Por defecto, WPForms no incluye un botón de restablecimiento integrado. Si deseas ofrecer a tus usuarios una forma de borrar todos los campos de entrada a la vez, en lugar de restablecer cada campo manualmente, puedes añadir un botón personalizado de "Borrar" usando JavaScript y CSS.

En este tutorial, te mostraremos cómo implementar un botón de restablecimiento para todo el formulario que funcione con todos los tipos de campos, incluyendo casillas de verificación y botones de radio.

Después de haber creado tu formulario y añadido los campos necesarios, añade el siguiente fragmento de código.

Este fragmento de código añadirá un botón de "Borrar" debajo de tu formulario. Al hacer clic, restablecerá todas las entradas a su estado predeterminado.

Estilizando el botón de Borrar

Puedes aplicar el siguiente CSS para estilizar el botón de modo que sea coherente con tu 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 */
}

Personalización del fragmento

Necesitarás actualizar el ID del formulario tanto en el fragmento de JavaScript como en el de CSS:

• Reemplaza 10 con tu propio ID de formulario en:
  • línea 3: document.getElementById(‘wpforms-form-10’)
  • wpforms-form-2927 .custom-clear-button

Para localizar los IDs de tu formulario y campos, consulta este tutorial.

¡Y eso es todo! Ahora has añadido un botón de Borrar totalmente funcional a tu formulario WPForms