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 isto, cada sítio Web é único. Por isso, se pretender definir espaçamentos personalizados entre campos para um melhor alinhamento com o seu estilo específico, está no sítio certo.
Neste artigo, vou mostrar-lhe passo a passo como pode forçar o espaço entre campos no WPForms. Embora precise de trabalhar com um pouco de código aqui, não precisa de ter qualquer conhecimento prévio de codificação 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ários, vai precisar dos plug-ins certos para tornar esta tarefa o mais fácil possível.
Configuração inicial: Espaçamento de formulário com código
Comecemos por instalar os plug-ins necessários no seu sítio Web.
Passo 1: Instalar o WPForms e o WPCode
Esse método funciona tanto para a versão Lite quanto para a versão Pro do WPForms. Mas eu recomendo obter o WPForms Pro porque 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.
Depois de comprar o WPForms Pro, vá em frente e instale o plugin no seu site. Aqui está um guia detalhado sobre a instalação do WPForms.
Em seguida, também vai precisar do plugin WPCode. Este é um plugin gratuito que torna incrivelmente fácil adicionar trechos de código ao seu site.
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 a partir do repositório do WordPress. Aqui está a versão rápida do processo.
No menu de administração do WordPress, aceda a Plugin " Adicionar novo.
Isto levá-lo-á para o ecrã de plugins. Utilize a caixa de pesquisa do lado direito para procurar o WPCode. Quando a listagem de plugins aparecer no ecrã, clique no botão Instalar agora junto ao mesmo.
A instalação demorará apenas alguns segundos e o botão Instalar mudará para Ativar. Prima o botão Ativar para concluir a instalação do plug-in no seu sítio.
Ótimo! Com os plug-ins necessários instalados, podemos passar ao ajuste dos 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, é provável que já tenha criado e publicado um ou mais formulários no seu site.
Mas, caso não o tenha feito, pode seguir este guia fácil para criar um formulário de contacto simples.
Para fins ilustrativos, estou a utilizar este modelo de formulário de inquérito já pronto.
Certifique-se de que incorpora e publica o seu formulário (ou, pelo menos, guarda uma versão de rascunho do mesmo no editor do WordPress). Só é possível personalizar o espaçamento num formulário que já esteja incorporado no seu site.
Também precisa de saber o ID do formulário para o qual pretende personalizar os espaçamentos. 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 no Código curto dentro das aspas duplas. No meu caso, o ID do formulário é 2294.
Ótimo! Mas você ainda deve estar se perguntando como inserir o código para modificar o espaçamento do WPForms. Vou descrever isso a seguir.
Etapa 3: Inserindo código para espaçamento de formulário
Antes de usar os códigos, é importante saber como 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 snippet, basta ir a Code Snippets " + Add Snippet.
Em seguida, clique no botão Usar snippet na opção Adicionar seu código personalizado (novo snippet).
Deve agora estar num novo ecrã, onde pode dar um título ao seu snippet e escrever o seu código personalizado (ou simplesmente copiar e colar os que partilharei na próxima secção).
Uma vez que todos os códigos para controlar o espaçamento num formulário são CSS, certifique-se de que seleciona Snippet CSS no menu pendente Tipo de código.
Depois disso, só tem de adicionar o seu fragmento de código e selecionar o método de inserção. As definições de inserção podem ser alteradas numa secção por baixo da Pré-visualização de código. Mas não deve ser necessário alterar as definições predefinidas para nenhum dos códigos discutidos nesta publicação.
Mais importante ainda, lembre-se de guardar o seu snippet e de o ativar depois de adicionar o seu código personalizado. Não verá o código entrar em vigor até ser ativado utilizando o botão de alternância no canto superior direito.
Excelente! Agora 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 entre formulários
Agora estamos prontos para começar a criar os trechos de código CSS que controlam os espaçamentos dos diferentes elementos do formulário.
Modificação do espaço entre o título do formulário e o primeiro campo
Vamos falar sobre títulos de formulários! Por padrão, o WPForms usa o cabeçalho H1 da sua página como o título do formulário. Este título aparece acima do próprio formulário.
Se, em vez disso, quiser que o título apareça dentro do contentor do formulário, pode facilmente ativar essa opção no editor de blocos do WordPress.
Clique no formulário incorporado no seu editor para abrir aberturas adicionais no painel do lado 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 WPForms. Para tal, basta clicar no H1 e premir o ícone do olho quando este aparecer.
Agora, estamos prontos para alterar o espaçamento entre o título e o primeiro campo do formulário. Nesta altura, pode Publicar ou Atualizar o seu formulário.
Vamos primeiro olhar para o espaçamento padrão entre o título do formulário e o primeiro campo no WPForms. Aqui está o que normalmente parece:
Para alterar esse espaçamento, crie um novo snippet no WPCode, como mostrado no passo 3. Pode aceder rapidamente a esta opção indo a Code Snippets " + Add Snippet 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 de que os valores de preenchimento e margem são variáveis. Isto significa que pode introduzir aqui qualquer valor de que necessite. Recomendo que altere apenas o valor margin-bottom neste código e deixando o valor 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 utilizar 15px como margin-bottom valor. Se pretender criar uma distância maior ou menor do que esta, basta aumentar ou diminuir o margin-bottom px conforme necessário.
Veja como o título aparece depois de adicionar o snippet de código acima ao meu formulário de questionário.
Se pretender 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 em que está interessado.
Por exemplo, eis 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;
}
Isso resolve o problema do espaçamento do título do formulário. Mas e o espaçamento entre cada campo?
Abordarei este assunto de seguida.
Modificar o espaçamento para todos os campos
O intervalo 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 predefinido entre os campos.
Agora, se quiser aumentar ou reduzir este intervalo, pode criar um novo fragmento de CSS seguindo os mesmos passos mostrados aqui.
Só que, desta vez, o código de que precisa tem o seguinte aspeto:
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container .wpforms-field {
padding-top: 100px !important;
}
O resultado é uma forma mais alongada, com um intervalo maior entre cada campo sucessivo.
Pode ajustar o intervalo livremente, alterando o valor px do padding-top propriedade.
Mais uma vez, se apenas pretender modificar os espaçamentos de campo 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 Enviar
Alterar o intervalo entre o último campo e o botão de submissão é tão fácil como os códigos que utilizou acima.
Por predefinição, o espaçamento do botão de submissão no WPForms é apresentado da seguinte forma:
O código de que necessita para ajustar o preenchimento do botão de submissão é:
.wpforms-container .wpforms-submit-container {
padding-top: 30px !important;
}
Depois de ativar este código, verá que o aumento do preenchimento entra em vigor no botão de envio do formulário:
Isso foi muito simples, não foi?
Pode usar os códigos CSS para forçar um espaço no WPForms como achar melhor!
Em seguida, aplique estilos de formulário avançados
Ajustar as margens e o padding nos seus formulários é uma das poucas coisas que requerem código. Mas o WPForms permite-lhe personalizar os estilos dos seus formulários com grande detalhe, sem qualquer código na maior parte das vezes.
Pode alterar o aspeto dos seus campos, etiquetas, botões e muito mais com controlos intuitivos de apontar e clicar. Consulte o nosso guia sobre o estilo de formulários com o editor de blocos para obter uma visão geral abrangente.
Crie o seu formulário WordPress agora
Pronto para criar o seu formulário? Comece hoje mesmo com o plugin de criação de formulários mais fácil do WordPress. O WPForms Pro inclui muitos modelos gratuitos e oferece uma garantia de reembolso de 14 dias.
Se este artigo o ajudou, siga-nos no Facebook e no Twitter para mais tutoriais e guias gratuitos do WordPress.
