Adicionar formulários personalizados

Os formulários podem ser uma ótima maneira de coletar mais informações do que os campos padrão conseguem capturar. Você pode adicionar um formulário personalizado ao processo de cadastro e/ou ao processo de agendamento e até anexar arquivos aos formulários. Também é possível usar um formulário de forma independente, por exemplo, para adicionar um formulário de contato ao seu site. Os formulários podem ser usados no SuperSaaS para:

Use um formulário personalizado apenas quando os campos padrão do diálogo de cadastro ou reserva já não forem suficientes. Se já existir um campo padrão para a informação que você precisa, normalmente é melhor usá-lo para que o restante do sistema possa trabalhar diretamente com esse dado.

Criar um formulário personalizado para coletar informações específicas
Adicionar um formulário ao cadastro ou ao processo de agendamento para coletar informações extras
Usar um formulário independente para outras finalidades

Criando um formulário

Com o Assistente de Novo Formulário, você pode criar facilmente um novo formulário. Diferentemente do formulário padrão usado no calendário, você pode adicionar quantos campos precisar e tem mais controle sobre o comportamento e o layout do formulário.

Usando o Assistente de Novo Formulário

Para criar um novo formulário, vá para a página do Painel e selecione Novo formulário no menu à direita. Primeiro, você deverá escolher entre um formulário Integrado e um formulário Independente. Sempre será possível alternar entre os dois tipos mais tarde. Se você não tiver certeza de qual precisa, escolha Integrado, já que ele é mais fácil de configurar. Se você já tiver formulários personalizados disponíveis, também verá a opção de usar um deles como base para o novo formulário.

Adicionando campos

A próxima tela permite que você monte o formulário. Comece selecionando um tipo de campo no painel no canto inferior esquerdo, por exemplo, um Campo de texto ou um Botão de opção. Isso abrirá uma janela pop-up na qual você poderá personalizar o campo definindo nome, valor padrão e várias outras opções que dependem do tipo de campo escolhido. Se você não quiser colocar um rótulo no campo nem adicionar texto de apoio, essas opções podem ficar em branco e o layout se ajustará automaticamente.

A maioria dos tipos de campo oferece a caixa de seleção Obrigatório. Isso significa que o formulário não pode ser enviado se o campo ficar em branco. Os campos Campo de texto e Área de texto multilinha também têm a opção Único. Essa opção garante que cada formulário use um valor diferente nesse campo. Isso pode ser útil se, por exemplo, você quiser que as pessoas escolham um nome de usuário exclusivo. O campo Texto de apoio permite adicionar ajuda diretamente ao lado do campo, facilitando o preenchimento.

Uma utilização prática da opção é aplicá-la a um campo com uma única caixa de seleção. Isso permite criar uma opção como , que pode ser colocada abaixo de uma caixa de comentário HTML com o texto dos seus Termos de Serviço.

Trabalhando com campos baseados em escolha

Existem campos como Botões de opção e que permitem criar uma lista predefinida de opções para o usuário escolher. Para criar um campo de lista, cada opção deve ser informada em uma linha separada. As opções listadas dessa forma são as que os clientes veem ao preencher o formulário. Para armazenar um dado diferente daquele que o usuário enxerga, use colchetes [] após cada opção. O valor dentro dos colchetes será então exibido e armazenado no banco de dados.

Por exemplo, se uma das opções for Suíte New York [quarto 1], a interface mostrará , mas ao baixar o formulário aparecerá quarto 1.

Se você apenas adicionar colchetes vazios a uma opção, nada será armazenado no banco de dados. Isso pode ser usado com a opção Obrigatório para criar uma opção que não pode ser selecionada. Uma boa forma de fazer isso é usar essa opção como primeira entrada de um menu suspenso, por exemplo, (selecione uma opção [ ]). Essa será a primeira opção exibida por padrão ao usuário.

Botões de opção e menus suspensos podem ter um campo de texto opcional. Isso é útil quando você quer adicionar uma opção “Outro” no fim de uma lista. Você pode ativar isso adicionando o código especial [*] a uma das opções.

Gerenciando campos do formulário

Cada campo pode ser configurado em uma destas três opções: normal (padrão), oculto ou somente leitura.

Se um campo estiver definido como Normal, ele funcionará normalmente e ficará visível para todos.
Se um campo estiver definido como Oculto, ele ficará visível apenas para superusuários e administradores, sendo útil para comentários internos ou informações que os clientes não devem ver.
Quando um campo estiver definido como Somente leitura, ele será visível para todos, mas apenas superusuários e administradores poderão alterá-lo. Isso é útil em casos como um número de associado, que o cliente pode ver, mas não editar.

Se quiser ocultar um formulário inteiro, basta deixar todos os campos como Normal e ocultar o formulário em outro ponto do sistema.

Depois de criar ou editar o campo, salve clicando em Adicionar campo. Ele passará a aparecer no formulário e você poderá criar outro campo, se necessário. Lembre-se de que nenhuma alteração no formulário será salva até que você clique em Salvar alterações. Você também pode clicar no botão Enviar dentro do próprio formulário para salvar a página.

Geralmente, não é recomendável adicionar campos padrão, como e-mail, a um formulário personalizado que será integrado a uma agenda. O sistema não saberia como usar os dados do seu formulário para enviar confirmações por e-mail e ainda tentaria usar os dados do campo de e-mail do formulário padrão de agendamento ou cadastro. Como alternativa, use o campo apropriado no formulário padrão de agendamento. Os campos do formulário de agendamento também podem ser listados na página Supervisionar da sua agenda. Veja detalhes do agendamento para mais informações.

Adicionando upload de arquivos

Se você quiser que os usuários enviem arquivos, como currículo ou foto, pode fazer isso adicionando um ou mais campos de upload ao formulário. Para que o upload funcione, você precisará ter uma conta, gratuita ou paga, no Dropbox. Seus usuários não precisam ter conta no Dropbox.

No editor de formulários, você pode adicionar um campo de upload clicando em “Upload de arquivo” na caixa no canto inferior esquerdo. Na primeira vez que fizer isso, aparecerá um botão permitindo conectar sua conta SuperSaaS ao Dropbox. Você só precisa fazer essa conexão uma vez, e ela será usada para todos os campos de upload em todos os formulários da sua conta. Se depois quiser desconectar o Dropbox, isso pode ser feito em Configurar > Visão geral em qualquer formulário.

Quando alguém envia um formulário com um arquivo anexado, o arquivo é enviado diretamente do navegador do usuário para a pasta Apps/SuperSaaS/nome_do_seu_formulário na sua conta do Dropbox. Você pode recuperá-lo clicando no ícone de download em qualquer lugar onde o formulário possa ser visto no SuperSaaS, como na página Supervisionar do formulário. Também é possível recuperá-lo diretamente no Dropbox, mas, se você tiver muitos usuários, pode ser difícil identificar qual arquivo pertence a quem.

Os arquivos são transferidos diretamente do navegador do usuário para o seu Dropbox. E, quando você baixa um arquivo, mesmo clicando no link de download no SuperSaaS, ele é baixado diretamente do Dropbox para o seu computador. Os arquivos não são processados nem armazenados em nossos servidores em nenhum momento. Isso é preferível em termos de confidencialidade e desempenho, mas significa que não temos backup dos seus arquivos caso você os exclua acidentalmente.

Como regra, os arquivos permanecem na sua pasta do Dropbox, mesmo que o formulário ou o agendamento aos quais foram anexados sejam excluídos. A única exceção é quando você edita um formulário que contém um arquivo enviado e substitui ou exclui esse arquivo, pois nesse caso ele também será removido do Dropbox.

Personalizando o layout

Quando quiser editar um campo, basta clicar nele e a janela Editar campo será exibida. Se quiser reorganizar os campos, basta clicar e arrastá-los com o mouse. Lembre-se de que excluir um campo removerá qualquer dado já informado naquele campo em formulários enviados. As alterações só se tornam permanentes depois que a página é salva.

Você pode ajustar o layout dos campos usando os botões no painel superior esquerdo. Por padrão, os campos são exibidos com o rótulo acima deles. No entanto, você pode alternar para um layout de duas colunas, em que o rótulo fica à esquerda e o campo à direita. Se houver campos sem rótulo, eles ocuparão as duas colunas.

Por padrão, a opção de ajuste automático permite que o navegador determine a largura ideal, normalmente correspondendo ao maior campo.
Para definir a largura manualmente, use os botões S, M e L para escolher 600, 750 ou 900 píxeis.
Se você estiver usando o layout de duas colunas, poderá ajustar a largura relativa entre elas para 20/80, 30/70 ou 40/60. Se deixar em Auto, o navegador ajustará as colunas automaticamente.
Também é possível definir uma largura fixa para campos de texto e uma altura fixa para áreas de texto.

Em Configurações de layout você pode alterar as cores usadas nos vários elementos que compõem um formulário (veja também Alterando a aparência de uma agenda). Campos HTML permitem definir tanto a cor do texto quanto a de fundo. Se quiser incluir imagens em um campo HTML, elas já precisam estar disponíveis na internet, porque não é possível fazer upload direto de imagens no SuperSaaS.

Ao salvar o formulário, você voltará para a tela de configuração. Você pode testá-lo clicando em Utilizar no canto superior direito. Se quiser alterá-lo, clique em Configurar e selecione a aba Design para continuar trabalhando nele.

O texto de apoio e os campos de comentário HTML podem conter “autotextos” para que o conteúdo seja exibido de forma diferente conforme o idioma selecionado. Por exemplo: $if FR {Bonjour} $else {Hello}

Se o texto de apoio de um campo de texto contiver placeholder="example" ou pattern="[0-9]*", esses valores serão adicionados como atributos HTML ao campo. Você pode usar isso para garantir, por exemplo, que alguém informe um número de telefone ou uma birthdate válidos.

Adicionando um formulário ao processo de cadastro ou agendamento

Um formulário integrado pode ser adicionado tanto ao processo de cadastro quanto ao de agendamento. Se você quiser que o formulário seja preenchido em cada compromisso, deve anexá-lo ao processo de agendamento. Você pode adicionar um formulário a uma agenda em Configurar > Processo. Como administrador, você verá uma opção “Pular”, que ainda permitirá criar uma reserva sem formulário.

Se, por outro lado, você quiser que o formulário seja preenchido apenas uma vez por usuário cadastrado, deve adicioná-lo ao processo de cadastro. A adição de um formulário ao processo de cadastro é feita em Controle de acesso. Se você não trabalha com usuários cadastrados, adicionar um formulário aqui não terá efeito.

A opção de anexar um formulário só fica visível depois que você cria pelo menos um formulário personalizado. Ao adicionar um formulário, será pedido que você escolha se ele deve ser preenchido por você ou pelos usuários, e se ele deve ficar visível para eles.

O formulário e o item ao qual ele está vinculado, seja uma conta de usuário final ou um compromisso, só serão salvos no banco de dados se ambos forem concluídos. Portanto, se alguém criar um agendamento e fechar o navegador antes de preencher o formulário anexado, o agendamento não será salvo.

Se você enviar uma confirmação para novos agendamentos ou contas, poderá anexar o formulário à mensagem incluindo a palavra mágica $form no texto do e-mail (veja também Personalizando mensagens e notificações).

Consulte a seção Uso diário para mais informações sobre como acessar os dados enviados pelos usuários nos formulários.

Usando um formulário independente

Um formulário independente funciona da mesma forma que um formulário integrado e também pode ser usado assim, mas possui recursos extras que permitem seu funcionamento autônomo. Por exemplo, você pode usá-lo para adicionar um formulário de contato ao seu site.

Ao criar um formulário, você pode optar por torná-lo independente. Como alternativa, também pode converter um formulário integrado existente em um formulário independente, e vice-versa. Basta ir para Configurar > Visão geral e clicar em Converter no fim da página.

Um formulário independente terá sua própria URL, pela qual poderá ser acessado diretamente. Assim como você pode personalizar a URL de uma agenda, também pode modificar a URL do formulário para incluir seu próprio nome de domínio. Um formulário independente também conta com duas telas adicionais de configuração: a aba Processo, que permite personalizar o processo de envio do formulário, e a aba Mensagens, que permite personalizar as mensagens exibidas como parte desse processo. As configurações dessas abas não têm efeito quando o formulário é usado de forma integrada; nesse caso, elas devem ser ajustadas na tela de configuração da agenda em que o formulário foi integrado.

A aba Processo descreve o fluxo de preenchimento do formulário. Um fluxograma na parte inferior é atualizado em tempo real conforme você faz alterações. Na primeira seção, você pode definir restrições sobre quem pode acessar o formulário e quando ele estará disponível. Por exemplo, é possível fechar o formulário depois que um certo número de pessoas se inscrever ou quando uma data específica for atingida, exibindo uma mensagem personalizada em seguida. Essa mensagem pode ser definida na aba Mensagens. Nela, você também pode personalizar a mensagem de “Obrigado” exibida após um envio bem-sucedido, assim como o e-mail de confirmação opcional.

Você pode colocar um link para o formulário no seu próprio site ou inseri-lo em um iframe, de forma semelhante à integração de uma agenda ao site (veja Integração para mais informações). Depois que os usuários preencherem o formulário, você pode redirecioná-los de volta ao seu site ou mostrar uma mensagem de “Obrigado”.

Quando você usa campos ocultos, o formulário aparecerá de forma diferente para seus clientes do que para você. Para ver como ele fica para um cliente, será necessário sair da conta e abrir a página como se fosse um visitante comum, ou usar outro navegador para visualizá-lo. Esse processo é idêntico ao teste de uma agenda.