CMS: configurar um formulário personalizado usando elementos de entrada dropdown
22 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.
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
- Vá para o seu editor.
- Vá para a página na qual você deseja adicionar elementos de entrada.
- Clique em Elementos
no lado esquerdo do Editor. - Clique em Entrada.
- Clique em Dropdown.
- Clique e arraste o dropdown que você deseja usar para a página.
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 do Wix Studio
- No seu editor, clique no elemento dropdown que você adicionou.
- Clique no ícone Conectar ao CMS
. - 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:
- 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.
- Clique em Coletar conteúdo.
- Se você já tiver um conjunto de dados na página:
- Clique em Coletar conteúdo.
- 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.
- Se você não tiver um conjunto de dados na página:
- Clique no dropdown O valor se conecta com e selecione Adicionar novo campo.
- Insira um Nome do campo para o novo campo da coleção.
- Selecione o Tipo de campo no dropdown. O tipo de campo determina que tipo de dados você pode armazenar no campo.
- Clique em Adicionar.
- 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 do Wix Studio
- 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.
- Clique no dropdown Modo do conjunto de dados e selecione Leitura.
- (Se você conectou itens da lista ao CMS) Defina o modo para o conjunto de dados conectado aos itens da lista:
- Clique em Voltar ao elemento Dropdown na parte superior do painel.
- Clique em Configurações do conjunto de dados abaixo do conjunto de dados selecionado na seção Conexões da lista.
- Clique no dropdown Modo do conjunto de dados e selecione Leitura ou Leitura e gravação.
- (Opcional) Clique em + Adicionar filtro se quiser criar um filtro para excluir determinados itens da lista de opções.
- (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 da 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 depois especificar quem pode adicioná-lo. Ou você pode escolher permissões Personalizadas para controlar quem pode adicionar, editar, visualizar e excluir os itens da coleção.
Editor Wix
Editor do Wix Studio
- Clique em CMS
à esquerda do Editor. - Clique em Suas coleções.
- Passe o mouse sobre o conjunto de coleção para coletar os envios e clique no ícone Mais ações
. - Clique em Permissões e privacidade.
- Escolha o tipo de permissão que você deseja usar para sua coleção:
Observação: os proprietários e colaboradores do site são sempre tratados como administradores quando estiverem conectados ao site online. Isso significa que eles podem visualizar, adicionar, atualizar e excluir o conteúdo da coleção no site online. Essa regra se aplica, independentemente de qual permissão da coleção você selecionar.
Coletar conteúdo
Personalizada
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 do Wix Studio
- Clique em Elementos no lado esquerdo do Editor.
- Clique em Botão.
- 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.
- Clique em Alterar texto e ícone e insira o texto que deseja exibir no botão (por exemplo: "Enviar").
- Clique no ícone Conectar ao CMS .
- Clique no dropdown Escolha um conjunto de dados e selecione o conjunto de dados conectado à sua coleção de envios.
- Clique no dropdown A ação do clique conecta-se a e selecione Enviar.
- (Opcional) Adicione mensagens de sucesso e falha que aparecem quando os envios são feitos com ou sem sucesso:
- Clique em + Adicionar mensagem de sucesso e depois em + Adicionar mensagem de falha.
- 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.
- Clique em Editar texto em cada mensagem para editar as mensagens.
- 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.
- 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 do Wix Studio
- No seu editor, clique no elemento dropdown.
- 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.
- Clique no ícone Layout
para ajustar o alinhamento do texto e o espaçamento do elemento. - Clique no ícone Design
para escolher um design predefinido e selecione Personalizar design para ajustar ainda mais a aparência do elemento dropdown. - (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.
Posso exportar os envios que foram salvos para minha coleção?
Os visitantes do site podem usar elementos de entrada para filtrar o conteúdo que aparece no meu site?
O que é o modo do conjunto de dados e como ele afeta as interações do visitante?
O que é um conjunto de dados?
De onde vem a lista de itens se eu conectar meu elemento dropdown a um campo de referência?
Esse artigo foi útil?
|