Resumo de IA
Gostaria de centralizar os seus formulários nas suas páginas WordPress? Embora os formulários WPForms tenham uma largura padrão de 100% do seu contentor, pode facilmente centralizá-los usando CSS personalizado.
Este guia irá mostrar-lhe como centralizar perfeitamente os seus formulários e os seus elementos.
Configuração do Formulário
Primeiro, terá de criar o seu formulário. Se precisar de ajuda com isto, pode sempre rever esta documentação para obter assistência.
Depois de ter criado o seu formulário e adicionado os seus campos, terá de definir cada Tamanho do Campo como Grande.
Para o fazer, clique no separador Avançadas e selecione Grande no menu pendente Tamanho do Campo.
Adicionar a Classe CSS
Após definir o tamanho do campo como Grande, o próximo passo é adicionar uma classe CSS especial. Para o fazer, abra o construtor de formulários e vá a Definições » Geral. Em seguida, role para baixo até à secção Avançadas e localize o campo Classe CSS do Formulário. Introduza wpf-center neste campo.
Adicionar o Código CSS
Aqui está o código CSS básico para centralizar o seu formulário:
Este código:
- Centraliza o formulário usando
margin: 0 auto - Define uma largura máxima de 500px. Pode experimentar com esta quantidade até encontrar a que satisfaz as suas necessidades
- Garante a responsividade móvel ajustando a largura em ecrãs mais pequenos
Centralizar Todos os Elementos do Formulário
Se quiser centralizar tudo dentro do formulário (rótulos, descrições, botões), use esta versão expandida:
Personalizar a Largura
Para ajustar a largura do formulário, modifique estas duas linhas no CSS:
max-width: 500px !important;
width: 500px !important;
Substitua 500px pela largura desejada. Por exemplo, para um formulário mais largo:
max-width: 800px !important;
width: 800px !important;
Perguntas Frequentes
P: Por que é que o CSS não está a funcionar para mim?
R: Primeiro, verifique se adicionou o nome da classe wpf-center na página Definições » Geral do seu formulário. Esta é a razão mais comum para o CSS não funcionar. Se ainda não funcionar, limpe a cache do seu navegador e atualize a página.
P: Como centralizo apenas o botão de Enviar?
R: Use este CSS simplificado e adicione a classe wpf-center-button (em vez de wpf-center) ao campo Classe CSS do seu formulário:
Em seguida, adicione este CSS ao seu site.
.wpforms-container.wpf-center-button .wpforms-submit-container {
text-align: center;
}
E é tudo o que precisa para centralizar o seu formulário. Em seguida, gostaria de poder alterar a cor do botão de envio nos seus formulários? Dê uma vista de olhos ao nosso artigo sobre alterar a cor do botão de envio.