Resumo de IA
Gostaria de fazer alterações na aparência do campo Data / Hora nos seus formulários WordPress? O campo Data / Hora é uma forma fácil e intuitiva de permitir que os seus utilizadores agendem compromissos e muito mais.
Este tutorial mostrar-lhe-á como adaptar este campo no WPForms.
Antes de mergulhar no tutorial abaixo, certifique-se de que o WPForms está instalado e ativado no seu site. Em seguida, verifique a sua licença se ainda não o fez.
Também precisará de criar um novo formulário ou abrir um existente para edição e adicionar um campo Data / Hora a ele. Assim que o fizer, clique no campo na área de pré-visualização do construtor para abrir o seu painel de Opções de Campo.
Editar o Rótulo e a Descrição do Campo
Nas opções do campo Data / Hora, pode personalizar os rótulos dos campos e a sua visibilidade, bem como adicionar uma descrição.
Personalizar o Rótulo do Campo e os Sub-rótulos
Por defeito, o rótulo do campo será Data / Hora. Adicionalmente, se tiver os sub-campos de Data e Hora exibidos, haverá também um sub-rótulo abaixo de cada campo.
Pode personalizar o rótulo do campo inserindo o seu texto no campo fornecido.
Os sub-rótulos de Data e Hora não são personalizáveis.
Ocultar o Rótulo do Campo e os Sub-rótulos
Pode remover quaisquer rótulos do seu campo Data / Hora a partir do painel de Opções de Campo. Para o fazer, clique em Avançado, depois percorra até ao fundo do painel e ative as definições Ocultar Rótulo e Ocultar Sub-rótulos.
Adicionar uma Descrição
Também pode adicionar uma descrição ao seu campo Data / Hora para fornecer mais contexto ou informação aos seus utilizadores. 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.
Exibição da Data, Hora ou Ambas
Dentro do campo Data / Hora, tem a opção de exibir apenas o sub-campo Data, apenas o sub-campo Hora, ou ambos os sub-campos.
Pode alterar qual(is) sub-campo(s) deseja exibir usando o menu suspenso Formato no painel de Opções de Campo.
Dentro deste menu suspenso, pode escolher entre as seguintes opções:
- Data e Hora
- Data
- Hora
Tornar o Campo Obrigatório
Para garantir que os seus utilizadores selecionem uma data ou hora antes de submeter o seu formulário, ative a definição Obrigatório nas opções do campo.
Selecionar um Tamanho de Campo
A opção Tamanho do Campo encontra-se no separador Avançadas do painel Opções do Campo. Determina a largura dos subcampos de Data e Hora. Pode selecionar entre Pequeno, Médio ou Grande.
Esta opção é especialmente útil ao configurar um formulário de várias colunas.
Alterar a Exibição da Data
Existem várias opções de exibição que pode personalizar para o subcampo Data: Tipo, Placeholder e Formato. Para aceder a estas opções, abra o separador Avançadas no painel Opções do Campo.
Tipo
O subcampo Data tem dois tipos de exibição diferentes entre os quais pode escolher: Seletor de Data ou Lista Suspensa de Datas.
Seletor de Data
A opção Seletor de Data criará um popup de calendário a partir do qual os seus utilizadores podem selecionar uma data.
Lista Suspensa de Datas
A opção Lista Suspensa de Datas mostrará 3 listas suspensas a partir das quais os utilizadores podem selecionar valores para o mês, dia e ano.
Marcador
A opção Placeholder permite-lhe definir texto de placeholder que será exibido no campo Data / Hora se utilizar o tipo Seletor de Data.
Pode personalizar este texto para adicionar mais clareza aos seus formulários, como direcionar os utilizadores para selecionar uma data. Basta introduzir o seu placeholder no campo fornecido no separador Avançadas do painel Opções do Campo.
Formato
Por defeito, o subcampo Data tem várias opções incorporadas sobre como 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 que acima, mas usando pontos em vez de barras como separador.
- Mês, Dia, Ano: Formata a data numa string contendo o Mês, Dia e Ano completos.
Selecione o seu formato preferido na lista suspensa.
Alterar a Exibição da Hora
O subcampo Hora também tem opções que pode personalizar, incluindo o Intervalo, Placeholder e Formato.
Intervalo
Esta definição permite-lhe escolher em que intervalos as opções de hora aparecem. As opções incorporadas para esta definição permitem que as horas sejam exibidas em incrementos de 15, 30 ou 60 minutos.
Por defeito, o intervalo será definido para 30 minutos. Utilize a lista suspensa no separador Avançadas do painel Opções do Campo para o alterar, se desejar.
Marcador
A opção Placeholder permite definir um texto de exemplo que aparecerá no subcampo Hora quando os seus utilizadores abrirem o seu formulário. Por exemplo, pode usar esta configuração para instruir os seus utilizadores a selecionar uma hora.
Para personalizar o placeholder da Hora, basta introduzir o texto desejado no campo fornecido no separador Avançadas do painel Opções do Campo.
Formato
O subcampo Hora tem duas opções diferentes para a formatação da hora: 12 horas ou 24 horas.
Formato 12h
A escolha de um 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.
Limitar Datas e Horas Disponíveis
Se desejar mais controlo sobre as datas que os seus utilizadores podem escolher, pode personalizar as opções disponíveis de várias formas, incluindo limitar os dias disponíveis, desativar datas passadas e limitar as horas disponíveis. Estas configurações estão todas disponíveis nas opções de campo Avançadas.
Limitar Dias Disponíveis
Para escolher quais os dias da semana disponíveis para os seus utilizadores selecionarem, ative a configuração Limitar Dias.
Isto revelará um conjunto de caixas de verificação para os dias da semana. Se quiser impedir que os utilizadores escolham um dia específico da semana, basta desmarcar a sua caixa para o desativar.
Desativar Datas Passadas
Além de limitar os dias disponíveis, também pode impedir que os utilizadores selecionem datas passadas nos seus formulários. Para o fazer, ative a configuração rotulada Desativar Datas Passadas.
Quando uma data é desativada, ficará esbatida no seu site e não será clicável.
Limitar Horas Disponíveis
Se desejar, pode personalizar as horas que os seus utilizadores podem selecionar nos seus formulários. Para o fazer, ative a opção Limitar Horas.
Isto revelará menus pendentes para a Hora de Início e Hora de Fim das suas horas disponíveis. Escolha as suas horas preferidas para definir o intervalo disponível.
No frontend do seu site, apenas as horas entre a Hora de Início e a Hora de Fim selecionadas estarão disponíveis para os seus utilizadores escolherem.
É tudo! Agora pode personalizar o campo Data / Hora para todos os seus formulários.
Em seguida, gostaria de saber mais sobre as opções de personalização avançadas disponíveis para outros tipos de campos no WPForms? Consulte os nossos tutoriais sobre os campos Dropdown, Checkboxes e Múltipla Escolha para obter todos os detalhes!