Adição de um botão Limpar para redefinir todos os campos em seu formulário

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

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

Depois de criar seu formulário e adicionar os campos necessários, adicione o seguinte trecho de código.

Esse snippet de código adicionará um botão "Limpar" abaixo do formulário. Quando clicado, ele redefinirá todas as entradas para seu estado padrão.

Estilizando o botão Limpar

Você pode aplicar o CSS a seguir para estilizar o botão de modo que ele fique consistente com 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 */
}

Personalização do snippet

Você precisará atualizar o ID do formulário nos snippets JavaScript e CSS:

• Substituir 10 com seu próprio ID do formulário em:
  • linha 3: document.getElementById('wpforms-form-10')
  • wpforms-form-2927 .custom-clear-button

Para localizar seus IDs de formulário e campo, consulte este tutorial.

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