### [Añadir un botón de borrado para restablecer todos los campos de tu formulario](https://wpforms.com/developers/adding-a-clear-button-to-reset-all-fields-in-your-form/) **Publicado:** 3 de junio de 2025 **Autor:** Umair Majeed **Contenido:** Por defecto, WPForms no incluye un botón de borrado 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 borrado para todo el formulario que funciona con todos los tipos de campos, incluyendo casillas de verificación y botones de radio. **Nota**: Este tutorial implica añadir tanto PHP como JavaScript. Si necesitas ayuda para añadir fragmentos a tu sitio, por favor revisa esta [guía sobre cómo añadir código personalizado para WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/). 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 borrado 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; /* Fondo verde */ color: #ffffff; /* Texto blanco */ padding: 10px 20px; /* Relleno */ border: none; /* Sin borde */ border-radius: 3px; /* Esquinas redondeadas */ cursor: pointer; /* Cursor de puntero al pasar el ratón */ font-size: 16px; /* Tamaño de fuente */ font-weight: bold; /* Texto en negrita */ text-transform: uppercase; /* Texto en mayúsculas */ transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */ } #wpforms-form-10 .custom-clear-button:hover { background-color: #286b2b; /* Verde más oscuro al pasar el ratón */ } ``` ## Personalizando el 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](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/). ¡Y eso es todo! Ahora has añadido un botón de borrado totalmente funcional a tu formulario de WPForms **Categorías:** Tutoriales, Campos ---