Como centrar um formulário

Gostaria de centralizar seus formulários nas suas páginas do WordPress? Embora os formulários WPForms tenham como padrão 100% da largura de seu contêiner, você pode centralizá-los facilmente usando CSS personalizado.

Este guia mostrar-lhe-á como centrar perfeitamente os seus formulários e os respectivos elementos.

Configurar o formulário

Em primeiro lugar, tem de criar o seu formulário. Se precisar de ajuda com isto, pode sempre consultar esta documentação para obter assistência.

Depois de criar o formulário e adicionar os campos, terá de definir cada tamanho de campo como Grande.

Para o fazer, clique no separador Avançadas e selecione Grande no menu pendente Tamanho do campo.

Definir o tamanho do campo como grande

Adicionar a classe CSS

Depois de definir o tamanho do campo como Grande, terá de adicionar uma classe CSS especial. Para o fazer, abra o construtor de formulários e vá para Definições " Geral. Em seguida, desloque-se para baixo até ao Avançado e localizar a secção Classe CSS do formulário campo. Introduzir wpf-center neste domínio.

Adicionar classe CSS

Nota: A etapa da classe CSS é crucial - sem ela, o CSS de centralização não funcionará. Certifique-se de que introduz o nome da classe exatamente como mostrado.

Adicionar o código CSS

Aqui está o código CSS básico para centrar o formulário:

Nota: Para obter ajuda sobre como adicionar CSS ao seu site, consulte este tutorial.

Este código:

  • Centra o formulário utilizando margin: 0 auto
  • Define uma largura máxima de 500px. Pode alterar este valor até encontrar o que melhor se adequa às suas necessidades
  • Assegura a capacidade de resposta móvel, ajustando a largura em ecrãs mais pequenos

Centrar todos os elementos do formulário

Se pretender centrar tudo no interior do formulário (etiquetas, descrições, botões), utilize esta versão alargada:

Personalização da largura

Para ajustar a largura do formulário, modifique estas duas linhas no CSS:

largura máxima: 500px !important;
largura: 500px !importante;

Substituir 500px com a largura pretendida. Por exemplo, para um formulário mais largo:

largura máxima: 800px !important;
largura: 800px !importante;

Perguntas mais frequentes

P: Porque é que o CSS não está a funcionar para mim?

A: Primeiro, verifique se adicionou o wpf-center no nome da classe do seu formulário Definições " Geral página. Esta é a razão mais comum para que o CSS não funcione. Se continuar a não funcionar, limpe a cache do seu browser e actualize a página.

P: Como posso centrar apenas o botão Enviar?

A: Utilize este CSS simplificado e adicione a classe wpf-center-button (em vez de wpf-center) no campo Classe CSS do seu formulário:

adicionar o nome da classe à classe CSS do formulário no construtor de formulários

Em seguida, adicione este CSS ao seu sítio.

.wpforms-container.wpf-center-button .wpforms-submit-container {
    text-align: center;
}

E é tudo o que precisa para centrar o seu formulário. A seguir, gostaria de poder alterar a cor do botão de envio nos seus formulários? Dê uma vista de olhos no nosso artigo sobre como alterar a cor do botão de envio.