header-logo
Confira como usar o Wix para construir seu site e negócio.
Personalize e gerencie seu site com os recursos do Wix.
Gerencie assinaturas, planos e faturas.
Administre seu negócio e conecte-se com os membros.
Compre, conecte ou transfira um domínio para o seu site.
Expanda seu negócio e presença online.
Aumente sua visibilidade com recursos de SEO e marketing.
Acesse recursos avançados e otimize sua produtividade.
Encontre soluções, problemas conhecidos ou contate-nos.
placeholder-preview-image
Domine novas habilidades com nossos cursos e tutoriais.
Confira nossas dicas de web design, marketing e mais.
Aumente o tráfego orgânico vindo dos motores de busca.
Desenvolva um site único com a nossa plataforma full-stack.
Alcance seus objetivos com a ajuda de um especialista.
placeholder-preview-image
  1. Início
  2. Crie o seu site
  3. Recursos avançados
  4. CMS
  5. Conecte elementos de entrada do usuário ao CMS
  6. CMS: configurar um formulário personalizado usando elementos de entrada dropdown

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

26 min
Neste artigo
  • Etapa 1 | Adicione o elemento dropdown
  • Etapa 2 | Conecte-se ao CMS
  • Etapa 3 | Defina as permissões da coleção
  • Etapa 4 | Crie um botão de envio
  • Etapa 5 | Personalize o elemento dropdown
  • Perguntas frequentes
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 "Enviar". 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 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.
Dica:
Adicione mais elementos de entrada para cada tipo de informação que os visitantes precisam enviar. Os elementos de entrada que você adiciona determinam os tipos de campos aos quais eles podem se conectar e o tipo de dado que eles podem salvar. 

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 as opções da lista dropdown a um conjunto de dados diferente que se conecte a um campo em outra coleção.
Editor Wix
Editor do Wix Studio
  1. No seu editor, adicione um conjunto de dados que se conecte a uma coleção onde você salvará os envios:
    1. Clique em CMS  à esquerda. 
    2. Clique em Adicionar elementos de conteúdo. 
    3. Clique em Conjunto de dados do formulário.
    4. Clique no dropdown Escolha uma coleção e selecione uma coleção para armazenar os envios. 
    5. Dê um nome ao conjunto de dados (por exemplo: "Envios"). 
    6. Clique em Criar.
  2. Clique no elemento dropdown e selecione Coletar conteúdo no painel Conectar dropdown à direita.
Captura de tela de
  1. Clique no dropdown Escolha um conjunto de dados e selecione o conjunto de dados "Envios".
  2. Conecte o elemento de entrada dropdown a um novo campo de coleção para armazenar seus envios:
    1. Clique no dropdown O valor se conecta com e selecione Adicionar novo campo.
    2. Insira o Nome do campo para o novo campo da coleção. 
    3. (Apenas código) Insira o Campo-chave que identifica esse campo no código do seu site. Isso não pode ser alterado depois. 
    4. Clique no dropdown Tipo de campo e selecione o tipo de campo "Texto", "Número" ou "Referência", dependendo do tipo de dado que você deseja coletar.
      Dica: para tipos de campo "Referência", selecione a coleção referenciada no dropdown.
    5. Clique em Adicionar.
Captura de tela de um elemento de entrada dropdown sendo conectado a um novo campo da coleção.
  1. Clique na alavanca Mostrar opções de uma coleção para escolher onde gerenciar as opções do dropdown:
    • 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. 
Captura de tela das opções de lista de um elemento de entrada dropdown sendo conectadas.
  1. (Se você adicionou outros elementos de entrada) Conecte as entradas ao conjunto de dados "Envios":
    1. Clique no elemento de entrada relevante. 
    2. Clique no ícone Conectar ao CMS  .
    3. Repita os passos 3 e 4 acima para conectar a entrada ao conjunto de dados "Envios". 
    4. Repita essa etapa para cada elemento de entrada que você deseja adicionar ao seu formulário do CMS personalizado. 
E os modos do conjunto de dados?
  • Se você adicionou um "Conjunto de dados de formulário", ele já está definido corretamente para o modo "Gravação". Esse modo permite que o conjunto de dados adicione novos itens à sua coleção "Envios" com base nos envios do elemento de entrada dropdown.
  • Se você conectou as opções da lista que os visitantes selecionam no elemento dropdown, certifique-se de que o conjunto de dados separado está no modo "Leitura" ou "Leitura e gravação".
  • Se você precisar que seu formulário do CMS atualize itens de coleção existentes, defina o conjunto de dados "Envios" para o modo "Leitura e gravação". Certifique-se de que as permissões da coleção também permitam que pessoas com as funções relevantes atualizem o conteúdo. 

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

Defina as permissões para a coleção onde você armazenará os envios. Você pode escolher a configuração predefinida Coletar conteúdo que permite que os visitantes adicionem conteúdo e, em seguida, especificar quem pode adicioná-lo. Ou você pode escolher permissões do tipo Avançado para controlar quem pode ver, adicionar, atualizar e excluir os itens da coleção. 
Editor Wix
Editor do Wix Studio
  1. Clique em CMS  à esquerda do Editor.
  2. Clique em Suas coleções.
  3. Passe o mouse sobre a coleção "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. Escolha quais permissões usar para a coleção:
  2. Escolha o tipo de permissão que você deseja usar para sua coleção:

Etapa 4 | Crie um botão de envio

Você precisa criar uma maneira para os visitantes enviarem as respostas do elemento de entrada que inseriram ou selecionaram. Crie um botão "Enviar" ao adicionar um botão ou imagem comum e conecte-o à ação de clique "Enviar". Quando os visitantes clicam no botão "Enviar", os valores da sua entrada de dropdown e quaisquer outras entradas que você conecte ao conjunto de dados "Envios" são salvos na sua coleção. Dependendo do modo do conjunto de dados e das permissões da sua coleção, os valores são adicionados como novos itens ou usados para atualizar itens existentes.
 
Você também pode criar botões separados para as seguintes ações do conjunto de dados: 
  • Novo: adicione ou atualize os itens da coleção (dependendo do modo do conjunto de dados) e redefina as entradas para aceitar novos valores. 
  • Reverter: redefina os valores nos elementos de entrada que ainda não foram enviados. 
  • Excluir: remova itens selecionados da sua coleção (somente para o modo "Leitura e gravação"). 
  • Página seguinte/Página anterior: Se você estiver exibindo os itens que os visitantes estão editando em uma galeria ou repetidor, você pode adicionar esses botões para permitir que os visitantes naveguem por "páginas" de itens. Se você criou seu formulário em uma página dinâmica de item, use a ação de clique Página dinâmica seguinte/Página dinâmica anterior.
Editor Wix
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. 
Captura de tela de um botão sendo adicionado no Editor Wix.
  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. 
Captura de tela de um botão
  1. Clique no botão e selecione o ícone Design  para personalizar a aparência do seu botão de envio. 

Etapa 5 | 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 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.
Captura de tela das configurações do elemento de entrada dropdown.
  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?

|
Contrate um profissionalEncontre um Parceiro Wix que pode ajudar você a alcançar os objetivos do seu site.
Começar
Neste artigo
  • Etapa 1 | Adicione o elemento dropdown
  • Etapa 2 | Conecte-se ao CMS
  • Etapa 3 | Defina as permissões da coleção
  • Etapa 4 | Crie um botão de envio
  • Etapa 5 | Personalize o elemento dropdown
  • Perguntas frequentes

Esse artigo foi útil?

|
Uma captura de tela de um elemento de entrada dropdown em uso em um site online.
Uma captura de tela da adição do elemento dropdown no Editor.
Captura de tela de
Captura de tela de um elemento de entrada dropdown sendo conectado a um novo campo da coleção.
Captura de tela das opções de lista de um elemento de entrada dropdown sendo conectadas.
Uma captura de tela da seleção das configurações de permissões e privacidade para uma coleção CMS.
Captura de tela de um botão sendo adicionado no Editor Wix.
Captura de tela de um botão
Captura de tela das configurações do elemento de entrada dropdown.