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

Por defecto, WPForms no incluye un botón de reinicio. Si desea ofrecer a sus usuarios una manera de borrar todos los campos de entrada a la vez, en lugar de restablecer cada campo manualmente, puede agregar un botón personalizado "Borrar" usando JavaScript y CSS.

En este tutorial, le mostraremos cómo implementar un botón de reinicio en todo el formulario que funcione con todos los tipos de campo, incluidas las casillas de verificación y los botones de opción.

Una vez creado el formulario y añadidos los campos necesarios, añada el siguiente fragmento de código.

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

Estilo del botón Borrar

Puede aplicar el siguiente CSS para dar estilo al botón y que tenga un aspecto coherente con su 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

Tendrás que actualizar el ID del formulario tanto en JavaScript como en CSS:

• Sustituir 10 con su propio Formulario ID en:
  • línea 3: document.getElementById('wpforms-form-10')
  • wpforms-form-2927 .custom-clear-button

Para localizar sus ID de formulario y campo, consulte este tutorial.

Y ya está. Ahora ha agregado un botón Clear completamente funcional a su formulario WPForms