Como criar um formulário do WordPress com um selecionador de data (maneira fácil)

Deseja criar um formulário do WordPress com um seletor de datas?

Um campo de seleção de data é uma maneira conveniente de capturar informações relacionadas a datas em seus formulários do WordPress. Por exemplo, talvez você precise saber a data de nascimento dos usuários ou queira que eles agendem facilmente uma consulta para os seus serviços por meio dos formulários.

Neste artigo, mostraremos como criar facilmente um formulário do WordPress com um selecionador de datas.

Por que criar um formulário do WordPress com um selecionador de data?

Um campo de seleção de data em um formulário do WordPress é útil quando se deseja que os usuários insiram datas. Exemplos comuns incluem:

• Formulários de registro que solicitam aos usuários que insiram suas datas de nascimento.
• Formulários de pedido para escolher a data e o horário de entrega de um pedido.
• Formulários de itens de aluguel para selecionar uma data de retirada ou devolução de um item de aluguel.
• Formulários de solicitação de retorno de chamada para permitir que os usuários informem quando desejam ser contatados sobre seus produtos ou serviços.
• Formulários de solicitação de férias para permitir que os funcionários insiram as datas de início e término de suas folgas.
• Formulários de agendamento ou reserva para sites de acomodações ou serviços.

Um campo de entrada de data é uma maneira muito mais fácil para os usuários inserirem datas do que digitá-las manualmente. Ele garante que o formato da data permaneça consistente em todos os envios de formulários, reduzindo os erros e melhorando a experiência do usuário.

Dito isso, vamos ver como criar facilmente um formulário do WordPress com um seletor de datas. Você pode usar esses links rápidos para navegar por este artigo:

Etapa 1: Instale o plug-in WPForms e escolha um modelo

A primeira etapa é instalar o WPForms. Ele é o melhor plug-in de formulário de contato do WordPress no mercado, que facilita muito a criação de todos os tipos de formulários do WordPress em seu site, inclusive formulários com campos de seleção de data.

Para obter instruções detalhadas, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Você pode ver nossa análise completa do WPForms para obter mais detalhes.

Após a ativação, vá até a página WPForms ” Adicionar novo no painel do WordPress.

Isso o direcionará para a página “Select a Template” (Selecionar um modelo).

Antes de escolher um modelo, é uma boa ideia nomear seu formulário do WordPress para que você possa identificá-lo facilmente mais tarde.

Ao rolar a tela para baixo, você verá vários modelos de formulários pré-fabricados disponíveis aqui, muitos dos quais já têm o campo de intervalo de datas incluído.

Para fins de exemplo, usaremos o modelo Simple Contact Form e adicionaremos o campo de seleção de data a ele. Mas fique à vontade para escolher o modelo mais adequado para você.

Depois de fazer sua escolha, basta clicar no botão “Use Template” (Usar modelo).

Etapa 2: Adicione o campo de seleção de data ao seu formulário do WordPress

Agora, você chegará ao construtor de formulários WPForms. Você verá as opções de campo na coluna da esquerda e uma visualização do formulário no lado direito da tela.

Por padrão, o modelo Simple Contact Form tem apenas o nome, o endereço de e-mail e o campo de comentários adicionados ao formulário.

Para fins de demonstração, mostraremos como adicionar um campo de data ao seu formulário do WordPress. Mas se o seu modelo já tiver esse campo, você poderá pular para a parte de edição desta etapa.

O que você precisa fazer é rolar para baixo até a seção Fancy Fields na coluna da esquerda, onde você verá o campo “Date / Time”.

Basta arrastar e soltar esse campo no local desejado em seu formulário. Neste tutorial, nós o colocamos logo abaixo do campo Email.

Depois de fazer isso, clique no campo “Date/ Time” (Data/Hora) para editá-lo. Isso abrirá a guia “Field Options” (Opções de campo) no lado esquerdo da tela.

A partir daqui, você pode alterar o rótulo do campo, cujo padrão é “Data/Hora”. Vamos usar “Preferred Time for Phone Call” (Hora preferida para chamada telefônica) para o nosso campo.

Você também pode alterar o formato da data do campo usando o menu suspenso Format. As opções são Data e hora, Data ou Somente hora. Isso pode ser útil se você quiser usar apenas uma data sem um campo de hora para coletar as datas de nascimento dos usuários.

Além disso, você pode preencher o texto da descrição para fornecer mais contexto sobre o que o usuário precisa inserir no campo.

Por fim, você pode marcar a caixa “Obrigatório” se quiser tornar esse campo obrigatório. Isso significa que o usuário terá de selecionar uma data e hora antes de enviar o formulário.

Depois de fazer isso, basta clicar no botão “Save” (Salvar) na parte superior para armazenar as configurações do formulário.

Etapa 3: Configurar as opções avançadas do seletor de data e hora

Por padrão, o campo seletor de intervalo de datas em seu formulário do WordPress será um calendário com um menu suspenso de horário ao lado.

A data atual será selecionada, mas o usuário pode alterá-la para escolher uma data diferente. O formato da data é mês/dia/ano.

Enquanto isso, o padrão do menu suspenso de hora é um relógio de 12 horas com intervalos de 30 minutos.

Os usuários podem escolher um horário que seja melhor para eles.

Em alguns casos, talvez você queira alterar as configurações do seletor de data. Por exemplo, talvez seu país siga os formatos de dia/mês/ano ou data e hora de 24 horas em vez dos formatos padrão.

Para fazer isso, você terá que mudar para a guia “Advanced” (Avançado) na parte superior do painel do lado esquerdo.

Aqui, você pode ajustar o tamanho do campo de seleção de data. Em seguida, na seção Date (Data), é possível alterar o intervalo de datas de um calendário para um menu suspenso de datas.

Mudar o seletor do calendário de datas para um menu suspenso de datas é uma boa ideia se o formulário tiver espaço limitado e o calendário parecer pequeno.

Esta é a aparência do menu suspenso de datas:

Abaixo disso, você pode alterar o formato da data de mês/dia/ano (1/31/2024) para dia/mês/ano (31/1/2024) ou Mês, Dia, Ano (31 de janeiro de 2024).

Se você escolher o seletor de data do calendário, também poderá inserir um texto de espaço reservado no campo “Data”. Você pode preenchê-lo com o seu formato de data para que os usuários saibam qual formato você está usando e não se confundam.

Além disso, você pode ativar a opção “Limit Days” (Limite de dias) para ajustar o intervalo de datas que pode ser selecionado. Isso será útil se você executar seus serviços somente durante os dias úteis.

Sinta-se à vontade para desativar também as datas passadas para evitar que datas anteriores sejam selecionadas.

Em seguida, vamos para a seção “Time” para alterar o seletor de horário.

Aqui, você pode alterar o intervalo para 15 minutos ou 1 hora em vez de 30 minutos. Também é bom inserir um texto de espaço reservado aqui para mostrar o formato de hora que você está usando.

O padrão do seletor de hora é um relógio de 12 horas, mas você pode mudar para um relógio de 24 horas, se preferir.

Além disso, fique à vontade para ativar a configuração “Limit Hours” (Limite de horas) para especificar os horários de início e término de seus serviços. Dessa forma, os usuários não poderão marcar uma consulta fora do seu horário comercial.

Além disso, você pode inserir um nome de classe CSS para o campo de intervalo de datas. Esse é um recurso avançado e opcional, mas você pode usá-lo para substituir o estilo do formulário usando código posteriormente.

Por último, mas não menos importante, você pode ocultar o rótulo e/ou o subrótulo do campo de formulário, se necessário.

Quando estiver satisfeito com o novo formulário, você poderá salvá-lo clicando no botão “Save” (Salvar) no canto superior direito da tela.

Etapa 4: Incorporar o formulário do WordPress em seu site

Agora você está pronto para adicionar seu novo formulário com o selecionador de datas ao seu site WordPress. Para fazer isso, basta clicar no botão “Incorporar” na parte superior do construtor de formulários.

Será exibida uma janela pop-up solicitando que você selecione uma página existente para adicionar o formulário ou crie uma nova página para o formulário a partir do zero. Ambas as opções usam o editor de blocos, portanto, as etapas são bastante semelhantes.

Adicionar o bloco WPForms a uma página nova ou existente

Para inserir o formulário em uma página existente, clique no botão “Select Existing Page” (Selecionar página existente). Depois disso, selecione uma das páginas que você já tem em seu blog ou site do WordPress e clique em “Let’s Go!”.

Se quiser adicionar o formulário a uma nova página, basta clicar no botão “Create New Page” (Criar nova página).

Em seguida, dê um nome à sua nova página e clique em “Let’s Go!” (Vamos lá!).

Esses dois métodos o levarão ao editor de blocos, onde você verá algumas instruções sobre como adicionar o bloco WPForms.

Primeiro, clique no botão “+” adicionar bloco.

Em seguida, digite “WPForms” na barra de pesquisa do bloco.

Basta arrastar e soltar o bloco onde for melhor para a página.

Tudo o que você precisa fazer agora é clicar no menu suspenso.

Em seguida, selecione o formulário que você acabou de criar.

Na barra lateral Block settings (Configurações do bloco), você pode personalizar os estilos do campo do formulário, do rótulo e do botão para que fiquem mais bonitos com o tema do WordPress.

Você pode alterar o tamanho, o raio da borda e as cores de cada elemento.

Agora, você pode clicar no botão “Update” (Atualizar) ou “Publish” (Publicar) para tornar o formulário ativo em seu site.

Ele deve ter a seguinte aparência em seu site do WordPress:

Se quiser inserir o widget de formulário em um post em vez de em uma página, crie um novo post ou abra um já existente no editor de blocos.

Depois disso, basta seguir as mesmas etapas para adicionar o bloco WPForms a uma página, como neste método.

Adicionar o bloco WPForms a uma área pronta para o widget

Se você usa um tema clássico do WordPress, talvez queira exibir o formulário em uma área de cabeçalho, rodapé ou barra lateral pronta para widgets. Essa pode ser uma boa ideia se o formulário for bem curto e não ocupar muito espaço.

Observação: Se estiver usando um tema de bloco, esse método não funcionará em seu site.

Para fazer isso, basta acessar Appearance “ Widgets na área de administração do WordPress. Em seguida, navegue até a área pronta para widget desejada e clique no botão branco “+” para adicionar bloco dentro dela. Depois disso, você pode procurar o bloco WPForms.

Se você vir duas opções, poderá escolher uma delas, pois ambas fazem a mesma coisa.

Como no método anterior, basta selecionar o formulário que você acabou de criar anteriormente. Na barra lateral de configurações do bloco, você pode configurar o design para que ele se ajuste melhor ao seu tema do WordPress.

Quando você estiver satisfeito com as edições, basta clicar no botão “Update” (Atualizar).

É isso aí!

Esta é a aparência do nosso formulário na parte inferior de uma postagem de blog do WordPress:

Incorporar seu formulário do WordPress com um código curto

Se o bloco ou widget WPForms não funcionar, você também pode adicionar seu formulário do WordPress usando um shortcode.

Na janela pop-up “Incorporar em uma página”, basta clicar no link “usar um shortcode”. Você verá um shortcode que pode ser copiado e colado em uma página, post ou área pronta para widget.

Para obter mais informações sobre como usar códigos de acesso, leia nosso artigo sobre como adicionar um código de acesso no WordPress.

Dicas definitivas para otimizar seu formulário do WordPress

Agora que você sabe como adicionar um campo de seleção de data aos seus formulários, vamos abordar as melhores dicas para levar seus formulários ao próximo nível:

• Envie e-mails de confirmação aos remetentes do formulário – Dessa forma, os usuários receberão uma notificação de que a inscrição foi recebida com sucesso e não se esquecerão da data ou do horário que escolheram.
• Aceite pagamentos on-line em seus formulários – o WPForms é compatível com gateways de pagamento populares, como Stripe, PayPal, Square e Authorize.net. Você pode coletar pagamentos únicos ou recorrentes, e não há taxas de transação adicionais.
• Torne seus formulários mais longos conversacionais – se você tiver um evento ou formulário de registro de usuário que precise capturar muitas informações, torná-lo conversacional pode aumentar a taxa de preenchimento do formulário.
• Evite spam no formulário de contato – Você pode ativar a proteção antispam integrada do WPForms e a caixa de seleção reCAPTCHA para filtrar as entradas de formulário com spam.
• Crie formulários multilíngues – Alcance um público diversificado e aumente a acessibilidade do seu site com formulários que são exibidos em vários idiomas.
• Siga nossa lista de práticas recomendadas de design de formulário de contato – Este guia pode orientá-lo na criação do melhor formulário do WordPress para converter visitantes regulares em leads ou clientes.
• Leia nosso guia especializado sobre a criação de formulários interativos – o cofundador do WPForms, Jared Atchison, dá dicas sobre como tornar os formulários mais envolventes, desde o uso da lógica condicional até a adição de conteúdo de mídia avançada.

Esperamos que este artigo tenha ajudado você a aprender como criar um formulário do WordPress com um seletor de datas. Talvez você também queira dar uma olhada em nosso artigo sobre como criar um formulário de várias páginas no WordPress e em nossa lista definitiva dos melhores plug-ins de pesquisa do WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.