Como Personalizar os Botões de Quebra de Página

Introdução

Quer dar um toque único aos seus WPForms personalizando os botões de Quebra de Página? Não procure mais! Neste tutorial, vamos guiá-lo pelo processo de uso de CSS para personalizar a aparência dos seus botões. Com uma variedade de trechos de CSS, você pode facilmente obter a aparência desejada para um formulário mais personalizado e visualmente atraente.

Criando seu formulário de várias páginas

Vamos começar criando um formulário de várias páginas. Se você não tem certeza sobre o processo e precisa de orientação, sinta-se à vontade para consultar esta documentação útil sobre Criação de Formulários de Várias Páginas.

No tutorial de hoje, estamos focando na criação de um formulário projetado para coletar ideias de posts de blog.

Ativando Exibir Anterior

Após incorporar seus botões de Quebra de Página, não se esqueça de ativar a opção Exibir Anterior em cada uma dessas quebras. Isso garante que seus visitantes possam navegar para trás para revisar e fazer edições antes de finalizar o formulário.

Ao usar os botões Próximo e Anterior para o seu formulário, por padrão, esses botões já aparecerão na mesma linha.

Mas e se quiséssemos centralizá-los, ou torná-los botões maiores? É aqui que o CSS entra em jogo!

Centralizando os botões

Vamos agora adicionar algum CSS para centralizar os botões Próximo e Anterior em nosso formulário.

Se você não tem certeza onde ou como adicionar CSS ao seu site, por favor, revise este tutorial.

form#wpforms-form-605 .wpforms-pagebreak-left {
text-align: center;
}

Este CSS será aplicado apenas ao ID do formulário 605. Você precisará atualizar este ID de formulário para corresponder ao seu próprio ID. Se você não tem certeza de onde encontrar o ID do seu formulário, por favor, revise este guia.

Se você quisesse usar CSS como este para ser aplicado a todos os formulários, você usaria este CSS em vez disso.

.wpforms-pagebreak-left {
text-align: center !important;
}

Criando botões maiores

Para esta seção, vamos tornar nossos botões maiores e, ao mesmo tempo, usar o CSS acima para manter os botões centralizados.

form#wpforms-form-605 .wpforms-pagebreak-left {
text-align: center;
}

form#wpforms-form-605 .wpforms-page-next {
width: 48% ;
float: right ;
margin: 0px ;
}

form#wpforms-form-605 .wpforms-page-prev {
margin-right: 0px ;
width: 48% ;
float: left ;
margin: 0 ;
padding: 0 ;
}

Para fazer essa alteração em todos os formulários, use este CSS em vez disso.

.wpforms-pagebreak-left {
text-align: center !important;
}

.wpforms-page-next {
width: 48% !important;
float: right !important;
margin: 0px !important;
}

.wpforms-page-prev {
margin-right: 0px !important;
width: 48% !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}

Alinhando os últimos botões

Com o formulário de várias páginas e usando os botões Anterior, a última página do formulário mostrará o último botão Anterior acima do botão Enviar. Para o nosso tutorial, queremos alinhar esses botões para que fiquem na mesma linha.

Então, usando todo o CSS que usamos até agora, vamos juntar tudo isso.

form#wpforms-form-605 .wpforms-page-next {
width: 48% ;
float: right ;
margin: 0px ;
}

form#wpforms-form-605 .wpforms-page-prev {
margin-right: 0px ;
width: 48% ;
float: left ;
margin: 0 ;
padding: 0 ;
}

form#wpforms-form-605 .wpforms-submit-container {
float: right ;
width: 48% ;
margin: 0 ;
padding: 0 ;
clear: none ;
}

form#wpforms-form-605 .wpforms-submit-container button {
width: 100%;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-field-pagebreak {
float: left;
display: block;
width: 48%;
padding: 0;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-pagebreak-left {
width: 100%;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-page-prev {
width: 100%;
}

E, assim como com o outro CSS acima, se você quiser isso para todos os formulários, você usaria este CSS.

.wpforms-page-next {
width: 48% !important;
float: right !important;
margin: 0px !important;
}

.wpforms-page-prev {
margin-right: 0px !important;
width: 48% !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}

.wpforms-submit-container {
float: right !important;
width: 48% !important;
margin: 0 !important;
padding: 0 !important;
clear: none !important;
}

.wpforms-submit-container button {
width: 100% !important;
}

.wpforms-page.last .wpforms-field-pagebreak {
float: left !important;
display: block !important;
width: 48% !important;
padding: 0 !important;
}

.wpforms-page.last .wpforms-pagebreak-left {
width: 100% !important;
}

.wpforms-page.last .wpforms-page-prev {
width: 100% !important;
}

E é tudo o que você precisa para personalizar a aparência dos botões de várias páginas. Gostaria também de ir para a próxima página automaticamente com base em uma pergunta do seu formulário? Dê uma olhada em nosso tutorial sobre Como Ir para a Próxima Página Automaticamente.