Adding a Clear Button to Reset All Fields in Your Form

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.

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.

And that’s it! You’ve now added a fully functional Clear button to your WPForms form