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

Por defeito, o WPForms não inclui um botão de reset integrado. Se pretender oferecer aos seus utilizadores uma forma de limpar todos os campos de introdução de uma vez, em vez de redefinir cada campo manualmente, pode adicionar um botão personalizado "Limpar" utilizando JavaScript e CSS.

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

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, irá redefinir todas as introduções para o seu estado padrão.

Estilizar o Botão Limpar

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

Personalizar o Trecho

Terá de atualizar o ID do formulário em ambos os trechos de JavaScript e CSS:

• Substitua 10 pelo seu próprio ID de Formulário em:
  • linha 3: document.getElementById(‘wpforms-form-10’)
  • wpforms-form-2927 .custom-clear-button

Para localizar os IDs dos seus formulários e campos, consulte este tutorial.

E é tudo! Adicionou agora um botão Limpar totalmente funcional ao seu formulário WPForms