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 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.
Neste Artigo
Forçando Espaços Entre os Campos do Formulário
Antes de compartilhar o código exato para forçar espaços entre diferentes tipos de componentes de formulário, você precisará dos plugins certos para tornar essa tarefa o mais fácil possível.
Configuração Inicial: Espaçamento de Formulário com Código
Vamos começar instalando os plugins necessários em seu site.
Passo 1: Instalar WPForms e WPCode
Este método funciona tanto para as versões Lite quanto Pro do WPForms. Mas recomendo adquirir o WPForms Pro, pois isso lhe dará acesso a toneladas de opções extras de estilo 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 em seu site. Aqui está um guia detalhado sobre como instalar o WPForms.
Em seguida, você também precisará do plugin WPCode. Este é um plugin gratuito que torna a adição de trechos de código ao seu site incrivelmente fácil.
As etapas de instalação são semelhantes ao método de instalação do WPForms, mas você 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.
Isso o levará à tela de plugins. Use a caixa de pesquisa no lado direito para procurar por WPCode. Quando a listagem do plugin aparecer em sua tela, 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 em 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 você está tentando ajustar o espaçamento entre campos no WPForms, provavelmente já criou e publicou um ou mais formulários em seu site.
Mas, caso ainda não o tenha feito, você pode seguir este guia fácil sobre como criar um formulário de contato simples.
Para fins ilustrativos, estou usando este modelo de formulário de pesquisa pronto.
Certifique-se de incorporar e publicar seu formulário (ou pelo menos salvar uma versão rascunho dele no seu editor do WordPress). Você só pode personalizar o espaçamento em um formulário que já esteja incorporado em seu site.
Você também precisará saber o ID do formulário que deseja personalizar os espaçamentos. Você pode localizar facilmente o ID do formulário acessando WPForms » Todos os Formulários.
O ID do formulário é composto inteiramente por números e é mencionado na coluna Shortcode dentro das aspas duplas. No meu caso, o ID do formulário é 2294.
Ótimo! Mas você ainda pode estar se perguntando como inserir o código para modificar o espaçamento do WPForms. Vou descrever isso a seguir.
Passo 3: Inserir Código para Espaçamento de Formulário
Antes de usar os códigos, é importante saber como inserir novos trechos de código em seu site WordPress. Você precisará repetir este processo para cada código que controla o espaçamento entre os campos no WPForms.
Para adicionar um novo trecho, basta acessar Trechos de Código » + Adicionar Trecho.
Em seguida, clique no botão Usar Trecho na opção Adicionar Seu Código Personalizado (Novo Trecho).
Agora você deve estar em uma nova tela, onde pode dar um título ao seu trecho e escrever seu código personalizado (ou simplesmente copiar e colar os que compartilharei na próxima seção).
Como todos os códigos para controlar o espaçamento em um formulário são CSS, certifique-se de selecionar Trecho CSS no menu suspenso Tipo de Código.
Depois disso, basta adicionar seu trecho de código e selecionar o método de inserção. As configurações de inserção podem ser alteradas em uma seção abaixo da Visualização do Código. Mas você não deve precisar alterar as configurações padrão para nenhum dos códigos discutidos neste post.
Mais importante, lembre-se de salvar seu trecho e ativá-lo após adicionar seu código personalizado. Você não verá o código ter efeito até que ele seja ativado usando o botão de alternância no canto superior direito.
Excelente! Agora você está pronto para começar a personalizar o espaçamento do formulário com código personalizado.
Códigos CSS para Ajustar o Espaçamento do Formulário
Agora estamos 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
Vamos falar sobre os títulos dos formulários! Por padrão, o WPForms usa o cabeçalho H1 da sua página como título do formulário. Este cabeçalho aparece acima do próprio formulário.
Se você quiser que o título apareça dentro do contêiner do formulário em vez disso, você pode facilmente habilitar essa opção no 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 .
Você pode querer ocultar o H1 se estiver usando o título do WPForms. Isso pode ser feito simplesmente clicando no H1 e, em seguida, pressionando 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. Você pode Publicar ou Atualizar seu formulário neste momento.
Vamos primeiro analisar o espaçamento padrão entre o título do formulário e o primeiro campo no WPForms. Veja como ele normalmente se parece:
Para alterar este espaçamento, crie um novo snippet no WPCode, como mostrado na etapa 3. Você pode acessá-lo rapidamente indo em Code Snippets » + Add Snippet na barra lateral do seu WordPress.
Aqui está o código para alterar o espaçamento do título de 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. Isso significa que você pode inserir qualquer valor que precisar aqui. Recomendo alterar apenas o valor de margin-bottom neste código e deixar o padding-bottom definido como 0.
Por exemplo, se você quiser que o título apareça com a mesma distância do espaço entre cada campo, você pode usar 15px como valor de margin-bottom. Se quiser criar uma distância maior ou menor que esta, simplesmente aumente ou diminua o valor de margin-bottom em px conforme necessário.
Veja como o título aparece após adicionar o snippet de código acima ao meu formulário de pesquisa.
Se você quiser ajustar este espaçamento para formulários específicos em vez de aplicar alterações globais, você 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 ID# 2294.
wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-title {
margin-bottom: 15px !important;
}
Isso cuida do espaçamento do título do seu formulário. Mas e quanto ao espaçamento entre cada campo?
Abordarei isso 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, vamos primeiro dar uma olhada no espaçamento padrão entre os campos.
Agora, se você quiser aumentar ou reduzir este espaço, você pode criar um novo snippet CSS seguindo os mesmos passos mostrados aqui.
Só que desta vez, o código que você precisa se parece com isto:
.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.
Você pode ajustar o espaço livremente alterando o valor de px da propriedade padding-top.
Mais uma vez, se você quiser modificar apenas os espaçamentos dos campos para um formulário individual, você precisará 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 você usou acima.
Por padrão, o espaçamento para o botão de envio no WPForms aparece assim:
O código que você precisa para ajustar o padding do botão de envio é:
.wpforms-container .wpforms-submit-container {
padding-top: 30px !important;
}
Após ativar este código, você verá o padding aumentado em vigor para o botão de envio do seu formulário:
Isso foi bem simples, não foi?
Sinta-se à vontade para usar os códigos CSS para forçar um espaço no WPForms como achar melhor!
Em seguida, Aplique Estilos Avançados de Formulário
Ajustar as margens e o padding em seus formulários é uma das poucas coisas que requer código. Mas o WPForms permite que você personalize os estilos do seu formulário em detalhes extensivos sem nenhum código, na maior parte do tempo.
Você pode alterar a aparência de seus campos, rótulos, botões e muito mais com controles intuitivos de apontar e clicar. Veja nosso guia sobre estilização de formulários com o editor de blocos para uma visão geral abrangente.
Crie Seu Formulário WordPress Agora
Pronto para construir seu formulário? Comece hoje mesmo com o plugin construtor 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.
