Adicionando um Botão Limpar para Redefinir Todos os Campos do seu Formulário

Por padrão, o WPForms não inclui um botão de redefinição integrado. Se você quiser oferecer aos seus usuários uma maneira de limpar todos os campos de entrada de uma vez, em vez de redefinir cada campo manualmente, você pode adicionar um botão personalizado “Limpar” usando JavaScript e CSS.

Neste tutorial, mostraremos como implementar um botão de redefinição para todo o formulário que funciona com todos os tipos de campo, incluindo caixas de seleção e botões de rádio.

Após criar seu formulário e adicionar 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, ele redefinirá todas as entradas para seu estado padrão.

Estilizando o Botão Limpar

Você pode aplicar o seguinte CSS para estilizar o botão, de modo que ele fique consistente com o seu tema.

#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 */
}

Personalizando o Trecho

Você precisará 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 de seus formulários e campos, confira  este tutorial.

E é isso! Você adicionou um botão Limpar totalmente funcional ao seu formulário WPForms