Deseja personalizar os botões anterior e seguinte em seus formulários de várias páginas? A personalização dos botões de seus formulários pode ser uma ótima maneira de adicionar personalidade e estilo ao seu site.
Este tutorial explicará como personalizar o estilo dos botões anterior e seguinte de seu formulário de várias páginas.
Observação: se você preferir estilizar seu formulário sem usar código, consulte nosso tutorial de estilização de formulários.
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 seguinte.
Observação: para ver um formulário de várias páginas em ação e começar a usá-lo rapidamente, você pode usar nosso modelo pré-criado de formulário de solicitação de crachá azul como base para seu próprio formulário. Em seguida, você pode aplicar as personalizações que abordaremos neste tutorial para estilizar os botões anterior e seguinte.
Estilizando os botões Anterior e Próximo
O CSS oferece uma flexibilidade incrível para personalizar os botões anterior e seguinte no WPForms e qualquer outro aspecto do seu formulário.
Se você é novo no CSS ou gostaria de se atualizar, o melhor lugar para começar é com nosso guia introdutório ao CSS.
Aqui está o CSS padrão para os botões anterior e seguinte do WPForms, bem como os 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 diferentes maneiras. Como exemplo, começaremos alterando a cor de fundo dos botões para laranja e o texto para branco.
Primeiro, precisaremos encontrar os códigos hexadecimais das cores que queremos usar. htmlcolorcodes.com e Adobe Color CC são ferramentas úteis e gratuitas que podem ajudá-lo a escolher suas cores.
Quando tivermos os códigos hexadecimais das cores desejadas, poderemos 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 */
}
Observação: ao adicionar CSS ao seu site, talvez seja necessário incluir !important antes do ponto e vírgula para garantir que os estilos personalizados sejam aplicados com êxito. Consulte nosso guia de solução de problemas de CSS para obter mais detalhes.
Em seguida, precisamos adicionar esse CSS ao nosso site. A maneira mais fácil de fazer isso é usar o Editor de CSS do WordPress. Para fazer isso, vá para Appearance " Customize e selecione Additional CSS.
Depois de abrir a seção Additional CSS, você poderá adicionar seu novo CSS. Em seguida, clique no botão Publish (Publicar ) e está tudo pronto!
Veja como nossos botões ficarão agora, com nosso CSS de exemplo aplicado:
Observação: Está tendo problemas para fazer com que o CSS recém-adicionado apareça em seu site? Confira nosso tutorial sobre como solucionar esse problema.
Personalização de estilos de Hover
O CSS também permite aplicar 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 permite que os usuários saibam que o botão é clicável.
Abaixo está o CSS padrão para estilos de foco de botão do WPForms. Conforme observado nos comentários, a cor do plano 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 esse CSS é muito menor do que o visto para o botão quando ele não está passando o mouse sobre ele. Isso ocorre porque o CSS aplicará todos os estilos anteriores ao botão focalizado, a menos que seja dito o contrário.
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 a ele para mudar ao passar o mouse.
Assim como no exemplo anterior de CSS personalizado, você pode modificar qualquer um desses valores para alterar os estilos de foco do botão. No nosso exemplo, daremos ao botão um fundo laranja mais escuro quando ele passar o mouse sobre ele.
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 já abordamos os conceitos básicos, vamos ver um exemplo completo de CSS personalizado para os botões anterior e seguinte.
Observação: o código abaixo alterará os botões anterior e seguinte de todos os formulários de várias páginas criados em seu site com o WPForms.
Se quiser estilizar os botões anterior e seguinte somente para um único formulário, você precisará encontrar o ID exclusivo desse formulário. Para obter mais detalhes, consulte nosso guia completo sobre como estilizar formulários de contato com CSS.
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 */
}
Veja abaixo a aparência de nossos botões personalizados com esse CSS aplicado:
E aqui está a aparência de nossos botões quando passarmos o mouse sobre eles. Lembre-se de que as únicas alterações são as cores do plano de fundo e da borda:
É isso aí! Agora você pode personalizar seus botões anterior e seguinte usando CSS personalizado.
Deseja adicionar ainda mais estilos personalizados aos seus formulários? Confira nosso tutorial sobre como personalizar campos de formulário individuais.