Resumo de IA
Você gostaria de algumas opções fáceis de usar para personalizar os campos do seu formulário? Cada campo do WPForms vem com várias maneiras integradas para você criar formulários que atendam às suas necessidades específicas.
Este tutorial discutirá as muitas opções disponíveis para personalizar campos em seus formulários.
Antes de começar, certifique-se de que o WPForms esteja instalado e ativado em seu site. Em seguida, você precisará criar um novo formulário ou editar um existente.
Opções Gerais de Campo
Uma vez que o construtor de formulários esteja aberto, você pode adicionar, remover e editar campos. Para abrir as opções de um campo, basta clicar nele na área de visualização.
Alterando o Texto do Rótulo do Campo
Quando você adiciona um campo ao seu formulário pela primeira vez, o rótulo corresponderá ao tipo de campo (por exemplo, "Caixas de Seleção" ou "Múltiplos Itens"). No entanto, você pode editar o texto do Rótulo e torná-lo o que quiser.
Adicionando Texto de Descrição
Você também pode optar por adicionar texto de Descrição aos seus campos de formulário.
Este texto será exibido abaixo da área de entrada.
Para mais detalhes, consulte nosso tutorial sobre como adicionar texto extra aos seus formulários.
Exigindo um Campo
Abaixo da opção Descrição, você pode ativar a opção Obrigatório para tornar um campo obrigatório.
Se um usuário pular um campo obrigatório e tentar enviar o formulário, uma mensagem de validação será exibida, lembrando-o de preencher esse campo.
Observação: Você sabia que pode personalizar o texto da mensagem de validação? Para detalhes, consulte nosso tutorial sobre mensagens de validação.
Opções Avançadas de Campo
As Opções Avançadas de Campo oferecem ainda mais configurações de personalização para seus campos. Para localizá-las, você precisará clicar na guia Avançado.
Selecionando o Tamanho do Campo
A maioria dos campos incluirá uma opção para alterar o tamanho do campo, o que pode ser super útil ao personalizar a aparência de seus formulários.
Se esta opção estiver disponível para o tipo de campo que você está editando, você verá um menu suspenso Tamanho do Campo. As opções incluirão Pequeno, Médio e Grande.
Na maioria dos casos, o Tamanho do Campo determinará a largura do campo dentro do seu formulário.
No entanto, há uma exceção para 2 campos. Para campos de Texto de Parágrafo e Texto Rico, o Tamanho do Campo definirá a altura da área de entrada.
Observação: Se você quiser colocar mais de um campo na mesma linha, consulte nosso tutorial sobre layouts de formulário com várias colunas.
Adicionando Texto de Placeholder
Muitos campos permitirão que você adicione Texto de Exemplo, que é exibido até que o usuário comece a digitar seu próprio texto.
Você pode usar texto de exemplo para fornecer instruções ou até mesmo para alterar o design de um formulário. Se você quiser saber mais, compartilhamos detalhes e exemplos adicionais em nosso tutorial de texto de exemplo.
Definindo um Valor Padrão
Em alguns casos, você pode querer que partes de um formulário sejam pré-preenchidas para os usuários. Dessa forma, você pode economizar um pouco de esforço dos usuários, mas eles ainda podem alterar a entrada ou seleção, se necessário.
Se esta opção estiver disponível para o tipo de campo que você está editando, você verá um campo Valor Padrão na guia Avançado.
Para mais detalhes e exemplos, incluindo padrões para campos de Caixa de Seleção e Múltipla Escolha, certifique-se de conferir nosso guia sobre como adicionar valores padrão aos campos.
Observação: Deseja puxar dados do usuário ou informações do seu site para seus formulários como valores padrão? Confira nosso tutorial sobre como usar Smart Tags para aprender como.
Adicionando Classes CSS Personalizadas
Você pode personalizar facilmente a aparência do campo do seu formulário para que ele fique como você deseja. Para fazer isso, basta inserir os nomes das classes CSS para o campo do formulário no campo de texto Classes CSS. Para várias classes, separe os nomes das classes com espaços.
Para um guia mais detalhado, certifique-se de conferir nosso tutorial sobre como usar suas próprias classes CSS personalizadas também.
Observação: Recomendamos o uso do campo Layout para uma abordagem mais simples de arrastar e soltar para construir layouts avançados de várias colunas. No entanto, as classes CSS de layout abordadas neste tutorial ainda são suportadas.
Ocultando o Rótulo de um Campo
Se você deseja um formulário mais compacto ou simplificado, pode considerar ocultar os rótulos dos seus campos.
Para fazer isso, você precisará ativar a opção Ocultar Rótulo.
Observação: Se você optar por ocultar os rótulos dos campos, certifique-se de inserir um nome relevante no rótulo do campo. Como o rótulo ainda aparecerá nos seus detalhes de entrada, isso o ajudará a identificar cada campo.
Definindo um Campo como Somente Leitura
Se você deseja exibir informações em seu formulário sem permitir que os usuários as editem, você pode tornar o campo somente leitura. Esta opção está disponível para a maioria dos campos no WPForms.
Para ativá-la, ative a opção Somente Leitura.
Quando esta opção estiver ativada, o campo permanecerá visível em seu formulário, mas os usuários não poderão alterar seu valor. Os dados ainda serão incluídos na entrada do formulário quando ela for enviada.
Para mais detalhes e casos de uso adicionais, confira nosso tutorial sobre como definir campos como somente leitura.
Observação: Campos somente leitura são especialmente úteis para mostrar valores pré-preenchidos, como detalhes do usuário adicionados com Smart Tags, ou para exibir totais e outras informações que não devem ser alteradas.
Opções Especiais para Campos de Caixa de Seleção e Múltipla Escolha
Abaixo, discutiremos algumas opções adicionais disponíveis especificamente para campos de Caixa de Seleção e Múltipla Escolha.
Adicionando Opções de Imagem
Você pode facilmente adicionar imagens a qualquer campo de Caixas de seleção, Múltipla escolha, Itens de caixa de seleção ou Itens múltiplos. Para fazer isso, basta ativar a opção Usar escolhas de imagem.
Após ativar esta configuração, você poderá carregar imagens para cada opção dentro do seu campo.
Para mais detalhes, consulte nosso tutorial sobre como adicionar escolhas de imagem aos seus formulários.
Adicionando Escolhas de Ícone
Você também pode adicionar ícones a qualquer uma das escolhas em um campo de Caixas de seleção, Múltipla escolha, Itens de caixa de seleção ou Itens múltiplos. Para habilitar este recurso, ative a opção Usar escolhas de ícone.
Depois de habilitar as escolhas de ícone, você verá ícones padrão adicionados a cada escolha em seu campo de Múltipla escolha. Ao clicar no ícone padrão, um Seletor de Ícones aparecerá onde você pode escolher entre mais de 2.000 ícones.
Para saber mais sobre escolhas de ícone, confira nosso tutorial sobre como usar escolhas de ícone no WPForms.
Randomizando Opções
Randomizar as opções que você fornece pode ajudar a evitar viés de ordem, o que é especialmente benéfico se você estiver usando nosso addon de Pesquisas e Enquetes.
Na aba Avançado de qualquer campo de Caixas de seleção ou Múltipla escolha, você pode ativar a opção Randomizar Escolhas .
Exibindo Escolhas Dinâmicas
A opção Escolhas Dinâmicas é super útil se você quiser que as escolhas em um campo de Caixas de seleção, Múltipla escolha ou Suspenso sejam os nomes de páginas, posts, categorias ou tags do seu site. Quando habilitada, esta opção irá preencher automaticamente as escolhas para o campo (e mantê-las atualizadas se você adicionar ou remover conteúdo ou taxonomias).
Para configurar esta opção, abra a aba Avançado e selecione opções nos menus suspensos Escolhas Dinâmicas e Fonte Dinâmica.
Para mais detalhes, consulte nosso tutorial sobre como configurar escolhas dinâmicas.
Pronto! Agora você pode personalizar seus campos de formulário com toneladas de opções integradas no WPForms.
Em seguida, você gostaria de adicionar lógica inteligente para personalizar ainda mais seus formulários? Certifique-se de conferir nosso tutorial sobre lógica condicional para detalhes e muitos exemplos.