Como criar um formulário DatePicker para WordPress

Pretende criar um formulário WordPress com um seletor de datas?

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

Por isso, neste artigo, vamos mostrar-lhe como adicionar facilmente um campo de formulário Date/Time Picker no WordPress, além de algumas dicas se quiser personalizá-lo.

Crie o seu formulário WordPress agora

Como criar um formulário WordPress com um seletor de datas

Utilizando o WPForms, é muito simples adicionar um campo que permite às pessoas selecionar uma data, hora ou ambas específicas.

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 escritas para adicionar um seletor de datas do WordPress aos seus formulários, consulte os passos abaixo:

Passo 1: Criar um formulário WordPress

A primeira coisa que precisa de fazer é instalar e ativar o plugin WPForms. Vai precisar de uma versão paga do plugin, uma vez que 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 ter comprado e instalado o plugin WPForms, aceda a WPForms " Add New para criar um novo formulário.

No ecrã de configuração, dê um nome ao seu formulário e selecione o modelo de formulário que pretende utilizar. A grande vantagem é que o WPForms vem com mais de 2.000 modelos de formulários do WordPress.

No nosso exemplo, utilizaremos o modelo Formulário de contacto simples.

Agora vamos personalizar este formulário e adicionar-lhe o campo de seleção de datas.

Passo 2: Adicionar o Date Picker ao seu formulário WordPress

Pode adicionar campos adicionais ao modelo de formulário selecionado utilizando o editor simples de arrastar e largar do WPForms.

Vamos então arrastar o campo Data/Hora para o formulário, para onde quiser.

Quando estiver no formulário, pode arrastá-lo para cima e para baixo para o colocar noutro local e clicar novamente no campo para abrir as definições e personalizá-lo.

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

• Rótulo: Este é o título do campo que os visitantes do site verão no seu formulário.
• Formato: Escolha se pretende que este campo inclua a data e a hora, apenas a data ou apenas a hora.
• Descrição: Adicione uma descrição para o campo. Este é um bom local para adicionar instruções ou detalhes para os seus utilizadores.
• Obrigatório: Active este botão de alternância para impedir que os utilizadores submetam o formulário até este campo estar preenchido.

Se deslocar para baixo e clicar em Opções avançadas, pode personalizar ainda mais o campo Selecionador de data/hora, como mostraremos abaixo.

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 visualização de calendário.

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. Depois, é possível personalizar as seguintes opções:

• Tipo: Pode escolher entre Data Picker (a vista de calendário predefinida) ou Data Dropdown (adiciona campos dropdown separados para o mês, data e ano).
• Formato: Aqui, pode selecionar diferentes formatos de data (m/d/y ou d/m/y).
• Limitar dias: Active esta opção para selecionar os dias da semana que os utilizadores podem escolher.
• Desativar datas passadas: Com esta opção, pode impedir que os utilizadores seleccionem quaisquer datas passadas.

A seguir, vamos ver as opções de personalização da secção Hora do campo Data/Hora no WPForms.

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

À semelhança das definições do seletor de datas, pode personalizar as opções da secção Hora do campo Data/Hora.

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

Tal como anteriormente, pode alterar as definições do campo Hora acedendo ao separador Avançadas em Opções de campo. Eis o aspeto destas definições:

• Intervalo: O WPForms permite-lhe escolher entre intervalos de 15 minutos, 30 minutos e 1 hora para o campo Tempo.
• Formato: Permite-lhe escolher entre um relógio de 12 horas ou um relógio de 24 horas.
• Limitar horas: Defina o intervalo de tempo que os utilizadores podem selecionar.

Seja qual for o formato que escolher, saiba que o campo Date/Time Picker é uma excelente forma de obter dados exactos nos seus formulários. A data será sempre validada e estará no formato correto no campo de seleção de data/hora.

Só quer que alguém preencha o seu formulário de seleção de data/hora uma vez? Se quiser ver como limitar as entradas dos utilizadores, consulte este tutorial sobre como limitar o número de entradas de formulários do WordPress.

Quando terminar de personalizar as definições, clique em Guardar.

Passo 5: Configurar as definições do formulário de seleção de data

As confirmações de formulário são mensagens apresentadas às pessoas quando estas preenchem o seu formulário. As confirmações informam as pessoas de que o formulário foi processado e dão-lhe a oportunidade de lhes dizer quais os passos que devem dar a seguir.

O WPForms tem 3 tipos de confirmação à escolha:

1. Mensagem: Este é o tipo de confirmação padrão no WPForms. Quando um visitante do site submete o seu formulário, uma mensagem simples aparecerá, informando-o que o formulário está a ser processado.
2. Mostrar página: Este tipo de confirmação levará os seus clientes para uma página Web específica no seu sítio Web, agradecendo-lhes o preenchimento do formulário do Selecionador de data/hora e permitindo-lhes saber o que têm de fazer a seguir. Para obter ajuda, consulte o nosso tutorial sobre como redirecionar os clientes para uma página de agradecimento.
3. Ir para URL (Redirecionar): Esta opção é utilizada quando pretende enviar as pessoas para uma página específica que contém informações relacionadas que se encontram num sítio Web diferente.

Então, 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 seu formulário de seleção de data/hora.

Para começar, clique no separador Confirmação no Editor de Formulários, em Definições.

Em seguida, personalize a mensagem de confirmação a seu gosto e clique em Guardar.

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

Agora, vamos configurar as notificações do formulário.

Passo 6: Configurar as notificações do formulário

Quer que a data e a hora em que alguém preenche os seus formulários lhe sejam enviadas imediatamente por correio eletrónico? Vamos configurar as suas notificações de formulário para fazer isso mesmo.

As notificações são uma óptima forma de enviar automaticamente mensagens de correio eletrónico para si, para os seus empregados e para a pessoa que preencheu o formulário.

A menos que desactive esta funcionalidade, sempre que alguém submeter um formulário no seu sítio, receberá uma notificação sobre isso.

Se utilizar etiquetas inteligentes, também pode receber apenas a data e a hora nas notificações do formulário.

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

Bom trabalho! Está agora pronto para adicionar o seu formulário de seleção de data/hora ao seu sítio Web.

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

O WPForms permite-lhe adicionar os seus formulários em vários locais, desde os posts do seu blogue, páginas, rodapé e barra lateral.

Vejamos a opção mais comum: incorporar o formulário num post ou numa 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 selecione Vamos lá.

Isto levá-lo-á ao seu editor de blocos do WordPress para uma nova página com o seu formulário já incorporado. Carregue em Publicar para colocar em funcionamento o seu novo formulário de seleção de datas do WordPress.

Parabéns! O seu formulário com um seletor de datas está agora publicado.

E já está! Agora já sabe como adicionar um formulário WordPress com um seletor de datas ao seu sítio Web.

Em seguida, experimente os modelos de formulários comerciais

Se pretende acelerar o processo de criação de formulários, eis alguns modelos de formulários comerciais que podem ajudar.

Também pode querer consultar o nosso guia sobre como personalizar o formulário de redefinição de palavra-passe do WordPress.

Crie o seu formulário WordPress agora

Então, de que está à espera? Comece a usar o mais poderoso plugin de formulários do WordPress hoje mesmo.

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