Resumo de IA
Precisa coletar datas de visitantes do site? Você provavelmente já sabe que campos de texto padrão para datas criam caos. Os clientes geralmente inserem datas em formatos diferentes (12/25/2025 vs 25/12/2025 vs 25 de dezembro de 2025).
Isso leva a erros de reserva, compromissos perdidos e, eventualmente, clientes frustrados. Um seletor de data adequado resolve isso, fornecendo uma interface de calendário visual que funciona da mesma forma em todos os dispositivos.
Neste guia, mostrarei como adicionar formulários profissionais de seletor de data ao WordPress usando o campo e a funcionalidade avançados de seletor de data/hora do WPForms, além de algumas dicas se você quiser personalizá-lo.
Crie Seu Formulário de Seletor de Data Agora! 🙂
Como Criar um Formulário WordPress com Seletor de Data
Usando o WPForms, é super simples adicionar um campo que permite às pessoas selecionar uma data específica, hora ou ambos. Aqui está um tutorial passo a passo sobre como criar um formulário WordPress com um Seletor de Data/Hora:
Se você preferir instruções escritas para adicionar um seletor de data WordPress aos seus formulários, veja as etapas abaixo:
- Etapa 1: Crie um Formulário WordPress com WPForms
- Etapa 2: Adicione o Seletor de Data ao Seu Formulário WordPress
- Etapa 3: Personalizações Avançadas do Seletor de Data do WPForms
- Etapa 4: Personalizações Avançadas do Campo de Hora do WPForms
- Etapa 5: Configure as Definições do Seu Formulário de Seletor de Data
- Etapa 6: Configure as Notificações do Seu Formulário
- Etapa 7: Adicione o Formulário de Seletor de Data WordPress ao Seu Site
Etapa 1: Crie um Formulário WordPress com WPForms
A primeira coisa que você precisará fazer é instalar e ativar o plugin WPForms. Você precisará de uma versão paga do plugin, pois o campo Seletor de Data/Hora não está disponível na versão gratuita.
Este poderoso campo inclui recursos avançados como restrições de data, horários e formatação personalizada que plugins básicos não conseguem igualar.
Para mais detalhes, veja este guia passo a passo sobre como instalar um plugin no WordPress. Depois de comprar e instalar o plugin WPForms, vá para WPForms » Adicionar Novo para criar um novo formulário.
Na tela de configuração, nomeie seu formulário e selecione o modelo de formulário que deseja usar. O ótimo é que o WPForms vem com mais de 2.100 modelos de formulários WordPress.
No meu exemplo, usarei o modelo Formulário de Contato Simples. Depois de selecionado, também mostrarei como personalizar este formulário e adicionar o campo seletor de data a ele.
Etapa 2: Adicione o Seletor de Data ao Seu Formulário WordPress
Você pode adicionar campos adicionais ao seu modelo de formulário selecionado usando o editor de arrastar e soltar simples do WPForms. Então, vamos prosseguir e arrastar o campo Data/Hora para o seu formulário, onde você quiser.
Quando estiver no seu formulário, você pode arrastá-lo para cima e para baixo para colocá-lo em outro lugar e clicar no campo novamente para abrir suas configurações e personalizá-lo. Ao clicar no campo de formulário Data / Hora, você verá as seguintes opções:
- Rótulo: Este é o título do campo que os visitantes do site verão em seu formulário.
- Formato: Escolha se você deseja que este campo inclua data e hora, apenas data ou apenas hora.
- Descrição: Adicione uma descrição para o campo. Este é um bom local para adicionar instruções ou detalhes para seus usuários.
- Obrigatório: Ative este botão de alternância para impedir que os usuários enviem o formulário até que este campo seja preenchido.
Se você rolar para baixo e clicar em Opções Avançadas, poderá personalizar ainda mais o campo Seletor de Data/Hora, como mostraremos abaixo.
Etapa 3: Personalizações Avançadas do Seletor de Data do WPForms
Por padrão, o campo de seleção de data no WPForms está definido no formato de visualização de calendário. Mais amigável para selecionar datas, especialmente em dispositivos móveis. Melhor para:
- Solicitações de férias
- Formulários de agendamento de consultas
- Registro de eventos
- Envio de prazos
Os formatos para o campo Data/Hora são fáceis de alterar no WPForms. Para fazer isso, primeiro clique na guia Avançado em Opções de Campo. Em seguida, você pode personalizar as seguintes opções:
- Tipo: Você pode escolher entre Seletor de Data (a visualização de calendário padrão) ou Suspenso de Data (adiciona campos suspensos separados para o mês, dia e ano).
- Formato: Aqui, você pode selecionar diferentes formatos de data (m/d/a ou d/m/a).
- Limitar Dias: Ative esta opção para selecionar em quais dias da semana os usuários podem escolher.
- Desativar Datas Passadas: Com esta opção, você pode impedir que os usuários selecionem quaisquer datas passadas.
Em seguida, veremos as opções de personalização para a seção Hora do campo Data/Hora no WPForms.
Etapa 4: Personalizações Avançadas do Campo de Hora do WPForms
A seleção de horário é tão importante quanto a seleção de data para criar sistemas de agendamento eficazes. O WPForms oferece controle granular sobre as opções de horário que correspondem ao horário comercial e evitam conflitos de agendamento.
Semelhante às configurações do seletor de data, você pode personalizar as opções para a seção de Horário do campo Data/Hora. Por padrão, o formato de horário é definido como um relógio de 12 horas com intervalos de 30 minutos:
Como antes, você pode alterar as configurações do campo de Horário indo para a aba Avançado em Opções do Campo. Veja como essas configurações se parecem:
- Intervalo: O WPForms permite que você escolha entre intervalos de 15 minutos, 30 minutos e 1 hora para o campo de Horário.
- Formato: Permite escolher entre um relógio de 12 horas ou um relógio de 24 horas.
- Limitar Horários: Defina o intervalo de tempo que os usuários podem selecionar.
Qualquer que seja o formato escolhido, saiba que o campo Seletor de Data/Hora é uma ótima maneira de obter dados precisos em seus formulários. A data sempre será validada e no formato correto dentro do campo Seletor de Data/Hora.
Quer que alguém preencha seu formulário Seletor de Data/Hora apenas uma vez? Se você quiser saber como limitar as entradas para os usuários, confira este tutorial sobre como limitar o número de envios de formulários do WordPress.
Depois de personalizar suas configurações, clique em Salvar.
Etapa 5: Configure as Definições do Seu Formulário de Seletor de Data
As confirmações de formulário são mensagens exibidas às pessoas depois que elas completam seu formulário. As confirmações as informam que o formulário foi processado e oferecem a você a chance de dizer quais passos elas precisam tomar a seguir. O WPForms tem 3 tipos de confirmação para escolher:
- Mensagem: Este é o tipo de confirmação padrão no WPForms. Quando um visitante do site envia seu formulário, uma mensagem simples aparece, informando que o formulário está sendo processado.
- Mostrar Página: Este tipo de confirmação levará as pessoas a uma página específica em seu site agradecendo por preencher o formulário Seletor de Data/Hora e permitirá que você diga o que elas precisam fazer a seguir. Para obter ajuda com isso, confira nosso tutorial sobre redirecionar clientes para uma página de agradecimento.
- Ir para URL (Redirecionar): Esta opção é para quando você deseja enviar as pessoas para uma página específica contendo informações relacionadas que se encontram em um site diferente.
Então, vamos ver como configurar uma confirmação simples no WPForms para que você possa personalizar a mensagem que as pessoas verão ao enviar o formulário de Seleção de Data/Hora. Para começar, clique na guia Confirmação no Editor de Formulários, em Configurações.
Em seguida, personalize a mensagem de confirmação como desejar e clique em Salvar. Para obter ajuda com outros tipos de confirmação, consulte nossa documentação sobre configuração de confirmações de formulário.
Agora, vamos configurar as notificações do seu formulário.
Etapa 6: Configure as Notificações do Seu Formulário
Quer que a data e a hora em que alguém preenche seus formulários sejam enviadas para você imediatamente por e-mail? Vamos configurar as notificações do seu formulário para fazer exatamente isso.
Notificações são uma ótima maneira de enviar e-mails automaticamente para você, seus funcionários e a pessoa que preencheu o formulário. A menos que você desabilite este recurso, sempre que alguém enviar um formulário em seu site, você receberá uma notificação sobre isso.
Se você usar Smart Tags, também poderá receber apenas a data e a hora enviadas em suas notificações de formulário. Para fazer isso, basta adicionar um carimbo de data/hora ao seu e-mail de notificação usando esta smart tag – {date format="m/d/Y"}
Ótimo trabalho! Agora você está pronto para adicionar seu formulário de Seleção de Data/Hora ao seu site.
Etapa 7: Adicione o Formulário de Seletor de Data WordPress ao Seu Site
O WPForms permite que você adicione seus formulários em vários locais, desde posts de blog, páginas, rodapé e sua barra lateral.
Vamos dar uma olhada na opção mais comum: incorporar seu formulário em um post ou página. Clique no botão Incorporar no canto superior direito do construtor de formulários.
Em seguida, clique em Criar Nova Página.
Dê um nome à sua página e, em seguida, selecione Vamos Lá.
Isso o levará ao seu editor de blocos do WordPress para uma nova página com seu formulário já incorporado. Pressione Publicar para publicar seu novo formulário de seleção de data do WordPress.
Parabéns! Seu formulário com um seletor de data agora está publicado.
E aí está! Agora você sabe como adicionar um formulário do WordPress com um seletor de data ao seu site.
Perguntas frequentes sobre como criar um formulário WordPress DatePicker
Aprender a criar um formulário WordPress DatePicker é um tópico de interesse popular entre nossos leitores. Aqui estão as respostas para algumas perguntas comuns sobre isso:
Como adiciono um seletor de data ao WPForms?
Instale o WPForms Pro, depois vá para WPForms » Adicionar Novo para criar um formulário. No construtor de formulários, arraste o campo Data/Hora da biblioteca de campos para o seu formulário.
Você pode personalizar o formato da data, restringir datas passadas, limitar dias disponíveis e definir intervalos de tempo através das configurações do campo. Nenhum código é necessário!
Posso criar um calendário WPForms para agendar consultas?
Sim, o campo seletor de data do WPForms funciona perfeitamente para agendamento de consultas. Você pode desabilitar datas passadas, restringir agendamentos a dias específicos da semana, definir horários disponíveis e limitar horas para disponibilidade de consultas.
Para sistemas de agendamento avançados, combine o seletor de data com lógica condicional para mostrar diferentes horários com base nos tipos de serviço ou disponibilidade de pessoal.
Como personalizo o formato do datepicker do WordPress?
No WPForms, clique no seu campo Data/Hora e, em seguida, vá para Opções Avançadas.
Você pode escolher entre diferentes formatos de data (m/d/a, d/m/a ou formatos personalizados), selecionar exibição de hora de 12 ou 24 horas e definir intervalos de tempo de 15 minutos a 1 hora.
O datepicker se adapta automaticamente ao formato escolhido e valida a entrada do usuário para evitar erros de formatação.
Posso desabilitar datas passadas em formulários de datepicker do WordPress?
Com certeza. Nas configurações do campo Data/Hora do WPForms, ative Desabilitar Datas Passadas para impedir que os usuários selecionem datas que já passaram.
Isso é essencial para formulários de reserva, registros de eventos e envio de prazos. Você também pode usar Limitar Dias para restringir seleções a dias específicos da semana.
Como adiciono horários a formulários de datepicker do WordPress?
O WPForms inclui personalização de campo de hora integrada. Nas configurações do campo Data/Hora, vá para Opções Avançadas e configure o intervalo de tempo (15, 30 ou 60 minutos), defina o formato de hora (12 ou 24 horas) e limite as horas disponíveis.
Por exemplo, você pode restringir reservas para 9h às 17h apenas em dias de semana. O seletor de horário exibe automaticamente apenas os horários disponíveis para os clientes.
Qual a diferença entre Date Picker e Date Dropdown no WPForms?
Date Picker exibe um calendário visual que os usuários clicam para selecionar datas. É mais amigável e reduz erros.
Date Dropdown mostra menus suspensos separados para mês, dia e ano. É mais compacto, mas requer mais cliques.
Para a maioria dos formulários, o Date Picker (visualização de calendário) oferece melhor experiência ao usuário e maiores taxas de conclusão, especialmente em dispositivos móveis.
Posso integrar o datepicker do WPForms com o WooCommerce?
Embora os datepickers do WPForms funcionem bem para coletar datas em formulários, para seleção de datas específicas de produtos em páginas do WooCommerce, você precisará de plugins dedicados de datepicker para WooCommerce.
No entanto, você pode usar o WPForms para coleta de datas relacionadas ao WooCommerce, como formulários de pedidos personalizados, preferências de data de entrega ou compras de ingressos para eventos que exigem informações adicionais além das opções padrão de produtos.
Próximo, Experimente Modelos de Formulário Empresarial
Precisa determinar a duração entre datas? Saiba como calcular o número de dias entre duas datas no WPForms. Perfeito para formulários de reserva de aluguel, cronogramas de projetos ou formulários de solicitação de férias onde você precisa mostrar a duração automaticamente.
Para reservas complexas, considere dividir seu formulário em várias etapas. Nosso tutorial de formulário de várias etapas mostra como criar formulários de agendamento que coletam informações de contato primeiro, depois a disponibilidade e, em seguida, os detalhes do serviço. Essa abordagem aumenta as taxas de conclusão em 67% para formulários de reserva mais longos.
Crie seu formulário WordPress agora
Pronto para criar seu formulário? Comece hoje mesmo com o plugin de criação 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.
Mas como fazer um horário não ficar mais disponível depois de escolhido? Criei um datepicker de formulário e várias pessoas podem escolher a mesma data e hora.
Oi Sabrina,
Não temos um recurso de inventário de datas que acompanhe as datas já escolhidas e exiba as datas não escolhidas. Adicionei seu voto para considerar esta solicitação de recurso para aprimoramentos futuros.
Obrigado pela sugestão! 🙂
Eu preciso dessa opção!
Em nenhum momento você menciona que temos que pagar $49 para usar qualquer tipo de opção de data. Obrigado por perder o tempo de todos.
Olá Derek – Peço desculpas por qualquer confusão, mas isso está claramente mencionado na primeira etapa. Aqui está uma captura de tela para sua referência.
Se tiver mais alguma dúvida, por favor, nos avise. Obrigado 🙂
É possível restringir datas futuras de serem selecionadas?
por exemplo 1. Não permitir datas no dia de Natal “5 de dezembro
por exemplo 2 A data escolhida deve ser no mínimo 2 dias antes da data de hoje?
Obrigado
Olá Mark – Claro, para o primeiro, você pode usar estes trechos de código e personalizar conforme sua necessidade.
Para o segundo, você pode usar estes trechos de código. Simplesmente mude o +1), para quantos dias (no seu caso, você pode usar +2) você deseja restringir o seletor.
Espero que isso ajude. Obrigado 🙂
Adicionei um campo de data de chegada e um campo de data de partida. O problema é que um usuário pode escolher uma data de chegada no futuro, mas uma data de partida antes da data de chegada. Existe alguma lógica condicional que eu possa usar para limitar a data de partida a qualquer data APÓS a data de chegada?
Obrigado,
Tony
Olá Tony – é possível conseguir isso com o WPForms. Você pode usar um trecho de PHP para comparar duas datas dentro do mesmo formulário para garantir que a data de partida seja igual ou posterior à data de chegada. O trecho verificaria se a segunda data é menor ou igual à primeira data e, em caso afirmativo, exibiria uma mensagem de erro. Essa funcionalidade pode ser implementada com qualquer licença do WPForms.
Por favor, verifique este tutorial com detalhes e o código PHP personalizado que você precisa inserir em seu site.
Caso ajude, aqui está nosso tutorial com as maneiras mais comuns de adicionar código personalizado como este.
Espero que isso ajude. Obrigado 🙂
Olá!
Como posso restringir a seleção de datas apenas para o dia 1 e o dia 16 de cada mês?
Olá,
Você pode conseguir isso com um pequeno trecho de código personalizado. Temos um exemplo em nossa documentação para desenvolvedores aqui: Limitar datas específicas no Seletor de Datas.
Nesse trecho, apenas certas datas do mês são permitidas. Você pode atualizar os números das datas no código (por exemplo, alterá-los para 1 e 16) para que apenas essas datas permaneçam selecionáveis. Se você gostaria de ajuda para adaptar o trecho para o seu formulário, por favor, sinta-se à vontade para entrar em contato com nossa equipe de suporte.