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 Página Seguinte? Não procure mais! Neste tutorial, vamos guiá-lo através do processo de utilização de CSS para personalizar a aparência dos seus botões. Com uma gama de trechos de CSS, pode facilmente obter o aspeto que deseja para um formulário mais personalizado e visualmente apelativo.

Criar o seu formulário de várias páginas

Vamos começar por criar um formulário de várias páginas. Se não tiver a certeza sobre o processo e precisar de orientação, não hesite em consultar esta documentação útil sobre Criação de Formulários de Várias Páginas.

No tutorial de hoje, estamos a focar-nos na criação de um formulário concebido para recolher ideias para publicações de blogue.

Ativar a exibição anterior

Após incorporar os seus botões de Página Seguinte, não se esqueça de ativar a opção Exibir Anterior em cada uma destas páginas. Isto garante que os seus visitantes podem navegar para trás para rever e fazer edições antes de finalizar o formulário.

Ao utilizar os botões Seguinte e Anterior para o seu formulário, por defeito, estes 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!

Centralizar os botões

Vamos agora adicionar algum CSS para centralizar os botões Seguinte e Anterior no nosso formulário.

Se não tiver a certeza onde ou como adicionar CSS ao seu site, por favor, reveja este tutorial.

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

Este CSS só será aplicado ao ID do formulário 605. Terá de atualizar este ID de formulário para corresponder ao seu. Se não tiver a certeza de onde encontrar o seu ID de formulário, por favor, reveja este guia.

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

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

Criar botões maiores

Para esta secção, vamos tornar os 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 esta 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;
}

Alinhar os últimos botões

Com o formulário de várias páginas e utilizando 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 estes botões para que fiquem na mesma linha.

Portanto, usando todo o CSS que usámos até agora, vamos juntar tudo.

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 tal como com o outro CSS acima, se quiser isto para todos os formulários, 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 precisa para personalizar a aparência dos botões de várias páginas. Gostaria também de passar para a página seguinte automaticamente com base numa pergunta para o seu formulário? Dê uma vista de olhos ao nosso tutorial sobre Como Passar Automaticamente para a Página Seguinte.