Personalizando Botões Anterior e Próximo em Formulários de Várias Páginas Usando CSS

Você quer personalizar os botões anterior e próximo em seus formulários de várias páginas? Personalizar os botões dos seus formulários pode ser uma ótima maneira de adicionar personalidade e estilo ao seu site.

Este tutorial mostrará como personalizar o estilo dos botões anterior e próximo do seu formulário de várias páginas.

Antes de começar, certifique-se de que o WPForms esteja instalado e ativado em seu site e que você tenha verificado sua licença. Em seguida, crie um formulário de várias páginas para adicionar os botões anterior e próximo.

Estilizando os Botões Anterior e Próximo

CSS oferece flexibilidade incrível para personalizar os botões anterior e próximo no WPForms e qualquer outro aspecto do seu formulário.

Se você é novo em CSS ou gostaria de uma atualização, o melhor lugar para começar é com nosso guia introdutório de CSS.

Aqui está o CSS padrão para os botões anterior e próximo do WPForms, bem como comentários para observar o que cada linha de CSS faz:

div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #eee; /* Grey background */
    border: 1px solid #ddd; /* Dark grey border */
    color: #333; /* Black text color */
    font-size: 1em; /* Size of text */
    padding: 10px 15px; /* Distance between text and border */
}

Você pode alterar cada um desses valores para estilizar seus botões de maneiras diferentes. Como exemplo, começaremos alterando a cor de fundo dos nossos botões para laranja e o texto para branco.

Primeiro, precisaremos encontrar os códigos hexadecimais para as cores que queremos usar. htmlcolorcodes.com e Adobe Color CC são ferramentas gratuitas úteis que podem ajudar você a escolher suas cores.

Assim que tivermos os códigos hexadecimais para as cores que queremos, podemos adicioná-los ao nosso CSS:

div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #e27730 !important; /* Orange background */
    color: #fff !important; /* White text */
}

Em seguida, precisamos adicionar este CSS ao nosso site. A maneira mais fácil de fazer isso é usando o Editor de CSS do WordPress. Para fazer isso, vá para Aparência » Personalizar e selecione CSS Adicional.

Depois de abrir a seção CSS Adicional, você pode adicionar seu novo CSS. Em seguida, clique no botão Publicar e pronto!

Veja como nossos botões ficarão agora, com nosso CSS de exemplo aplicado:

Personalizando Estilos de Hover

O CSS também permite que você aplique estilos completamente diferentes quando os usuários passam o cursor sobre um botão. Essa alteração ajuda a melhorar a experiência do usuário, pois informa aos usuários que o botão é clicável.

Abaixo está o CSS padrão para os estilos de hover do botão do WPForms. Conforme observado nos comentários, a cor de fundo fica um pouco mais escura e a cor da borda fica um pouco mais clara:

div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #ddd; /* Darker grey background */
    border: 1px solid #ccc; /* Lighter grey border */
}

Você pode notar que isso é muito menos CSS do que você viu para o botão quando ele não está em hover. Isso ocorre porque o CSS aplicará todos os estilos anteriores ao seu botão em hover, a menos que seja instruído de outra forma.

Por exemplo, se você deixar os estilos padrão no lugar, a cor do texto permanecerá preta quando os usuários passarem o mouse sobre o botão. Isso ocorre porque a cor do texto do botão normalmente seria preta, e não dissemos para alterá-la ao passar o mouse.

Assim como no exemplo anterior de CSS personalizado, você pode modificar qualquer um desses valores para alterar os estilos de hover do botão. Para o nosso exemplo, daremos ao botão um fundo laranja mais escuro quando ele estiver em hover.

div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #cd631d !important; /* Darker orange background */
}

Veja como os botões ficarão com o CSS aplicado:

Exemplo de CSS

Agora que cobrimos o básico, vamos passar por um exemplo completo de CSS personalizado para os botões anterior e próximo.

Aqui está o CSS que adicionaremos para este exemplo, que inclui alterações de estilo ao passar o mouse:

/* New button styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #003B6D !important; /* Dark blue background */
    border: 2px solid #BDBDBD !important; /* Gray border */
    color: #fff !important; /* White text */
    font-size: 1em !important; /* Increase text size */
    font-weight: bold !important; /* Bold text */
    padding: 16px !important; /* Increase distance between text and border */
    width: 25% !important; /* Make the button quarter-width */
}

/* New button hover styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #BDBDBD !important; /* Gray background */
    border: 2px solid #003B6D !important; /* Dark blue border */
}

Abaixo está como nossos botões personalizados ficarão com este CSS aplicado:

E aqui está como nossos botões ficarão ao passar o mouse sobre eles. Lembre-se, as únicas alterações são as cores de fundo e de borda:

É isso! Agora você pode personalizar seus botões anterior e próximo usando CSS personalizado.

Quer adicionar ainda mais estilos personalizados aos seus formulários? Confira nosso tutorial sobre como personalizar campos individuais do formulário.