Tutorial do Velo: Criação de Formulário para Armazenar Campo de Entrada em uma Coleção do Banco de Dados

6 min de leitura
Visite o site do Velo by Wix para começar e continuar aprendendo.
Neste tutorial, você aprenderá a criar um formulário personalizado para receber campo de entrada do usuário. Mostraremos como fazer o design de um formulário com elementos Campo de Entrada, criar uma coleção do banco de dados e conectá-la a esses elementos usando um conjunto de dados. Por último, testaremos o formulário no modo Visualizar e publicaremos o site para que os usuários possam enviar conteúdo. 

1. Ative o Velo

Velo adiciona funcionalidades avançadas ao Editor Wix, permitindo que você crie um site mais interativo e dinâmico. 
 
Para ativar o Velo:
Na barra superior do Editor, clique em Velo e depois em Ativar Velo.

Feito isso, você perceberá algumas mudanças no Editor:

2. Crie uma Coleção do Banco de Dados

Uma coleção do banco de dados é o local onde você armazena o conteúdo do seu site ou onde coleta informações enviadas pelos usuários. Ao criar uma coleção, você também precisa definir as permissões. Elas permitem o controle do que os usuários podem fazer com os dados da sua coleção. Aqui, estamos adicionando uma coleção vazia que armazenará o conteúdo que os usuários enviam por meio de um formulário.

Para criar uma coleção:

  1. Na barra lateral da Estrutura do Site, clique no ícone + próximo a Banco de dados e selecione Nova Coleção. Se a tela Introduza Coleções do Banco de Dados for exibida, clique em Comece a criar.
  2. Na tela Criar uma Coleção do Banco de Dados, dê um nome à coleção.
  3. No menu dropdown, selecione o uso pretendido da coleção. Analise quais usuários você deseja que possam ler, escrever, modificar e excluir dados. Para o formulário, provavelmente a melhor opção é Enviar Formulário, permitindo que todos enviem conteúdo, mas somente você (o administrador) terá permissão de ler, modificar e excluir o conteúdo.
  4. Clique em Criar Coleção. A nova coleção é aberta no Gerenciador de Dados, que é uma tabela ao estilo de planilhas que permite gerenciar o conteúdo da sua coleção do banco de dados.

3. Configure Sua Coleção do Banco de Dados

Vamos supor que o seu site ofereça um brinde promocional e que você deseje que os visitantes possam fazer login para enviar as informações deles. Neste caso, você precisa adicionar um campo para cada informação que deseja que os usuários enviem.

Para configurar uma coleção:
  1. No Gerenciador de Dados, à direita da linha do título, clique no botão + para adicionar um campo à coleção.
  2. Configure o campo para que corresponda à informação que você deseja que os usuários enviem. Escolha o Tipo de Campo correto para que corresponda ao conteúdo do campo.
  3. Crie um campo para cada elemento do formulário que você planejou.

4. Faça o Design do Formulário

O formulário precisa incluir elementos que permitam aos usuários digitar as informações que você deseja coletar. Para isso, você precisa usar elementos Campo de Entrada, que estão disponíveis no menu Adicionar.

Para começar:

  1. Acesse o menu Adicionar e selecione Campo de Entrada.
  2. Arraste os elementos Campo de Entrada para a página para fazer o layout do formulário. Você pode selecionar diversos elementos, como Entrada, Botões de Opção, Menus Dropdown e Botões Upload.

5. Configure os Elementos

Após adicionar os elementos Campo de Entrada, você precisa configurar cada elemento no seu respectivo painel de Configurações.​ As configurações incluem: tipo de entrada, o texto temporário, o valor inicial, se o elemento é um campo obrigatório e se a permissão é "somente leitura".

​Para configurar os elementos:

  1. Selecione um elemento Campo de Entrada, clique no ícone de Configurações e use as Opções para configurá-lo.
  2. Repita o processo para cada elemento Campo de Entrada do formulário.

Agora, você precisa conectar os elementos Campo de Entrada à coleção. Para isso, usaremos um conjunto de dados, que será discutido nas próximas etapas.

6. Adicione e Configure um Conjunto de Dados

Um conjunto de dados conecta os elementos à coleção. Ao adicionar um conjunto de dados, você precisa decidir a qual coleção deseja conectá-lo, se deseja que os usuários possam ler e/ou escrever na coleção e muito mais. ​

Para adicionar um conjunto de dados à página:

  1. Clique no menu Adicionar, em Banco de Dados e em Formulários.
  2. Selecione o conjunto de dados adicionado à página e clique em Gerenciar Conjunto de Dados.
  3. No painel de Configurações do Conjunto de Dados, abaixo de Conectar a uma Coleção, selecione sua coleção.
  4. Feche o painel.

7. Conecte os Elementos do Formulário

Após configurar o conjunto de dados, você pode conectar os elementos a ele. É necessário acessar cada elemento do formulário e conectá-lo ao mesmo conjunto de dados. Cada vez que você conecta um elemento, também define a qual campo da coleção o valor dele se conecta.

Para conectar os elementos Campo de Entrada:

  1. Selecione um elemento e clique no botão Conectar aos dados
  2. No painel Conectar, selecione o campo da coleção onde as informações enviadas pelo usuário serão salvas
  3. Repita o processo para cada elemento Campo de Entrada do formulário

Na próxima etapa, criaremos um botão Enviar. O mesmo conjunto de dados salvará na coleção o conteúdo inserido pelo usuário.

8. Crie um Botão Enviar

Agora que todos os seus elementos estão conectados à mesma coleção com o mesmo conjunto de dados, você precisa permitir que os usuários enviem as informações. Para isso, adicione um botão à página, conecte-o ao mesmo conjunto de dados dos outros elementos e defina a ação de clique.

Para criar um botão Enviar:

  1. Adicione um botão à página e altere o texto para Enviar.
  2. Clique no botão Conectar aos dados.
  3. No painel Conectar botão, abaixo de Link se conecta a, selecione Enviar.
  4. Opcionalmente, utilize a opção Envie mensagens.
  5. Em Quando bem sucedido, ir para, o padrão é Ficar nesta página. Você também pode escolher a opção Um link para redirecionar os usuários a outra página após o envio do formulário.

Quando os usuários enviarem os dados, eles serão validados antes de serem salvos.

9. Teste o Formulário

Agora você pode testar o formulário no modo Visualizar. O conteúdo enviado será salvo no banco de dados Sandbox, usado apenas no Editor Wix e visível apenas no modo Visualizar.

Para testar o formulário:

  1. Clique em Visualizar.
  2. Preencha os campos e clique no botão Enviar.
  3. Volte ao Editor e verifique o novo item criado na coleção.

10. Publique o Site

Agora está na hora de publicar o site para que os usuários consigam enviar as informações.

Ao publicar o site, é criada uma versão vazia da coleção com todos os campos do banco de dados Sandbox. O conteúdo enviado pelos usuários será salvo no banco de dados Live, que pode ser acessado no Painel de Controle.

​No Editor, clique em Publicar para publicar o site.

11. Ver os Dados Live

Após publicar o site, o formulário ficará disponível para os visitantes do site. Após um usuário enviar um formulário no site publicado, os dados serão salvos no banco de dados Live.

​Para ver as informações enviadas pelos usuários:

  1. Clique em Configurações na barra superior e em Meu Painel de Controle.
  2. No menu da barra lateral, clique em Banco de dados.
  3. Clique na coleção para ver os dados reais.
 
Você pode filtrar e ordenar os dados. Por exemplo, é possível exibir o campo de sistema Data de Criação e depois ordenar por ele para ver os envios mais recentes.

Próximas Etapas

Com Velo, você pode adicionar mais funcionalidades ao seu formulário:

Esse artigo foi útil?

|