Resumo de IA
Gostaria de fazer alterações na aparência do campo de Data/Hora em seus formulários WordPress? O campo de Data/Hora é uma maneira fácil e intuitiva de permitir que seus usuários agendem compromissos e muito mais.
Este tutorial mostrará como personalizar este campo no WPForms.
Antes de mergulhar no tutorial abaixo, certifique-se de que o WPForms esteja instalado e ativado em seu site. Em seguida, verifique sua licença se ainda não o fez.
Você também precisará criar um novo formulário ou abrir um existente para edição e adicionar um campo de Data/Hora a ele. Depois de fazer isso, clique no campo na área de visualização do construtor para abrir o painel Opções do Campo.
Editando o Rótulo e a Descrição do Campo
Nas opções do campo Data/Hora, você pode personalizar os rótulos dos campos e sua visibilidade, além de adicionar uma descrição.
Personalizando o Rótulo do Campo e os Subrótulos
Por padrão, o rótulo do campo será Data/Hora. Além disso, se você tiver os subcampos de Data e Hora exibidos, haverá também um subrótulo abaixo de cada campo.
Você pode personalizar o rótulo do campo inserindo seu texto no campo fornecido.
Os subrótulos de Data e Hora não são personalizáveis.
Ocultando o Rótulo do Campo e os Subrótulos
Você pode remover qualquer um dos rótulos do seu campo Data/Hora dentro do painel Opções do Campo. Para fazer isso, clique em Avançado, depois role até o final do painel e ative as configurações Ocultar Rótulo e Ocultar Subrótulos.
Adicionando uma Descrição
Você também pode adicionar uma descrição ao seu campo Data/Hora para fornecer mais contexto ou informações aos seus usuários. Basta inserir o texto desejado no campo fornecido nas opções gerais do campo.
Esta descrição aparecerá diretamente abaixo das caixas de entrada no frontend do seu site.
Exibindo a Data, Hora ou Ambas
Dentro do campo Data/Hora, você tem a opção de exibir apenas o subcampo Data, apenas o subcampo Hora ou ambos os subcampos.
Você pode alterar quais subcampos deseja exibir usando o menu suspenso Formato no painel Opções do Campo.
Dentro deste menu suspenso, você pode escolher entre as seguintes opções:
- Data e Hora
- Data
- Hora
Exigindo o Campo
Para garantir que seus usuários precisem selecionar uma data ou hora antes de enviar seu formulário, ative a configuração Obrigatório nas opções do campo.
Selecionando o Tamanho do Campo
A opção Tamanho do Campo está na aba Avançado do painel Opções do Campo. Ela determina a largura dos subcampos de Data e Hora. Você pode escolher entre Pequeno, Médio ou Grande.
Esta opção é especialmente útil ao configurar um formulário de várias colunas.
Alterando a Exibição da Data
Existem várias opções de exibição que você pode personalizar para o subcampo de Data: Tipo, Placeholder e Formato. Para acessar essas opções, abra a aba Avançado no painel Opções do Campo.
Tipo
O subcampo de Data tem dois tipos de exibição diferentes entre os quais você pode escolher: Seletor de Data ou Dropdown de Data.
Seletor de Data
A opção Seletor de Data criará um pop-up de calendário a partir do qual seus usuários podem selecionar uma data.
Dropdown de Data
A opção Dropdown de Data mostrará 3 dropdowns a partir dos quais os usuários podem selecionar valores para o mês, dia e ano.
Marcador de Posição
A opção Placeholder permite que você defina um texto de placeholder que será exibido no campo Data / Hora se você usar o tipo Seletor de Data.
Você pode personalizar este texto para adicionar mais clareza aos seus formulários, como direcionar os usuários a selecionar uma data. Basta inserir seu placeholder no campo fornecido na aba Avançado do painel Opções do Campo.
Formato
Por padrão, o subcampo de Data tem várias opções integradas de como ele pode formatar uma data. Estas incluem:
- M/D/A: Formata a data numericamente por Mês/Dia/Ano.
- D/M/A: Formata a data numericamente por Dia/Mês/Ano.
- A/M/D: Formata a data numericamente por Ano/Mês/Dia.
- M.D.A, D.M.A, A.M.D: Os mesmos formatos acima, mas usando pontos em vez de barras como separador.
- Mês, Dia, Ano: Formata a data em uma string contendo o Mês, Dia e Ano completos.
Selecione seu formato preferido no dropdown.
Alterando a Exibição da Hora
O subcampo de Hora também possui opções que você pode personalizar, incluindo Intervalo, Placeholder e Formato.
Intervalo
Esta configuração permite que você escolha em quais intervalos as opções de hora aparecem. As opções integradas para esta configuração permitem que os horários sejam exibidos em incrementos de 15, 30 ou 60 minutos.
Por padrão, o intervalo será definido como 30 minutos. Use o dropdown na aba Avançado do painel Opções do Campo para alterá-lo, se desejar.
Marcador de Posição
A opção Placeholder permite definir um texto de exemplo que aparecerá no subcampo Hora quando seus usuários abrirem seu formulário. Por exemplo, você pode usar esta configuração para instruir seus usuários a selecionar um horário.
Para personalizar o placeholder de Hora, basta inserir o texto desejado no campo fornecido na aba Avançado do painel Opções do Campo.
Formato
O subcampo Hora possui duas opções diferentes para a formatação do horário: 12 horas ou 24 horas.
Formato 12h
A escolha do formato de 12 horas mostrará as horas disponíveis de 12:00am a 12:00pm.
Formato 24h
O formato de 24 horas mostrará as horas disponíveis de 0:00 a 23:00.
Limitando Datas e Horas Disponíveis
Se você deseja mais controle sobre quais datas seus usuários podem escolher, pode personalizar as opções disponíveis de várias maneiras, incluindo limitar os dias disponíveis, desabilitar datas passadas e limitar as horas disponíveis. Todas essas configurações estão disponíveis nas opções avançadas do campo Avançado.
Limitando Dias Disponíveis
Para escolher quais dias da semana estão disponíveis para seus usuários selecionarem, ative a configuração Limitar Dias.
Isso revelará um conjunto de caixas de seleção para os dias da semana. Se você quiser impedir que os usuários escolham um dia específico da semana, basta desmarcar a caixa correspondente para desabilitá-lo.
Desabilitando Datas Passadas
Além de limitar os dias disponíveis, você também pode impedir que os usuários selecionem datas passadas em seus formulários. Para fazer isso, ative a configuração rotulada Desabilitar Datas Passadas.
Quando uma data é desabilitada, ela ficará acinzentada em seu site e não será clicável.
Limitando Horas Disponíveis
Se desejar, você pode personalizar quais horas seus usuários podem selecionar em seus formulários. Para fazer isso, ative a opção Limitar Horas.
Isso revelará menus suspensos para a Hora de Início e Hora de Fim de suas horas disponíveis. Escolha seus horários preferidos para definir o intervalo disponível.
No frontend do seu site, apenas os horários entre a Hora de Início e a Hora de Fim selecionadas estarão disponíveis para seus usuários escolherem.
É isso! Agora você pode personalizar o campo Data/Hora para todos os seus formulários.
Em seguida, você gostaria de aprender sobre as opções avançadas de personalização disponíveis para outros tipos de campo no WPForms? Confira nossos tutoriais sobre os campos Dropdown, Checkboxes e Múltipla Escolha para todos os detalhes!