### [Adding a Clear Button to Reset All Fields in Your Form](https://wpforms.com/developers/adding-a-clear-button-to-reset-all-fields-in-your-form/) **Published:** June 3, 2025 **Author:** Umair Majeed **Content:** By default, WPForms doesn’t include a built-in reset button. If you’d like to offer your users a way to clear all input fields at once, instead of resetting each field manually, you can add a custom “Clear” button using JavaScript and CSS. In this tutorial, we’ll show you how to implement a form-wide reset button that works with all field types including checkboxes and radio buttons. **Note**: This tutorial involves adding both PHP and JavaScript. If you need help with adding snippets to your site, please review this [guide on adding custom code for WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/). After you’ve created your form and added necessary fields, add the following code snippet. This code snippet will add a “Clear” button below your form. When clicked, it will reset all inputs to their default state. ### Styling the Clear Button You can apply the following CSS to style the button so it looks consistent with your theme. ``` #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 */ } ``` ## Customizing the Snippet You’ll need to update the form ID in both the JavaScript and CSS snippets: - Replace `10` with your own **Form ID** in: - **line 3**: document.getElementById(‘wpforms-form-10’) - wpforms-form-2927 .custom-clear-button To locate your form and field IDs, check out [this tutorial](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/). And that’s it! You’ve now added a fully functional Clear button to your WPForms form **Categories:** Tutorials, Fields ---