Como criar um formulário DatePicker no WordPress

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

É muito simples adicionar um seletor de intervalo de datas do WordPress que os visitantes podem usar para selecionar data e hora em um formulário.

Portanto, neste artigo, mostraremos como adicionar facilmente um campo de formulário do selecionador de data/hora no WordPress, além de algumas dicas se você quiser personalizá-lo.

Crie seu formulário WordPress agora

Como criar um formulário do WordPress com um selecionador de data

Usando o WPForms, é muito simples adicionar um campo que permite que as pessoas selecionem uma data, hora específica ou ambas.

Aqui está um tutorial passo a passo sobre como criar um formulário do WordPress com um seletor de data/hora:

Se preferir instruções por escrito para adicionar um seletor de datas do WordPress aos seus formulários, consulte as etapas abaixo:

Etapa 1: Criar um formulário do WordPress

A primeira coisa que você precisa fazer é instalar e ativar o plug-in WPForms. Você precisará de uma versão paga do plug-in, pois o campo Date/Time Picker não está disponível na versão gratuita. Para obter mais detalhes, consulte este guia passo a passo sobre como instalar um plug-in no WordPress.

Depois de comprar e instalar o plug-in WPForms, acesse WPForms " Add New para criar um novo formulário.

Na tela de configuração, dê um nome ao seu formulário e selecione o modelo de formulário que deseja usar. O bom é que o WPForms vem com mais de 2.000 modelos de formulários do WordPress.

Em nosso exemplo, usaremos o modelo Simple Contact Form.

Agora, vamos personalizar esse formulário e adicionar o campo de seleção de data a ele.

Etapa 2: Adicione o selecionador de data ao seu formulário do WordPress

Você pode adicionar campos adicionais ao modelo de formulário selecionado usando o editor simples de arrastar e soltar do WPForms.

Então, vamos arrastar o campo Data/Hora para o formulário, onde você quiser.

Quando ele estiver no formulário, você poderá arrastá-lo para cima e para baixo para colocá-lo em outro lugar e clicar no campo novamente para abrir as configurações e personalizá-lo.

Ao clicar no campo de formulário Data / Hora, você verá as seguintes opções:

• Rótulo: Esse é o título do campo que os visitantes do site verão em seu formulário.
• Formato: Escolha se você deseja que esse campo inclua data e hora, somente data ou somente hora.
• Descrição: Adicione uma descrição para o campo. Esse é um bom local para adicionar instruções ou detalhes para seus usuários.
• Obrigatório: Ative esse botão de alternância para impedir que os usuários enviem o formulário até que esse campo seja preenchido.

Se você rolar a tela para baixo e clicar em Advanced Options (Opções avançadas), poderá personalizar ainda mais o campo Date/Time Picker (Seletor de data/hora ), como mostraremos a seguir.

Etapa 3: Personalizações avançadas do selecionador de datas do WPForms

Por padrão, o campo de seleção de data no WPForms é definido para o formato de exibição de calendário.

Os formatos do campo Data/Hora são fáceis de alterar no WPForms. Para isso, primeiro clique na guia Advanced (Avançado ) em Field Options (Opções de campo). Em seguida, você pode personalizar as seguintes opções:

• Tipo: Você pode escolher entre Date Picker (a exibição de calendário padrão) ou Date Dropdown (adiciona campos suspensos separados para o mês, a data e o ano).
• Formato: Aqui, você pode selecionar diferentes formatos de data (m/d/y ou d/m/y).
• Limitar dias: Ative essa opção para selecionar os dias da semana que os usuários podem escolher.
• Desativar datas passadas: Com essa opção, você pode impedir que os usuários selecionem qualquer data passada.

A seguir, veremos as opções de personalização da seção Time (Hora) do campo Date/Time (Data/Hora ) no WPForms.

Etapa 4: Personalizações avançadas do campo de tempo do WPForms

Da mesma forma que as configurações do seletor de data, é possível personalizar as opções da seção Hora do campo Data/Hora.

Por padrão, o formato da hora é definido como um relógio de 12 horas com intervalos de 30 minutos:

Como antes, você pode alterar as configurações do campo Time (Tempo) acessando a guia Advanced (Avançado ) em Field Options (Opções de campo). Veja como são essas configurações:

• Intervalo: O WPForms permite que você escolha entre intervalos de 15 minutos, 30 minutos e 1 hora para o campo Hora.
• Formato: Permite que você escolha entre um relógio de 12 horas ou de 24 horas.
• Limite de horas: Defina o intervalo de tempo que os usuários podem selecionar.

Seja qual for o formato escolhido, saiba que o campo Date/Time Picker é uma ótima maneira de obter dados precisos em seus formulários. A data sempre será validada e estará no formato correto no campo Date/Time Picker.

Deseja que alguém preencha seu formulário de seleção de data/hora apenas uma vez? Se quiser ver como limitar as entradas para os usuários, confira este tutorial sobre como limitar o número de entradas de formulários do WordPress.

Quando terminar de personalizar suas configurações, clique em Salvar.

Etapa 5: Configure as definições do formulário do selecionador de data

As confirmações de formulário são mensagens exibidas às pessoas depois que elas preenchem o formulário. As confirmações permitem que elas saibam que o formulário foi processado e oferecem a oportunidade de informar quais etapas devem ser seguidas.

O WPForms tem 3 tipos de confirmação para escolher:

1. Mensagem: Esse é o tipo de confirmação padrão no WPForms. Quando um visitante do site enviar seu formulário, uma mensagem simples será exibida, informando-o de que o formulário está sendo processado.
2. Mostrar página: Esse tipo de confirmação levará os usuários a uma página específica do seu site, agradecendo-os por preencherem o formulário do Seletor de data/hora e permitindo que você diga a eles o que precisam fazer em seguida. Para obter ajuda sobre como fazer isso, consulte nosso tutorial sobre como redirecionar os clientes para uma página de agradecimento.
3. Ir para URL (Redirecionar): Essa opção é para quando você deseja enviar as pessoas para uma página específica que contém informações relacionadas encontradas em um site diferente.

Portanto, vamos ver como configurar uma confirmação de formulário simples no WPForms para que você possa personalizar a mensagem que as pessoas verão quando enviarem o formulário do Seletor de data/hora.

Para começar, clique na guia Confirmation (Confirmação) no Form Editor, em Settings (Configurações).

Em seguida, personalize a mensagem de confirmação de acordo com suas preferências e clique em Save (Salvar).

Para obter ajuda com outros tipos de confirmação, consulte nossa documentação sobre a configuração de confirmações de formulário.

Agora, vamos configurar suas notificações de formulário.

Etapa 6: Configure suas notificações de formulário

Deseja que a data e a hora em que alguém preenche seus formulários sejam enviadas para você imediatamente em um e-mail? Vamos configurar suas notificações de formulário para fazer exatamente isso.

As 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ê desative esse recurso, sempre que alguém enviar um formulário em seu site, você receberá uma notificação sobre isso.

Se você usar as Smart Tags, também poderá receber apenas a data e a hora nas notificações do formulário.

Para isso, basta adicionar um carimbo de data/hora ao seu e-mail de notificação usando esta tag inteligente - {date format="m/d/Y"}

Bom trabalho! Agora você está pronto para adicionar o formulário Date/Time Picker ao seu site.

Etapa 7: Adicionar o formulário de seleção de data do WordPress ao seu site

O WPForms permite que você adicione seus formulários em vários locais, desde os posts do blog, páginas, rodapé e barra lateral.

Vamos dar uma olhada na opção mais comum: incorporar o 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 Create New Page (Criar nova página).

Dê um nome à sua página e selecione Let's Go (Vamos lá).

Isso o levará ao editor de blocos do WordPress para uma nova página com o formulário já incorporado. Pressione Publish (Publicar ) para colocar em funcionamento seu novo formulário de seleção de datas do WordPress.

Parabéns! Seu formulário com um selecionador de data foi publicado.

E aí está! Agora você sabe como adicionar um formulário do WordPress com um seletor de datas ao seu site.

Em seguida, experimente os modelos de formulários comerciais

Se você deseja acelerar o processo de criação de formulários, aqui estão alguns modelos de formulários comerciais que podem ajudar.

Você também pode consultar nosso guia sobre como personalizar o formulário de redefinição de senha do WordPress.

Crie seu formulário WordPress agora

Então, o que está esperando? Comece hoje mesmo a usar o mais avançado plug-in de formulários do WordPress.

E não se esqueça de que, se você gostou deste artigo, siga-nos no Facebook e no Twitter.