### [Adicionar um Botão de Limpeza para Repor Todos os Campos no Seu Formulário](https://wpforms.com/developers/adding-a-clear-button-to-reset-all-fields-in-your-form/) **Publicado:** 3 de junho de 2025 **Autor:** Umair Majeed **Conteúdo:** Por defeito, o WPForms não inclui um botão de reposição integrado. Se desejar oferecer aos seus utilizadores uma forma de limpar todos os campos de entrada de uma vez, em vez de repor cada campo manualmente, pode adicionar um botão personalizado "Limpar" utilizando JavaScript e CSS. Neste tutorial, mostraremos como implementar um botão de reposição para todo o formulário que funciona com todos os tipos de campos, incluindo caixas de seleção e botões de rádio. **Nota**: Este tutorial envolve a adição de PHP e JavaScript. Se precisar de ajuda para adicionar trechos ao seu site, consulte este [guia sobre como adicionar código personalizado para o WPForms](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/). Depois de ter criado o seu formulário e adicionado os campos necessários, adicione o seguinte trecho de código. Este trecho de código adicionará um botão "Limpar" abaixo do seu formulário. Quando clicado, reporá todas as entradas para o seu estado predefinido. ### Estilização do Botão de Limpeza Pode aplicar o seguinte CSS para estilizar o botão, de modo a que fique consistente com o seu tema. ``` #wpforms-form-10 .custom-clear-button { background-color: #4CAF50; /* Fundo verde */ color: #ffffff; /* Texto branco */ padding: 10px 20px; /* Preenchimento */ border: none; /* Sem borda */ border-radius: 3px; /* Cantos arredondados */ cursor: pointer; /* Cursor de ponteiro em hover */ font-size: 16px; /* Tamanho da fonte */ font-weight: bold; /* Texto em negrito */ text-transform: uppercase; /* Texto em maiúsculas */ transition: background-color 0.3s ease, transform 0.2s ease; /* Transições suaves */ } #wpforms-form-10 .custom-clear-button:hover { background-color: #286b2b; /* Verde mais escuro em hover */ } ``` ## Personalização do Trecho Terá de atualizar o ID do formulário nos trechos de JavaScript e CSS: - Substitua `10` pelo seu próprio **ID do Formulário** em: - **linha 3**: document.getElementById(‘wpforms-form-10’) - wpforms-form-2927 .custom-clear-button Para localizar os IDs do seu formulário e campo, consulte [este tutorial](https://wpforms.com/developers/how-to-locate-form-id-and-field-id/). E é tudo! Adicionou agora um botão Limpar totalmente funcional ao seu formulário WPForms **Categorias:** Tutoriais, Campos ---