Adicionar um botão Limpar para repor todos os campos do formulário

Por padrão, o WPForms não inclui um botão de reset embutido. Se quiser oferecer aos seus utilizadores uma forma de limpar todos os campos de entrada de uma só vez, em vez de redefinir cada campo manualmente, pode adicionar um botão "Limpar" personalizado utilizando JavaScript e CSS.

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

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

Este snippet 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.

Estilizar o botão Limpar

Pode aplicar o seguinte CSS para estilizar o botão de modo a que fique coerente 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 snippet

Terá de atualizar o ID do formulário nos snippets JavaScript e CSS:

• Substituir 10 com o seu próprio ID do formulário em:
  • linha 3: document.getElementById('wpforms-form-10')
  • wpforms-form-2927 .botão de clarificação personalizado

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

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