Como Ajustar o Espaço 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 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.

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

Todas as alterações de espaçamento neste guia seguem 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 no seu site.

Passo 1: Instalar o Plugin WPForms

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

Se nunca construiu um antes, este guia sobre criar um formulário de contato simples é a forma mais rápida de começar. O que mais gosto no WPForms para esta tarefa específica é o quanto pode mudar antes de tocar em qualquer código.

Os controlos de estilo visual tratam de 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. Depois, instale o WPForms no seu website. Se precisar de ajuda, siga estas instruções sobre como adicionar um plugin ao WordPress.

Atualize para WPForms Pro Agora!

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

Passo 2: Experimente Primeiro os Controlos de Espaçamento Integrados

Antes de escrever qualquer CSS, vale a pena verificar se os controlos visuais já fazem o que pretende. Abra o 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: Altera a altura do campo e, mais útil aqui, o espaço entre um rótulo e a 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 do seu campo.
• Estilos de Contêiner » Preenchimento: Define o espaço dentro da borda externa do formulário. Aumente-o quando o formulário parecer pressionado contra um fundo ou borda.

Há uma limitação honesta a assinalar aqui, pois nenhum destes controlos 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 o mover. Se os controlos integrados o aproximaram o suficiente, pode parar aqui. Se as próprias linhas ainda estiverem muito apertadas ou muito soltas, continue a ler.

Passo 3: Copie o CSS para o Espaçamento que Pretende Alterar

Cada trecho abaixo vem em duas formas, uma que se aplica a todos os formulários WPForms no seu site e outra que tem como alvo um único formulário pelo 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 rato 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 os seus próprios estilos a estes elementos, pelo que muitas vezes precisará de !important para que os seus valores prevaleçam. Incluí-o nos trechos abaixo onde é genuinamente necessário.

Espaço Entre Campos (Lacuna Vertical)

Este é o que a maioria das pessoas procura. O WPForms dá a cada campo 15px de padding no topo e na base, para que os campos adjacentes fiquem a 30px de distância. Aqui está o espaçamento padrão no meu formulário de inquérito:

Para o 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 quiser apenas aumentar a lacuna numa direção, defina apenas padding-top e deixe a base em paz.

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 defeito, 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 de o primeiro campo começar.

Isso é um pouco mais do que a lacuna 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 preferir que o título fique dentro do contentor do formulário, clique no formulário incorporado no seu editor e ative Mostrar Título no painel direito.

Provavelmente vai querer ocultar o H1 da página nesse momento 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 o controlar, defina o padding do contentor para zero e o margin do título para o que realmente quiser:

.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.

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

Isto parece arrumado quando quer que o formulário seja lido como um único bloco uniforme. E aqui está o resultado no meu formulário de inquérito:

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 o Seu Campo

Esta lacuna confunde as pessoas porque parece espaçamento de campo, mas é controlada separadamente.

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

Substituir a variável é mais limpo do que lutar diretamente contra o margin 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-o para cerca de 8px e cada rótulo aproxima-se da 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, juntamente com lacunas mais largas entre as linhas, torna muito mais fácil saber qual rótulo pertence a qual caixa.

Se preferir não mexer no CSS para este, o controlo Estilos de Campo » Tamanho do Passo 2 altera a mesma variável.

Espaço Entre Campos Lado a Lado

Quando coloca campos uns ao lado dos outros 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 têm de concordar.

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

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

A regra é que a subtração da 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 mais informações sobre como construir estas linhas em primeiro lugar, consulte o guia sobre layouts de formulário multicoluna.

Espaço Acima do Botão de Envio

A marcação moderna controla a margem superior do botão de submissão com a sua própria variável, --wpforms-button-size-margin-top, que está definida para 10px por defeito e parece isto no meu formulário:

Assim, pode definir o seu próprio valor para ela e deixar todo o resto em paz:

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

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

Reduzir ou Remover Espaço Extra

Agora, tudo o que está 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 do seu valor padrão de 15px:

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

Se a lacuna com que está a lidar se situa entre o formulário e o conteúdo à sua volta, em vez de dentro do formulário, o culpado é geralmente o contentor em vez dos campos. Defina o preenchimento do contentor para 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 demasiado, porque assim que as linhas ficarem mais próximas do que a lacuna entre um rótulo e o seu próprio campo, as pessoas começam a ler mal qual rótulo pertence a qual entrada, e isso aparece como dados incorretos em vez de reclamações. Eu manteria pelo menos 8px de preenchimento em cada campo.

Passo 4: Escolha Onde Adicionar o Seu CSS

O mesmo CSS comporta-se de forma diferente dependendo de onde o cola, e escolher o local certo poupa-lhe de ter de repetir-se em cada página ou de reestilizar acidentalmente formulários que pretendia deixar em paz.

Onde o adiciona	O que afeta
Construtor WPForms	Esse formulário, em todo o lado onde está incorporado
Editor de Blocos	Essa incorporação, nessa página
WPCode	Todos os formulários no seu site

Método 1: O Construtor WPForms

Abra o seu formulário e vá a Definições » Temas, depois mude para o separador Avançado. Encontrará uma caixa CSS Personalizado lá. Cole o seu excerto e, em seguida, clique em Guardar.

Os estilos adicionados aqui são armazenados com o próprio formulário, pelo que o seguem para todas as páginas. Isso aplica-se quer o incorpore com o bloco WPForms, o shortcode, ou o módulo Divi.

Para a maioria das pessoas, esta é a predefinição correta, porque 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 dos seus formulários no construtor de formulários.

Método 2: O Editor de Blocos

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

Publique ou atualize a página para a aplicar. A diferença aqui é o alcance, pois qualquer coisa que adicione no editor de blocos afeta apenas essa incorporação específica.

Pode executar um formulário de contacto em todo o site com espaçamento amplo numa página de contacto dedicada e espaçamento mais apertado numa barra lateral, sem duplicar o formulário.

Note que este painel só aparece para formulários incorporados com o bloco WPForms, pelo que um formulário inserido através de um shortcode não o terá. A documentação sobre como estilizar os seus formulários no editor de blocos aborda o resto dos controlos.

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

Os dois métodos acima estão limitados a um único formulário ou a uma única incorporação, o que é exatamente o que pretende na maioria das vezes. Mas se estiver a padronizar 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 alteração de tema, o que o CSS adicionado através do personalizador do seu tema não faz. WPCode é um plugin gratuito que torna isto simples. No menu de administração do WordPress, vá para Plugins » Adicionar Novo.

Procure por WPCode, depois 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 o seu Código Personalizado (Novo Snippet).

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

Cole o seu CSS e deixe as definições de inserção por baixo da Pré-visualização do Código nos seus padrões. Nenhum dos snippets neste guia precisa de algo diferente.

Guarde o snippet, depois ative-o com o interruptor no canto superior direito. Nada muda no seu site até que esse interruptor esteja ligado, o que apanha quase toda a gente na primeira vez.

Como isto se aplica a todos os formulários, use a versão do ID do formulário do seu snippet se quiser excluir alguns. Também pode adicionar os 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.

Quanta Espaço 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 do seu próprio campo do que esse campo fica do próximo.

O espaçamento igual em todo o lado deixa as pessoas a adivinhar a que caixa pertence cada rótulo, e é exatamente por isso que a variável rótulo-para-campo tem um valor padrão de 15px, enquanto os campos adjacentes ficam a 30px de distância.

Uma diretriz comum entre os 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 o intervalo recomendado em aproximadamente 21px a 32px.

O padrão de 30px fica confortavelmente dentro dele, pelo que, se não tiver a certeza se deve alterar alguma coisa, a resposta é provavelmente não. Mais algumas coisas que vale a pena ter em mente:

• Dê mais espaço às secções do que aos campos: Quando um formulário tem grupos distintos como detalhes de contacto e detalhes de pagamento, duplique ou triplique a distância entre os grupos para que a estrutura seja visível num relance.
• Mantenha a consistência entre telemóvel e desktop: O WPForms já trata do espaçamento responsivo, por isso resista a adicionar espaçamentos específicos para telemóvel, a menos que algo esteja genuinamente quebrado.
• Altere um valor de cada vez: Problemas de espaçamento são geralmente causados por um fator, não cinco. Ajuste o preenchimento dos campos, observe o formulário e avance.

Para mais informações sobre o lado do design, o nosso guia sobre melhores práticas de design de formulários aprofunda-se no layout e na ordem dos campos.

FAQs sobre Espaçamento de Formulários no WPForms

O espaçamento de formulários no WPForms surge frequentemente no suporte, geralmente em relação a espaços que parecem demasiado grandes ou a CSS que não tem efeito. Aqui estão as perguntas que vejo com mais frequência.

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

Reduza o preenchimento dos campos abaixo do seu valor 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 ligados às suas próprias entradas.

Porque existe tanto espaço entre os meus campos do formulário?

Cada campo tem 15px de preenchimento em cima e em baixo, pelo que os campos vizinhos ficam a 30px de distância antes do seu tema adicionar qualquer coisa. Se a lacuna parecer maior do que isso, o seu tema está provavelmente a aplicar as suas próprias margens a elementos do formulário ou parágrafos dentro do contentor 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 Container » Preenchimento altera o espaço dentro da borda do formulário, ambos sem código. O espaço vertical entre as linhas de campos não tem controlo visual, pelo que este necessita de CSS.

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

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

Porque é que o meu CSS de espaçamento não está a funcionar?

Na maioria das vezes, é uma falta de # num seletor de ID de formulário, ou os próprios estilos do WPForms a ter prioridade. Adicione !important antes do ponto e vírgula e confirme que o seu seletor corresponde ao formulário. O nosso guia sobre resolução de problemas de CSS que não está a funcionar cobre o resto.

Como centralizo um formulário no WPForms?

Isso é uma questão de largura do container em vez de espaçamento, pelo que os trechos aqui não o resolverão. Definir uma max-width no container 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 beneficia de uma ou duas linhas de CSS, mas quase todo o resto é clicar e selecionar no mesmo painel Definições » Temas que usou acima. O nosso guia sobre estilização de formulários com o editor de blocos percorre todo o conjunto de controlos.

Se está a repensar o layout em vez de apenas o espaçamento, o design de layouts de formulários aborda a estrutura de colunas e a ordem dos campos, e como estilizar formulários de contacto em WordPress é uma boa leitura seguinte especificamente para formulários de contacto.

Estilize os Seus Formulários WordPress Agora

Pronto para construir 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.