Home / Admin / Adding a Clear Button to Reset All Fields in Your Form
Duplicate Snippet

Embed Snippet on Your Site

Adding a Clear Button to Reset All Fields in Your Form

This code snippet will clear all input fields at once.

<10
Code Preview
js
document.addEventListener('DOMContentLoaded', function() {
    // Change the form ID to match your WPForms form ID
    var form = document.getElementById('wpforms-form-10');
    if (form) {
        
        var clearButton = document.createElement('button');
        clearButton.type = 'button';
        clearButton.innerText = 'Clear';
		clearButton.class = 'custom-btn';
        clearButton.style.marginTop = '10px';
		        clearButton.classList.add('custom-clear-button');
       
        form.appendChild(clearButton);
        
        clearButton.addEventListener('click', function() {
           
            var fields = form.querySelectorAll('input, textarea, select');
            fields.forEach(function(field) {
                if (field.type === 'checkbox' || field.type === 'radio') {
                    field.checked = false;
                } else {
                    field.value = '';
                }
            });
        });
    }
});

Comments

Add a Comment