Como Ajustar o Espaçamento Entre os Campos do Formulário no WPForms

O espaçamento é uma parte crucial do design do formulário e, no WPForms, o espaçamento entre campos, títulos e outros aspectos é definido por padrão para oferecer a melhor experiência aos visitantes do seu site.

Dito isso, cada site é único. Portanto, se você deseja definir espaçamentos personalizados entre os campos para um melhor alinhamento com seu estilo específico, você está no lugar certo.

Neste artigo, mostrarei passo a passo como forçar um espaço entre campos no WPForms. Embora você precise trabalhar com um pouco de código aqui, não precisa ter nenhum conhecimento prévio de codificação para seguir meu método.

Como Ajustar o Espaçamento Entre os Campos do Formulário no WPForms

Cada alteração de espaçamento neste guia segue a mesma forma. Você decide qual parte do formulário deseja mover, copia o CSS correspondente e, em seguida, escolhe onde colá-lo com base se a alteração deve afetar uma página, um formulário ou todos os formulários do seu site.

Passo 1: Instale o Plugin WPForms

Para quem está começando do zero, o WPForms é um construtor de formulários de arrastar e soltar com mais de 2.100 modelos prontos, para que você geralmente possa começar com algo próximo do que precisa em vez de uma tela em branco.

Se você nunca construiu um antes, este guia sobre criação de um formulário de contato simples é o caminho mais rápido. O que eu mais gosto no WPForms para esta tarefa específica é o quanto você pode mudar antes mesmo de tocar no código.

Os controles de estilo visual lidam com cores, bordas, tamanhos de campo e preenchimento de contêiner, o que cobre uma quantidade surpreendente do que as pessoas assumem que requer CSS.

Para começar, compre a licença Pro. Em seguida, instale o WPForms em seu site. Se precisar de ajuda, siga estas instruções sobre como adicionar um plugin ao WordPress.

Atualize para o WPForms Pro Agora!

Para os exemplos abaixo, estou usando este modelo de formulário de pesquisa pronto, que tem campos suficientes para tornar as alterações de espaçamento óbvias.

Passo 2: Tente Primeiro os Controles de Espaçamento Integrados

Antes de escrever qualquer CSS, vale a pena verificar se os controles visuais já fazem o que você deseja. Abra seu formulário e vá para Configurações » Temas no construtor, ou clique no formulário dentro do editor de blocos para abrir o mesmo painel lá.

Três dessas configurações alteram o espaçamento diretamente:

• Estilos de Campo » Tamanho: Isso altera a altura do campo e, mais útil aqui, o espaço entre um rótulo e sua entrada. Alterna entre Pequeno, Médio e Grande.
• Estilos de Rótulo » Tamanho: Ajusta o tamanho do texto do rótulo, o que muda a quantidade de espaço que cada rótulo ocupa acima de seu campo.
• Estilos do Contêiner » Preenchimento: Define o espaço dentro da borda externa do formulário. Aumente-o quando o formulário parecer pressionado contra um plano de fundo ou borda.

Há uma limitação honesta a ser sinalizada aqui, pois nenhum desses controles define o espaço vertical entre uma linha de campo e a próxima, que é a coisa mais comum que as pessoas querem mudar.

Esse espaço é fixo em 15px acima e abaixo de cada campo, e o CSS é a única maneira de movê-lo. Se os controles integrados chegaram perto o suficiente, você pode parar por aqui. Se as próprias linhas ainda estiverem muito apertadas ou muito soltas, continue lendo.

Passo 3: Copie o CSS para o Espaçamento que Você Deseja Alterar

Cada trecho abaixo vem em duas formas, uma que se aplica a todos os formulários WPForms em seu site e outra que segmenta um único formulário por seu ID, o que você vai querer quando um formulário precisar de um espaçamento diferente do resto.

Para encontrar o ID de um formulário, vá para WPForms » Todos os Formulários e passe o mouse sobre o nome do formulário. Ou, você também pode abrir o formulário específico, clicar em incorporar e copiar o shortcode do formulário do construtor diretamente.

O WPForms já aplica seus próprios estilos a esses elementos, então você geralmente precisará de !important para que seus valores prevaleçam. Incluí no trecho abaixo onde é realmente necessário.

Espaço Entre Campos (Espaço Vertical)

Este é o que a maioria das pessoas procura. O WPForms dá a cada campo 15px de padding na parte superior e inferior, então campos adjacentes ficam a 30px de distância. Aqui está o espaçamento padrão no meu formulário de pesquisa:

Para alterar em todos os seus formulários:

.wpforms-container .wpforms-field {
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}

Aumente ambos os valores para afastar os campos uniformemente, ou diminua-os para apertar o formulário. Se você quiser aumentar o espaço apenas em uma direção, defina apenas padding-top e deixe o inferior como está.

Para um único formulário, adicione o ID:

#wpforms-2294 .wpforms-field {
	padding-top: 30px !important;
	padding-bottom: 30px !important;
}

Espaço Abaixo do Título do Formulário

Por padrão, o H1 da sua página fica acima do formulário em vez de dentro dele. O WPForms coloca 35px abaixo do título do formulário antes que o primeiro campo comece.

Isso é um pouco mais do que o espaço entre os campos, o que é intencional, porque o título é um cabeçalho e os cabeçalhos ganham mais espaço do que o conteúdo abaixo deles.

Se você preferir que o título fique dentro do contêiner do formulário, clique no formulário incorporado no seu editor e ative Mostrar Título no painel direito.

Provavelmente você vai querer ocultar o H1 da página nesse ponto para que o título não apareça duas vezes. Clique no H1 e pressione o ícone do olho que aparece.

Aqui está o espaçamento do título antes de quaisquer alterações:

Para controlar isso, zere o padding do contêiner e defina a margem do título para o que você realmente deseja:

.wpforms-container-full .wpforms-head-container {
	padding-bottom: 0 !important;
}

.wpforms-container-full .wpforms-title {
	margin-bottom: 15px !important;
}

Deixe padding-bottom em 0 e altere apenas margin-bottom.

Definir para 15px faz com que o título fique à mesma distância do primeiro campo que os campos ficam uns dos outros.

Isso parece organizado quando você quer que o formulário seja lido como um único bloco uniforme. E aqui está o resultado no meu formulário de pesquisa:

A versão de formulário único, com o # em ambos os seletores:

#wpforms-2294 .wpforms-head-container {
	padding-bottom: 0 !important;
}

#wpforms-2294 .wpforms-title {
	margin-bottom: 15px !important;
}

Espaço Entre um Rótulo e Seu Campo

Este espaço confunde as pessoas porque parece espaçamento de campo, mas é controlado separadamente.

Com marcação moderna, o WPForms o define através de uma variável CSS chamada --wpforms-field-size-input-spacing, que tem um padrão de 15px.

Substituir a variável é mais limpo do que lutar diretamente com a margem do rótulo, pois mantém a lógica de dimensionamento do próprio WPForms intacta:

.wpforms-container-full {
	--wpforms-field-size-input-spacing: 8px;
}

Reduza para cerca de 8px e cada rótulo se aproxima de sua entrada, o que visualmente une os dois.

Isso é genuinamente útil em formulários mais longos, porque o espaçamento apertado entre o rótulo e o campo, combinado com lacunas mais amplas entre as linhas, torna muito mais fácil saber qual rótulo pertence a qual caixa.

Se você preferir não mexer no CSS para este, o controle Estilos de Campo » Tamanho da Etapa 2 altera a mesma variável.

Espaço Entre Campos Lado a Lado

Quando você coloca campos um ao lado do outro usando o campo Layout ou as classes de coluna do WPForms, eles são separados por uma canaleta de 20px. Alterá-la requer um pouco de cuidado, porque a canaleta é construída a partir de dois valores que precisam concordar.

Cada coluna de meia largura é definida como calc(50% - 10px) com uma margem esquerda de 20px. Altere apenas a margem e suas colunas transbordarão sua linha. Ajuste ambos juntos:

.wpforms-container .wpforms-one-half {
	width: calc(50% - 20px) !important;
	margin-left: 40px !important;
}

A regra é que a subtração de largura deve ser metade da sua canaleta. Uma canaleta de 40px significa subtrair 20px, uma canaleta de 30px significa subtrair 15px, e assim por diante.

Para saber mais sobre como construir essas linhas em primeiro lugar, consulte o guia sobre layouts de formulário multicolunados.

Espaço Acima do Botão de Envio

A marcação moderna controla a margem superior do botão de envio com sua própria variável, --wpforms-button-size-margin-top, que é definida como 10px por padrão e se parece com isto em meu formulário:

Assim, você pode definir seu próprio valor para ela e deixar todo o resto inalterado:

.wpforms-container-full {
	--wpforms-button-size-margin-top: 30px;
}

Dar ao botão mais espaço do que os campos geralmente é a decisão correta, pois separa a ação das coisas que estão sendo preenchidas, e a diferença aparece imediatamente:

Reduzindo ou Removendo Espaço Extra

Agora, tudo o que foi dito acima funciona ao contrário, e fechar lacunas é um pedido tão comum quanto abri-las. Para apertar as linhas, reduza o preenchimento do campo abaixo de seu padrão de 15px:

.wpforms-container .wpforms-field {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

Se a lacuna com a qual você está lidando fica entre o formulário e o conteúdo ao redor dele, em vez de dentro do formulário, o culpado geralmente é o contêiner, e não os campos. Defina o preenchimento do contêiner como zero e remova o espaçamento do título:

.wpforms-container-full {
	--wpforms-container-padding: 0px;
}

.wpforms-container-full .wpforms-head-container {
	padding-bottom: 0 !important;
}

Tenha cuidado ao apertar demais, pois assim que as linhas ficarem mais próximas do que a lacuna entre um rótulo e seu próprio campo, as pessoas começarão a ler incorretamente qual rótulo pertence a qual entrada, e isso aparecerá como dados ruins em vez de reclamações. Eu manteria pelo menos 8px de preenchimento em cada campo.

Passo 4: Escolha Onde Adicionar Seu CSS

O mesmo CSS se comporta de maneira diferente dependendo de onde você o cola, e escolher o local certo evita que você se repita em todas as páginas ou que acidentalmente reestilize formulários que você pretendia deixar inalterados.

Onde você adiciona	O que afeta
Construtor WPForms	Aquele formulário, em todos os lugares onde é incorporado
Editor de Blocos	Aquela incorporação, naquela página
WPCode	Todos os formulários em seu site

Método 1: O Construtor WPForms

Abra seu formulário e vá para Configurações » Temas, depois mude para a aba Avançado. Você encontrará uma caixa CSS Personalizado lá. Cole seu trecho e clique em Salvar.

Estilos adicionados aqui são armazenados com o próprio formulário, então eles o seguem para todas as páginas. Isso se aplica se você o incorporar com o bloco WPForms, o shortcode ou o módulo Divi.

Para a maioria das pessoas, este é o padrão correto, pois significa uma alteração em vez de uma alteração por página. O conjunto completo de opções está coberto na documentação sobre estilização de seus formulários no construtor de formulários.

Método 2: O Editor de Blocos

Clique no bloco do formulário em sua página ou postagem para abrir o painel de estilização à direita, depois abra a seção Avançado e adicione seu CSS lá.

Publique ou atualize a página para aplicá-lo. A diferença aqui é o alcance, pois qualquer coisa que você adicionar no editor de blocos afeta apenas aquela incorporação específica.

Você pode executar um formulário de contato em todo o site com espaçamento amplo em uma página de contato dedicada e espaçamento mais apertado em uma barra lateral, sem duplicar o formulário.

Note que este painel só aparece para formulários incorporados com o bloco WPForms, então um formulário inserido via shortcode não o terá. A documentação sobre estilização de seus formulários no editor de blocos aborda o restante dos controles.

Método 3: WPCode (Para Todo o Site)

Os dois métodos acima são limitados a um único formulário ou a uma única incorporação, que é exatamente o que você deseja na maioria das vezes. Mas se você estiver padronizando o espaçamento em uma dúzia de formulários, defini-lo uma vez para todo o site é melhor do que abrir cada um.

O CSS de todo o site também sobrevive a uma mudança de tema, o que o CSS adicionado através do personalizador do seu tema não faz. WPCode é um plugin gratuito que torna isso simples. No menu de administração do WordPress, vá para Plugins » Adicionar Novo.

Procure por WPCode e clique em Instalar agora ao lado dele nos resultados. Assim que a instalação terminar, o botão muda para Ativar. Clique nele.

Com o WPCode ativo, vá para Snippets de Código » + Adicionar Snippet.

Clique em Usar Snippet na opção Adicionar seu Código Personalizado (Novo Snippet).

Dê um nome ao seu snippet e, em seguida, escolha Snippet de CSS no menu suspenso Tipo de Código. Isso é importante, porque o WPCode não aplicará o código corretamente se ele ainda estiver definido como PHP.

Cole seu CSS e deixe as configurações de inserção abaixo da Visualização do Código em seus padrões. Nenhum dos snippets neste guia precisa de algo diferente.

Salve o snippet e, em seguida, ative-o com o alternador no canto superior direito. Nada muda em seu site até que esse alternador esteja ativado, o que pega quase todo mundo da primeira vez.

Como isso se aplica a todos os formulários, use a versão do ID do formulário do seu snippet se quiser excluir alguns. Você também pode adicionar seus próprios nomes de classe a campos específicos e direcioná-los em vez disso, o que é abordado na documentação sobre classes CSS personalizadas.

Quanto Espaço Você Deve Colocar Entre os Campos do Formulário?

O princípio principal é a proximidade, o que significa que um rótulo deve ficar mais perto de seu próprio campo do que esse campo fica do próximo.

Espaçamento igual em todos os lugares deixa as pessoas adivinhando qual rótulo pertence a qual caixa, e é exatamente por isso que a variável rótulo-para-campo tem um padrão de 15px, enquanto campos adjacentes ficam a 30px de distância.

Uma diretriz comum entre sistemas de design é espaçar os campos em 50% a 75% da altura do campo. Os campos WPForms têm 43px de altura no tamanho Médio, o que coloca a faixa recomendada em aproximadamente 21px a 32px.

O padrão de 30px se encaixa confortavelmente nele, então, se você não tiver certeza se deve mudar alguma coisa, a resposta provavelmente é não. Algumas outras coisas que valem a pena ter em mente:

• Dê mais espaço às seções do que aos campos: Quando um formulário tem grupos distintos, como detalhes de contato e detalhes de pagamento, dobre ou triplique a lacuna entre os grupos para que a estrutura seja visível rapidamente.
• Mantenha o celular e o desktop consistentes: O WPForms já cuida do espaçamento responsivo, então resista a adicionar lacunas específicas para celular, a menos que algo esteja genuinamente quebrado.
• Altere um valor por vez: Problemas de espaçamento geralmente têm um culpado, não cinco. Ajuste o preenchimento do campo, olhe o formulário e siga em frente.

Para saber mais sobre o lado do design disso, nosso guia sobre melhores práticas de design de formulários aprofunda-se em layout e ordem dos campos.

Perguntas Frequentes sobre Espaçamento de Formulários no WPForms

O espaçamento de formulários no WPForms surge com frequência no suporte, geralmente em relação a lacunas que parecem muito largas ou CSS que não entra em vigor. Aqui estão as perguntas que vejo com mais frequência.

Como reduzir o espaço entre os campos no WPForms?

Diminua o preenchimento do campo abaixo do padrão de 15px. Use .wpforms-container .wpforms-field { padding-top: 5px !important; padding-bottom: 5px !important; } e ajuste a partir daí. Mantenha pelo menos 8px para que os rótulos permaneçam visualmente conectados às suas próprias entradas.

Por que há tanto espaço entre os meus campos do formulário?

Cada campo carrega 15px de preenchimento superior e inferior, então os campos vizinhos ficam a 30px de distância antes que seu tema adicione qualquer coisa. Se o espaço parecer maior que isso, seu tema provavelmente está aplicando suas próprias margens aos elementos do formulário ou parágrafos dentro do contêiner do formulário.

Posso alterar o espaçamento do formulário sem usar CSS?

Parcialmente. Estilos de Campo » Tamanho altera o espaçamento entre o rótulo e o campo, e Estilos do Contêiner » Preenchimento altera o espaço dentro da borda do formulário, ambos sem código. A lacuna vertical entre as linhas de campos não tem controle visual, então essa precisa de CSS.

Como adicionar espaço entre dois campos na mesma linha?

Campos lado a lado usam uma calha de 20px criada a partir de uma largura calc() e uma margem esquerda correspondente. Altere ambos juntos, mantendo a subtração da largura pela metade da calha, ou as colunas transbordarão sua linha.

Por que meu CSS de espaçamento não está funcionando?

Na maioria das vezes, é um # ausente em um seletor de ID de formulário, ou os próprios estilos do WPForms estão tendo prioridade. Adicione !important antes do ponto e vírgula e confirme se o seu seletor corresponde ao formulário. Nosso guia sobre solução de problemas de CSS que não está funcionando cobre o resto.

Como centralizar um formulário no WPForms?

Isso é uma questão de largura do contêiner em vez de espaçamento, então os trechos aqui não resolverão. Definir um max-width no contêiner do formulário com margin: 0 auto é a abordagem usual.

Em seguida, Personalize o Resto do Design do Seu Formulário

O espaçamento de campos e rótulos é uma das poucas partes do design de formulários que ainda se beneficia de uma ou duas linhas de CSS, mas quase todo o resto é clicar e apontar no mesmo painel Configurações » Temas que você usou acima. Nosso guia sobre estilização de formulários com o editor de blocos percorre todo o conjunto de controles.

Se você está repensando o layout em vez de apenas o espaçamento, o design de layouts de formulários cobre a estrutura de colunas e a ordem dos campos, e como estilizar formulários de contato no WordPress é uma boa leitura seguinte especificamente para formulários de contato.

Estilize Seus Formulários WordPress Agora

Pronto para criar seu formulário? Comece hoje mesmo com o plugin de criação de formulários WordPress mais fácil. WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de devolução do dinheiro em 14 dias.

Se este artigo ajudou você, por favor, siga-nos no Facebook e Twitter para mais tutoriais e guias gratuitos do WordPress.