Resumo de IA
Gostaria de centralizar seus formulários em suas páginas do WordPress? Embora os formulários do WPForms tenham largura padrão de 100% do seu contêiner, você pode centralizá-los facilmente usando CSS personalizado.
Este guia mostrará como centralizar perfeitamente seus formulários e seus elementos.
Configurando o Formulário
Primeiro, você precisará criar seu formulário. Se precisar de ajuda com isso, você sempre pode revisar esta documentação para obter assistência.
Depois de criar seu formulário e adicionar seus campos, você precisará definir cada Tamanho do Campo como Grande.
Para fazer isso, clique na guia Avançado e selecione Grande no menu suspenso Tamanho do Campo.
Adicionando a Classe CSS
Após definir o tamanho do campo como Grande, em seguida, você precisará adicionar uma classe CSS especial. Para fazer isso, abra o construtor de formulários e vá para Configurações » Geral. Em seguida, role para baixo até a seção Avançado e localize o campo Classe CSS do Formulário. Insira wpf-center neste campo.
Adicionando o Código CSS
Aqui está o código CSS básico para centralizar seu formulário:
Este código:
- Centraliza o formulário usando
margin: 0 auto - Define uma largura máxima de 500px. Você pode ajustar esse valor até encontrar o que atende às suas necessidades
- Garante a responsividade móvel ajustando a largura em telas menores
Centralizando Todos os Elementos do Formulário
Se você quiser centralizar tudo dentro do formulário (rótulos, descrições, botões), use esta versão estendida:
Personalizando 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 o CSS não está funcionando para mim?
R: Primeiro, verifique se você adicionou o nome da classe wpf-center na página Configurações » Geral do seu formulário. Esta é a razão mais comum para o CSS não funcionar. Se ainda não estiver funcionando, limpe o cache do seu navegador e atualize a página.
P: Como centralizo apenas o botão 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 você precisa para centralizar seu formulário. Em seguida, você gostaria de poder alterar a cor do botão de envio em seus formulários? Dê uma olhada em nosso artigo sobre alterar a cor do botão de envio.