Resumo de IA
O espaçamento é uma parte crucial do design de formulários. No WPForms, o espaçamento entre campos, títulos e outros aspetos é definido por defeito para oferecer a experiência ideal aos visitantes do seu site.
Dito isto, cada site é único. Portanto, se pretender definir espaçamentos personalizados entre campos para um melhor alinhamento com o seu estilo específico, está no lugar certo.
Neste artigo, mostrarei passo a passo como pode forçar o espaçamento entre campos no WPForms. Embora precise de trabalhar com um pouco de código aqui, não precisa de ter qualquer conhecimento de codificação prévio para seguir o meu método.
Neste Artigo
Forçar Espaços entre Campos de Formulário
Antes de partilhar o código exato para forçar espaços entre diferentes tipos de componentes de formulário, precisará dos plugins certos para tornar esta tarefa o mais fácil possível.
Configuração Inicial: Espaçamento de Formulário com Código
Vamos começar por instalar os plugins necessários no seu site.
Passo 1: Instalar WPForms e WPCode
Este método funciona tanto para a versão Lite como para a versão Pro do WPForms. Mas recomendo a aquisição do WPForms Pro, pois isto dar-lhe-á acesso a imensas opções de estilo adicionais com o editor de blocos, eliminando a necessidade de código para personalizações mais avançadas.
Após adquirir o WPForms Pro, prossiga e instale o plugin no seu site. Aqui está um guia detalhado sobre como instalar o WPForms.
Em seguida, também precisará do plugin WPCode. Este é um plugin gratuito que torna a adição de snippets de código ao seu site incrivelmente fácil.
Os passos de instalação são semelhantes ao método de instalação do WPForms, mas pode adicionar a versão gratuita do WPCode diretamente do repositório do WordPress. Aqui está a versão rápida do processo.
No menu de administração do WordPress, vá para Plugins » Adicionar Novo.
Isto irá levá-lo para o ecrã de plugins. Use a caixa de pesquisa no lado direito para procurar por WPCode. Quando a listagem do plugin aparecer no seu ecrã, clique no botão Instalar Agora ao lado dele.
A instalação levará apenas alguns segundos e o botão Instalar mudará para Ativar. Pressione o botão Ativar para concluir a instalação do plugin no seu site.
Ótimo! Com os plugins necessários instalados, podemos passar a ajustar os espaços entre os diferentes elementos do formulário.
Passo 2: Criar e Incorporar um Formulário
Se está a tentar ajustar o espaçamento entre campos no WPForms, provavelmente já criou e publicou um ou mais formulários no seu site.
Mas, caso ainda não o tenha feito, pode seguir este guia fácil sobre como criar um formulário de contacto simples.
Para fins ilustrativos, estou a usar este modelo de formulário de inquérito pronto a usar.
Certifique-se de que incorpora e publica o seu formulário (ou, pelo menos, guarda uma versão rascunho no seu editor do WordPress). Só pode personalizar o espaçamento num formulário que já esteja incorporado no seu site.
Terá também de conhecer o ID do formulário cujos espaçamentos pretende personalizar. Pode localizar facilmente o ID do formulário acedendo a WPForms » Todos os Formulários.
O ID do formulário é composto inteiramente por números e é mencionado na coluna Shortcode, dentro das aspas. No meu caso, o ID do formulário é 2294.
Ótimo! Mas pode ainda estar a perguntar-se como inserir o código para modificar o espaçamento do WPForms. Descreverei isto a seguir.
Passo 3: Inserir Código para Espaçamento de Formulário
Antes de utilizar os códigos, é importante saber como pode inserir novos trechos de código no seu site WordPress. Terá de repetir este processo para cada código que controla o espaçamento entre campos no WPForms.
Para adicionar um novo trecho, basta aceder a Code Snippets » + Adicionar Trecho.
Em seguida, clique no botão Usar Trecho, na opção Adicionar o seu Código Personalizado (Novo Trecho).
Deverá encontrar-se agora num novo ecrã, onde pode dar um título ao seu trecho e escrever o seu código personalizado (ou simplesmente copiar e colar os que partilharei na próxima secção).
Como todos os códigos para controlar o espaçamento num formulário são CSS, certifique-se de que seleciona Trecho CSS no menu suspenso Tipo de Código.
Depois disso, basta adicionar o seu trecho de código e selecionar o método de inserção. As definições de inserção podem ser alteradas numa secção abaixo da Pré-visualização do Código. Mas não deverá precisar de alterar as definições padrão para nenhum dos códigos abordados neste artigo.
Mais importante ainda, lembre-se de guardar o seu trecho e ativá-lo após adicionar o seu código personalizado. Não verá o código a ter efeito até que seja ativado através do botão de alternância no canto superior direito.
Excelente! Está agora pronto para começar a personalizar o espaçamento dos formulários com código personalizado.
Códigos CSS para Ajustar o Espaçamento do Formulário
Estamos agora prontos para começar a criar os trechos de código CSS que controlam os espaçamentos para diferentes elementos do formulário.
Modificar o Espaço entre o Título do Formulário e o Primeiro Campo
Falemos dos títulos dos formulários! Por defeito, o WPForms utiliza o título H1 da sua página como título do formulário. Este título aparece acima do próprio formulário.
Se pretender que o título apareça dentro do contentor do formulário, pode ativar facilmente essa opção a partir do editor de blocos do WordPress.
Clique no formulário incorporado dentro do seu editor para abrir opções adicionais no painel direito. Em seguida, clique no botão de alternância Mostrar Título .
Pode querer ocultar o H1 se estiver a utilizar o título do WPForms. Isto pode ser feito simplesmente clicando no H1 e, em seguida, premindo o ícone do olho quando ele aparecer.
Agora, estamos prontos para alterar o espaçamento entre o título e o primeiro campo do formulário. Pode Publicar ou Atualizar o seu formulário neste momento.
Vejamos primeiro o espaçamento padrão entre o título do formulário e o primeiro campo no WPForms. Eis como costuma parecer:
Para alterar este espaçamento, crie um novo trecho no WPCode, como mostrado no passo 3. Pode aceder a isto rapidamente acedendo a Code Snippets » + Adicionar Trecho na sua barra lateral do WordPress.
Aqui está o código para alterar o espaçamento do título para TODOS os formulários WPForms no seu site:
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container-full .wpforms-title {
margin-bottom: 15px !important;
}
Lembre-se, os valores de padding e margin são variáveis. Isto significa que pode introduzir aqui qualquer valor de que necessite. Recomendo alterar apenas o valor margin-bottom neste código e deixar o padding-bottom definido como 0.
Por exemplo, se quiser que o título apareça com a mesma distância que o espaço entre cada campo, pode usar 15px como valor de margin-bottom. Se quiser criar uma distância maior ou menor que esta, basta aumentar ou diminuir o valor em px de margin-bottom conforme necessário.
Veja como o título aparece depois de adicionar o trecho de código acima ao meu formulário de inquérito.
Se quiser ajustar este espaçamento para formulários específicos em vez de aplicar alterações globais, pode modificar o código acima mencionando o ID do formulário que lhe interessa.
Por exemplo, veja como o código será alterado para um formulário com o ID# 2294.
wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-title {
margin-bottom: 15px !important;
}
Isto resolve o espaçamento do título do seu formulário. Mas e quanto ao espaçamento entre cada campo?
Abordarei isto a seguir.
Modificar o Espaçamento de Todos os Campos
O espaço entre cada linha sucessiva de campos é outro número variável que pode ser facilmente controlado com código.
Para referência, vejamos primeiro o espaçamento padrão entre os campos.
Agora, se quiser aumentar ou reduzir este espaço, pode criar um novo trecho de CSS seguindo os mesmos passos mostrados aqui.
Desta vez, o código de que necessita é este:
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container .wpforms-field {
padding-top: 100px !important;
}
O resultado é um formulário mais esticado com um espaço maior entre cada campo sucessivo.
Pode ajustar o espaço livremente alterando o valor em px da propriedade padding-top.
Mais uma vez, se quiser apenas modificar os espaçamentos dos campos para um formulário individual, terá de editar o código mencionando o ID do formulário:
wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-field {
padding-top: 100px !important;
}
Alterar o Preenchimento do Botão de Envio
Alterar o espaço entre o seu último campo e o botão de envio é tão fácil quanto os códigos que usou acima.
Por defeito, o espaçamento para o botão de envio no WPForms aparece assim:
O código de que necessita para ajustar o padding do botão de envio é:
.wpforms-container .wpforms-submit-container {
padding-top: 30px !important;
}
Após ativar este código, constatará que o padding aumentado tem efeito no botão de envio do seu formulário:
Isso foi bastante simples, não foi?
Sinta-se à vontade para usar os códigos CSS para forçar um espaço no WPForms como achar melhor!
A seguir, Aplique Estilos Avançados de Formulário
Ajustar as margens e o padding nos seus formulários é uma das poucas coisas que requer código. Mas o WPForms permite-lhe personalizar os estilos do seu formulário em detalhe extenso sem código, na maior parte do tempo.
Pode alterar a aparência dos seus campos, rótulos, botões e mais com controlos intuitivos de apontar e clicar. Veja o nosso guia sobre estilização de formulários com o editor de blocos para uma visão geral abrangente.
Crie o seu formulário WordPress agora
Pronto para criar o seu formulário? Comece hoje com o plugin construtor de formulários WordPress mais fácil. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.
Se este artigo o ajudou, por favor siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.
