Central de Ajuda Wix
    Início
  1. Crie o seu site
  2. Recursos avançados
  3. CMS
  4. Conecte elementos de entrada do usuário ao CMS
    5. CMS: configurar um formulário personalizado usando elementos de entrada dropdown

CMS: configurar um formulário personalizado usando elementos de entrada dropdown

26 min de leitura
Crie formulários personalizados que permitem que os visitantes usem os campos dropdown para enviar suas seleções diretamente para suas coleções do CMS. Este artigo orienta você no processo de adição de um elemento de entrada dropdown e um botão de envio. Você conectará os dois elementos a um conjunto de dados que permitirá que os envios dos visitantes sejam salvos em sua coleção do CMS. 

Após concluir essas etapas, você pode expandir seu formulário ao adicionar mais elementos de entrada e conectá-los ao mesmo conjunto de dados. 
Uma captura de tela de um elemento de entrada dropdown em uso em um site online.
Antes de começar:
Certifique-se de adicionar o CMS ao seu site se você ainda não fez isso. 

Etapa 1 | Adicione o elemento dropdown

Vá para a página no seu editor onde você deseja criar um formulário personalizado e adicione o elemento dropdown.

Editor Wix
Editor X
Editor do Wix Studio
  1. Vá para o seu Editor.
  2. Vá para a página na qual você deseja adicionar elementos de entrada.
  3. Clique em Elementos   no lado esquerdo do Editor.
  4. Clique em Entrada.
  5. Clique em Dropdown.
  6. Clique e arraste o dropdown que você deseja usar para a página. 
Uma captura de tela da adição do elemento dropdown no Editor.

Etapa 2 | Conecte-se ao CMS

Conecte seu dropdown a um conjunto de dados que se conecta a uma coleção de CMS onde você armazenará os envios. 

Para as opções que aparecem na lista dropdown, você pode adicioná-las manualmente ou usar itens de uma coleção CMS diferente. Para usar itens do CMS, conecte a lista dropdown a um conjunto de dados diferente que se conecta a um campo em outra coleção.

Editor Wix
Editor X
Editor do Wix Studio
  1. No seu editor, clique no elemento dropdown que você adicionou. 
  2. Clique no ícone Conectar ao CMS . 
  3. Conecte-se a um conjunto de dados que se vincula à coleção onde você armazenará os envios: 
    • Se você não tiver um conjunto de dados na página: 
      1. Clique em + Adicionar conjunto de dados no lado direito. Em seguida, escolha a coleção a ser conectada, insira o nome do conjunto de dados e clique em Criar.  
      2. Clique em Coletar conteúdo.
    • Se você já tiver um conjunto de dados na página:
      1. Clique em Coletar conteúdo. 
      2. Clique no dropdown Escolha um conjunto de dados e selecione o conjunto de dados relevante. Se preferir, clique em Adicionar conjunto de dados para criar um novo, escolha a coleção a ser conectada, insira o nome do conjunto de dados e clique em Criar.
  4. Clique no dropdown O valor se conecta com e selecione Adicionar novo campo. 
    1. Insira um Nome do campo para o novo campo da coleção. 
    2. Selecione o Tipo de campo no dropdown. O tipo de campo determina que tipo de dados você pode armazenar no campo. 
    3. Clique em Adicionar.
  1. Clique na alavanca Conectar itens da lista para escolher onde gerenciar as opções do elemento:
    • Ativada: use um campo de outra coleção do CMS para as opções. Conecte o conjunto de dados relevante e escolha os campos a serem usados no dropdown Etiquetas e valores se conectam a.
    • Desativada: clique em Gerenciar opções para criar as opções para o elemento separadas do CMS. 

Etapa 3 | Defina os modos do conjunto de dados

Como os conjuntos de dados controlam a conexão entre suas coleções e os elementos da página, certifique-se de que cada conjunto de dados esteja no modo correto. Para o conjunto de dados conectado à sua coleção de envios, defina o modo como Gravação. Isso permite que as seleções dropdown "escrevam" ou adicionem à sua coleção após o envio. 

Se você conectou os itens da lista dropdown a outra coleção por meio de um novo conjunto de dados, o conjunto de dados deve ser definido automaticamente e corretamente como Leitura e gravação. No entanto, se você se conectou a um conjunto de dados existente, certifique-se de defini-lo como Leitura e gravação ou Leitura. Isso permite que o elemento de entrada dropdown "leiam" ou visualize os itens da coleção para que ele possa usá-los na lista de opções. 
Editor Wix
Editor X
Editor do Wix Studio
  1. No painel à direita, clique em Configurações do conjunto de dados no primeiro dropdown Escolha um conjunto de dados. Esse conjunto de dados se conecta à coleção em que você armazenará os envios. 
  1. Clique no dropdown Modo do conjunto de dados e selecione Leitura.
  1. (Se você conectou itens da lista ao CMS) Defina o modo para o conjunto de dados conectado aos itens da lista:
    1. Clique em Voltar ao elemento Dropdown na parte superior do painel. 
    2. Clique em Configurações do conjunto de dados abaixo do conjunto de dados selecionado na seção Conexões da lista. 
    3. Clique no dropdown Modo do conjunto de dados e selecione Leitura ou Leitura e gravação.
    4. (Opcional) Clique em + Adicionar filtro se quiser criar um filtro para excluir determinados itens da lista de opções. 
    5. (Opcional) Clique em + Adicionar classificação se quiser escolher a ordem em que os itens aparecem na lista de opções. 

Etapa 4 | Defina as permissões da coleção

Defina as permissões para a coleção onde você armazenará os envios. Você pode escolher entre configurações de permissão predefinidas, como Envios de formulário, que permitem que os visitantes adicionem conteúdo. Se necessário, você pode personalizar as permissões para controlar quem pode adicionar, editar, visualizar e excluir os itens da coleção. 
Editor Wix
Editor X
Editor do Wix Studio
  1. Clique em CMS  à esquerda do Editor.
  2. Clique em Suas coleções.
  3. Passe o mouse sobre o conjunto de coleção para coletar os envios e clique no ícone Mais ações .
  4. Clique em Permissões e privacidade. 
Uma captura de tela da seleção das configurações de permissões e privacidade para uma coleção CMS.
  1. Clique no dropdown Que tipo de conteúdo você vai armazenar nesta coleção? e selecione Envios de formulário. Se necessário, você pode escolher outra opção e clicar nos dropdowns para ajustar quem pode visualizar, adicionar, excluir e atualizar o conteúdo. Saiba mais sobre como configurar permissões de coleção. 
Uma captura de tela da configuração das permissões e privacidade da coleção.
  1. Clique em Salvar.

Etapa 5 | Crie um botão de envio

Você precisa criar uma maneira para os visitantes enviarem suas opções depois de selecioná-las no elemento dropdown. Adicione um botão ou imagem e conecte-o ao mesmo conjunto de dados que se conecta à sua coleção de envios. Em seguida, defina a ação de clique do botão ou imagem como Enviar. Isso permite que a seleção do dropdown 'grave' ou crie um novo item na coleção de envios quando o botão "enviar" for clicado. 

Se você conectar outros elementos de entrada ao mesmo conjunto de dados, o botão de envio também enviará as entradas para a coleção. 
Editor Wix
Editor X
Editor do Wix Studio
  1. Clique em Elementos   no lado esquerdo do Editor.
  2. Clique em Botão.
  3. Clique e arraste o botão que deseja usar como botão de envio para a página. Você pode usar qualquer um dos seguintes tipos de botão: Botões temáticos, Botões de texto e ícone, Botões de ícone, ou Botões de imagem.
    Dica: como alternativa, você pode adicionar uma imagem e usá-la como seu botão de envio. 
  1. Clique em Alterar texto e ícone e insira o texto que deseja exibir no botão (por exemplo: "Enviar"). 
  2. Clique no ícone Conectar ao CMS .
  3. Clique no dropdown Escolha um conjunto de dados e selecione o conjunto de dados conectado à sua coleção de envios. 
  4. Clique no dropdown A ação do clique conecta-se a e selecione Enviar. 
  5. (Opcional) Adicione mensagens de sucesso e falha que aparecem quando os envios são feitos com ou sem sucesso:
    1. Clique em + Adicionar mensagem de sucesso e depois em + Adicionar mensagem de falha.
    2. Clique e arraste as duas mensagens para o local onde deseja que elas apareçam. Elas podem se sobrepor porque as mensagens não são exibidas ao mesmo tempo.
    3. Clique em Editar texto em cada mensagem para editar as mensagens.
  6. Selecione o botão e clique no ícone Conectar ao CMS . Em seguida, clique no dropdown Quando bem sucedido, ir para e selecione uma opção:
    • Ficar nessa página: o visitante permanece na mesma página depois de enviar o formulário.
    • Um link: o visitante é redirecionado para outra página após enviar o formulário. Clique em Escolher em Escolha um link e configure o link. 
  1. Clique no botão e selecione o ícone Design  para personalizar a aparência do seu botão de envio. 

Etapa 6 | Personalize o elemento dropdown

Defina o título, o texto da variante e outras opções nas configurações do dropdown. Personalize a aparência do elemento no painel Design e ajuste o alinhamento, o espaçamento e o preenchimento no painel Layout. 
Editor Wix
Editor X
Editor do Wix Studio
  1. No seu editor, clique no elemento dropdown. 
  2. Clique em Configurações e edite o seguinte:
    • Título do campo: insira um título que aparece na parte superior do menu dropdown.
    • Mostrar texto inicial: escolha o texto inicial que os visitantes veem antes de clicarem no elemento dropdown:
      • Nenhum: os visitantes veem uma caixa em branco antes de clicar no elemento dropdown.
      • Texto da variante: use seu próprio texto no elemento dropdown (por exemplo: "Escolha sua cor"). Insira o texto no campo Texto da variante. 
      • Item do menu dropdown: mostre um item da lista dropdown. Se você conectou a lista ao CMS, o item que aparece é a primeira opção de dropdown que os visitantes podem selecionar. Se você não conectou os itens da lista ao CMS, clique em Selecione um item da sua lista para escolher qual item aparecerá. 
      • Preenchimento automático: clique na alavanca para determinar o que acontece quando os visitantes digitam para buscar no dropdown:
        • Ativada: apenas as opções que correspondem ao texto digitado aparecem no dropdown. 
        • Desativada: todas as opções aparecem no dropdown. 
    • Tipo de lista dropdown: escolha uma opção:
      • Personalizado: personalize o elemento dropdown no painel Design. No mobile, o tipo de lista é sempre definido como Navegador.
      • Navegador: use o tema padrão do navegador no elemento dropdown.
    • Esse campo é: marque a caixa de seleção Obrigatório para solicitar que os visitantes selecionem um item dessa lista dropdown para que o envio seja realizado.
  1. Clique no ícone Layout  para ajustar o alinhamento do texto e o espaçamento do elemento. 
  2. Clique no ícone Design  para escolher um design predefinido e selecione Personalizar design para ajustar ainda mais a aparência do elemento dropdown. 
  3. (Opcional) Clique no ícone Animação  para adicionar uma animação ao elemento dropdown. 
Pronto para ficar online?
Clique em Visualizar no canto superior direito do seu editor para testar seu novo formulário dropdown personalizado. Quando tudo estiver como você quer e funcionando perfeitamente, clique em Publicar para que as alterações apareçam online. 

Se você ativou o Sandbox, sincronize sua coleção Sandbox com a coleção live para que as alterações no banco de dados fiquem ativas. 

Perguntas frequentes

Clique nas perguntas abaixo para obter respostas às perguntas mais comuns sobre como conectar elementos dropdown ao CMS. 

Esse artigo foi útil?

|

Neste artigo

  • Etapa 1 | Adicione o elemento dropdown
  • Etapa 2 | Conecte-se ao CMS
  • Etapa 3 | Defina os modos do conjunto de dados
  • Etapa 4 | Defina as permissões da coleção
  • Etapa 5 | Crie um botão de envio
  • Etapa 6 | Personalize o elemento dropdown
  • Perguntas frequentes

Contrate um profissional

Encontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
Encontre um Parceiro